All Things CC:

All things Commuication & Computing….

Posts Tagged ‘Open Street Maps

6 Resources to get started with Web Mapping

leave a comment »

Smartphones and all kinds of GPS-enabled devices are enabling highly accurate location for everything. As consumers with Smartphones, we leverage Web-based Mapping frequently especially for navigation with apps such as Google Maps or Apple Maps.

Location is becoming a critical context to both consumer (e.g. geo-tagged photos) and enterprise applications (e.g. tracking your fleet & assets). Visualizing this information on a map is necessary, and by token understanding Web Mapping is critical.

I have been involved in building a asset tracking solution and personally wanted to delve deeper into the technology behind Web Mapping over the last 4 weeks or so.

Here are the resources I discovered and learnt:

  1. Programming Technology: This is more of a pre-requisite. Javascript is virtually a necessity to get into Web Mapping. You could potentially avoid Javascript by sticking to using SDKs on Smartphones but you are better off with Javascript (and also HTML/CSS as well).
  2. Primer: Study through this excellent set of slides hosted by Maptime.IO. This is the best place to get started. Don’t worry if you have a hard time understanding the first time. Come back to it after sometime if the first going is rough.
  3. The gold standard for web mapping, by far, is Google Maps. Google provides both free and paid developer API services. Google provides APIs for calculating distances, getting directions, and the tiles they have are tremendous source of information. Here is a link to get started with Web Mapping & Google Maps APIs.
  4. Open Source & Crowdsourcing has been at work in the world of Web Mapping as well. Open Street Maps (OSM) is a crowd-funded movement to map the world. The primary challenge for using OSM is that there are places for which the data is still lacking so when you attempt to zoom-in – the information coming is going to lack details. However it is open source, and free. And digging deeper by using OSM will make you an expert at Web Mapping.
  5. The primer would have mentioned about Google Maps and OSM, also something known as Leaflet. I think right after you have gone over the Primer material listed in #2 above, and if you know HTML/CSS/JS – you want to hop over to the Leaflet Tutorial site and start building maps. Leaflet was created by Vladimir Agafonkin – he works at Mapbox.
  6. Mapbox defines itself as – an open source mapping platform for custom designed maps. Check out their site, and I would recommend start with the Mapbox JS Library.

I have built, as a tutorial and learning experience, a web map that leverages Leaflet and OSM to show an interactive map of the US. You can select different overlays on the map for US Population Density, State-by-State Renewable Energy goals and Earthquake data from USGS. You can check it out by clicking the image below or going to


US Interactive Choropleth Map




Written by Ashu Joshi

November 28, 2016 at 10:02 pm