Open source tools for creating JavaScript maps

3 open source alternatives to Google Maps API

Web mapping
Image credits : 

Every year on the third Wednesday of November, map geeks around the world (myself included) celebrate GIS Day. Short for geographic information systems, or occasionally geospatial information science, GIS is all about using computer systems to collect, store, analyze, and display geographic data, or really any data that has a spatial component.

The past decade has changed GIS immensely. With the advent of data mining, machine learning, mobile applications, the Internet of Things, social media, and other recent additions to the computing landscape, there are orders of magnitude more data available across every discipline, and the race to do useful and interesting things is in full throttle. Once limited to more traditional realms like land records, agriculture, natural resources, and urban planning, GIS now permeates practically every field.

But how does one get started exploring the vast world of GIS? Before exploring advanced modeling, spatial analytics, and data management, the most logical place to begin learning about GIS is with the most basic representation of geographical data: a map. And if you come to GIS with any background in basic web programming and markup—JavaScript, HTML, and CSS—a web map is probably the path of least resistance to getting started.

Many people familiar with Google Maps immediately turn to the Google Maps API for getting started, but Google Maps are far from the only option. In fact, there are many open source alternatives which are better fit to specific needs, whether those needs are displaying something very basic with minimal overhead, or a complex application with many diverse components and integrations.

If you're looking to get started with web mapping, here are three libraries which are worth checking out.

Leaflet

Leaflet has in the past couple of years become one of the most popular options for creating interactive JavaScript maps. It's basic library is fairly small, making Leaflet a great option for mobile applications or other situations in which load time or size is at a premium. But it also has a ton of available plugins so that you can add on just about any functionality available with a heaftier mapping library.

Leaflet also has a strong documentation project behind it, making it a good choice for beginners, and there are a number of community-contributed examples out there on the Internet for when you get stuck, as well as many examples on the project homepage. Leaflet's source code is available on GitHub and it is licensed under a BSD license.

Modest Maps

Though Leaflet can be considered a minimalist library, Modest Maps may win an award for being even smaller. Also very modular in design, Modest Maps is a great choice for both simple maps and for people who wish to pick-and-choose components. Check out their example library for more ideas of what you might do with it.

Modest Maps is open source under a BSD license, and you can view its source on GitHub as well.

Polymaps

Polymaps is a JavaScript mapping library for creating interactive maps with both SVG-based vectors as well as tile-based maps for raster data. The nice thing about using SVG (scalable vector graphics) for creating maps is that it means that many of the same styling options which can be applied to web documents with CSS will also work with your map design. I also find that Polymaps handles zooming incredibly well compared to some other libraries

Like othe others above, Polymaps is open source under a BSD license, and you can view its source on GitHub.

Others

Of course, the three we looked at aren't the only options. There are many others, and depending on what your specific needs are, you should probably spend some time exploring all of the options before making a decison of where to get started. Some others I like include:

  • OpenLayers, which you might think of as the kitchen sink of web map programming. I often use OpenLayers when working with GeoServer; if you use the open source OpenGeo Suite for building a complete GIS solution, all of the components integrate nicely.
  • Mapael, which is a jQuery library for building attractive map visualizations with vector data.
  • D3.js, which is a more general-purpose JavaScript visualization library, but has some great features for creating simple maps easily. If you're more interested in the broader world of data visualization, D3 is a great place to start.
  • Cesium, which is very specifically meant for creating WebGL visualizations of data mapped onto 3D globes. If this interests you, some of the demos are amazing.

For others, the OpenGeo Foundation provides a fairly comprehensive list of web mapping tools, but be warned, they are in various states of scope and production-readiness.

The nice thing about using these libraries is that they encourage mixing and matching to style maps perfectly for your needs. Don't like the default map layer which sits underneath your map? Pick a different one. Prefer a different icon for representing points on your map? No problem.

Is there a favorite web mapping API we didn't mention here that you think would be a good fit for beginners? Let us know in the comments below. And have a happy GIS Day!

6 Comments

Hugo

Excellent article!

However there was not a single word about Open Street Maps... Why?

Vote up!
0
Vote down!
0
Jason Baker

Hi Hugo, OpenStreetMap is a collaborative editing project and a provider of data, not an API for displaying the map itself. Any of these three web mapping APIs highlighted here are capable of using OpenStreetMap data as a basemap for a user-created map.

For a pretty long list of web mapping frameworks capable of working with OpenStreetMap data, see this link: http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps

Vote up!
0
Vote down!
0
Albin Larsson

Both Modest Maps and Polymaps are no longer maintained since years back.

Is this article reused for earlier?

Vote up!
0
Vote down!
0
Jason Baker

Both are still very usable, but as you note, there's not much active development on either front.

Vote up!
0
Vote down!
0
miahfost

Checkout Mapzen: https://mapzen.com/

They're coming out of stealth mode and have some great ideas and some experienced folk from Google and Mapquest.

Vote up!
0
Vote down!
0
benna

found @openstreetmap on map

Vote up!
0
Vote down!
0