Ask HN: Are there any JavaScript libraries for generating maps? | Hacker News Reader

Ask HN: Are there any JavaScript libraries for generating maps?

49 pointsCoreSet22 comments

Specifically, I'd love to be able to pass in geocoded location boundaries and color styles to generate a map of the chosen color over the chosen area. Google maps is obviously great for showing navigational data or directions, but I'm thinking along the lines of something more graphic.

Does anyone have any thoughts along these lines?

View on HN

Here’s my introductory tutorial for creating a map with D3 & TopoJSON using geometry from Natural Earth:

http://bost.ocks.org/mike/map/

And here’s a subsequent tutorial for visualizing geographic data:

http://bost.ocks.org/mike/bubble-map/

I'm currently using D3 & TopoJSON to plot many things (including where our visitors are, since we have the lat and long of our users, by parsing the nginx log) and it's really great!!

Thanks for your hard work Mike!!!

Just thought I'd say, when I first ran into D3, I sneered a bit. "These guys are just copying protovis." Took me a bit longer to notice the connection.

If you want to create your own map tiles in advance and show them using JavaScript library - use TileMill [1] and Leaflet [2]. Both are excellent and very well documented.

To create the whole map on the fly using JavaScript - try mapbox-gl.js [3]. You should be able to pass your location boundaries via mapboxgl.GeoJSONSource (and then you probably don't even need MapBox API key - haven't tried it, though) and style it like this: https://www.mapbox.com/mapbox-gl-styles/styles/bright-v4.jso...

PS. If you decide to host your own tiles - remember that browsers limit the number of connections to each domain. Your map will load much faster if you serve tiles from several different domains, e.g. tiles1.example.com, tiles2.example.com, etc.

[1] TileMill - https://www.mapbox.com/tilemill/

[2] Leaflet - http://leafletjs.com/

[3] MapboxGL - https://www.mapbox.com/mapbox-gl/

If someone is going to use different domains for their tiles, they might want to do something with hashes of the tile id/name to get a subdomain, in order to preserve caching.

You might be looking for Mapbox and/or Leaflet

https://www.mapbox.com/developers/

http://leafletjs.com/

Also, openlayers

http://openlayers.org

+1 for Leaflet. Really easy to use.

This can help you get up and running quickly:

http://jvectormap.com/

Google Maps API does have [some limited] style options, however then you're stuck using Google Maps API. There is even a "wizard" to make things easier: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/...

Mapbox is a great alternative for stylish maps. Their JS library is built off of Leaflet which allows you to change the tileset at a later date.

Might not fit your criteria, but in the scientific community GMT is popular:

http://gmt.soest.hawaii.edu/

Great discussion. Tools are in the box now.

http://www.hackertoolbox.com/tags/map

Lightning by mathisonian is a solid library for generating these in python/js. It's an http-based data viz server with additional functionality similar to iPython notebooks. Check out the map demo on the github here:

https://github.com/mathisonian/lightning

You can style maps using https://www.mapbox.com/ and embed them very easily using leaflet.js.

If you want to go a bit further, stamen mapstack does some cool stuff: http://mapstack.stamen.com/

Thanks all for the responses! I have a lot of new tech to try out.

For those wanting an example:

http://kut.org/term/google-fiber

Basically just a grey/white map showing important navigational details like roads and rivers, with different color sections overlaying it.

So, what did you use?

How did you do it?

Did we help?

Can you post an example of what you want?

If you just want to produce choropleths, you can try Leaflet. Other options include d3.js and kartograph.

http://kartograph.org/

http://d3js.org/

Can you clarify on "more graphic"?

I'm a fan of datamaps, https://datamaps.github.io/, for doing some quick and getting decent output.

You can use cartodb. It's a service but it's faster than use libraries like leafletjs

http://cartodb.com/

Regards.

Bleeding edge WebGL requirements, but great 3D object control: http://cesiumjs.org/

Another D3 tutorial that was helpful:

http://www.tnoda.com/blog/2013-12-07

http://geo5.org

Reply on news.ycombinator.com