Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Results for tag: maps

World Map with D3 Microlibraries and rotated to contain Russia

World Map D3 v4 Microlibraries and Russia Alaska not split

It has been a while since I released the D3 Map Starter Kit and a lot has changed. The 4.0 version of D3 is modular, decentralized, and split into small libraries that you can use independently. It has changed some of the APIs so I have updated the World Map Template to work with D3 version 4, but how do we build a map with just the D3.js micro-libraries?
Read more

Map Maker and Editor with D3.js

map creator and map designer

After building a bunch of D3 map demos, I wanted to combine them all into a Map building tool, a Map Creator based on GeoJSON or TopoJSON with many design features, editing capabilities, and proper export to SVG or PNG. It started out as an enhancement to this GeoJSON and TopoJSON Visualizer and D3 Map Starter Template. I wanted to finally use dat.GUI as a visual controller for map creation. I added some preselected maps of the world, individual countries, and even states as well as the ability to add your own map data. You can change the map projection, resize the map container, and control various design elements from colors, opacity, stroke, and even textures via Textures.js.

You also have some powerful editing capabilities: ability to remove individual objects from the map and ability to merge objects together. The best thing is that you can edit the shape of any object by clicking on it and and zooming in. This exposes small green circles on object borders that can be dragged around and the drag event changes the object shape by automatically editing the SVG path data. My previous examples on working with SVG graphics helped in adding this feature. The final image can be saved as SVG or PNG using code from the Save SVG as PNG article. Finally, I integrated SimpleModal which has a textarea where you can add points (latitude, longitude, and location name) that get added as markers on the map.
Read more

Google Maps, DataTables, and FaceBook Places API

Facebook API and Google Maps

As more APIs allow CORS, we can create some really cool integrations without any server side code. Google Maps API is an obvious one but I was surprised to see successful Ajax calls to the FaceBook Graph API which made me think about building and integrating these services. I was scraping FaceBook for Places, or geo locations, so it only makes sense to start with a world map where you can search, click, or drag markers to retrieve any latitude and longitude coordinates for your geo search.

Next, these geo coords are sent to my facebook function that initiates a graph search for places near the provided geo location. The response drops markers on the Google Map, similar to Google’s own Places API and examples. But, I also wanted to visualize this dataset in more details and used the jQuery DataTables plugin to make the API data available for easy viewing, searching, and filtering. You can get more data for a specific place by clicking on an id, which initiates another place API call and drops the JSON response in a modal window with code highlighting.

Google and Facebook for Geo Places on a Map and Table
Read more

Mapping Town Boundaries with D3

D3 Town Boundaries

I have seen a lot of cool D3 maps of US states, counties, and even zipcodes but what about cities or towns? I don’t mean plotting geo coordinates of a particular city but actually drawing the city or town boundary on the map. A population choropleth is a good use case for this but I have only seen one example of Vermont that shows town specific information. The initial problem is where do we even get the specific town boundary geospatial data?
Read more

D3 Map Starter Kit

D3 Map Framework

I have taken another look at my responsive D3 map and had some time today to fix a few issues and make some enhancements. Normally, I would have updated my last post with the changes, but I wanted to take some time to explain the individual upgrades. Previously, I really focused on creating a world map with D3 that can not only be responsive in terms of screen size but also make that responsiveness work with zoom and pan limits. I added country names and colors to the geo data and included a simple tooltip feature for each country. Now, I am expanding on that with many enhancements, cross-browser fixes, and more simplified code.

Check out the new D3 World Map Template
Here is the updated D3.js v4 World Map Template

Read more

Continents and Map Projections with D3.js

map projections

If you are familiar with “slippy map” APIs like Google Maps or Leaflet, than you probably never consider map projections and stick to the default Mercator projection. But there are many other projections (transposing our 3D earth to a 2D object like a paper or computer screen) and D3 comes with a great geo projection plugin. Most D3 examples leverage Natural Earth vector data and I wanted to do the same but show continents on the map instead of countries. So, today, I will create a World Map of Continents with D3 and a map projection visualization that shows how continents change the way they look with different map projections.
Read more

Clip Map Images on Text Background

images on text with css background

I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.
Read more

Zoom into US Zip Codes in Leaflet Map

zipdecode on leaflet

It has been a while since I touched Leaflet and today I want to play around with mapping zip codes. I really liked Ben Fry’s zipdecode project and have seen other interesting implementations. But, I want to go beyond highlighting and actually zoom into the appropriate areas based on each number of the zip code. I think this would be an interesting take on zip decoding and I am going to implement it on a Leaflet map.
Read more

50 JavaScript Libraries and Plugins for Maps

Javascript frameworks for Maps

I really like maps and today I want to list some of the best JavaScript frameworks, plugins, and libraries for making maps. Over the last few months, I have written a bunch of articles and demos on some of these JS mapping libraries but creating this compilation has opened my eyes to many more map APIs, jQuery plugins, and mapping solutions that I have not previously seen. Some of these map tools can really reduce the amount of effort needed to produce interactive maps. Many of these tools allow you to implement all kinds of dynamic maps with just a few lines of code. Here is a list of the top 50 JavaScript libraries and tools for making maps:
Read more

Exploring Locations with Google Maps

Google Maps with Tilt, street, and Road views

With the recent launch of the new Google Maps and my love for maps, I want to dedicate a post and create something with the version 3 of the Google Maps API. Street View is capturing more and more interesting locations around the world and it’s great that Google is constantly enhancing this feature. On top of this, other people are innovating and making things like Google Street Viewer and Hyperlapse which combine Google Street View and WebGL to make some awesome effects. The Google Maps API also supports 45° imagery for certain locations, which is another interesting map type. So, today, I will combine all these map views and create a Google Maps demo that explores geo locations with three different map types: roadmap, streetview, and tilt.

Multiple Google Maps
Read more