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.<p>Does anyone have any thoughts along these lines?
Here’s my introductory tutorial for creating a map with D3 & TopoJSON using geometry from Natural Earth:<p><a href="http://bost.ocks.org/mike/map/" rel="nofollow">http://bost.ocks.org/mike/map/</a><p>And here’s a subsequent tutorial for visualizing geographic data:<p><a href="http://bost.ocks.org/mike/bubble-map/" rel="nofollow">http://bost.ocks.org/mike/bubble-map/</a>
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.<p>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: <a href="https://www.mapbox.com/mapbox-gl-styles/styles/bright-v4.json" rel="nofollow">https://www.mapbox.com/mapbox-gl-styles/styles/bright-v4.jso...</a><p>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.<p>[1] TileMill - <a href="https://www.mapbox.com/tilemill/" rel="nofollow">https://www.mapbox.com/tilemill/</a><p>[2] Leaflet - <a href="http://leafletjs.com/" rel="nofollow">http://leafletjs.com/</a><p>[3] MapboxGL - <a href="https://www.mapbox.com/mapbox-gl/" rel="nofollow">https://www.mapbox.com/mapbox-gl/</a>
You might be looking for Mapbox and/or Leaflet<p><a href="https://www.mapbox.com/developers/" rel="nofollow">https://www.mapbox.com/developers/</a><p><a href="http://leafletjs.com/" rel="nofollow">http://leafletjs.com/</a>
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: <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html" rel="nofollow">http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/...</a><p>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:<p><a href="http://gmt.soest.hawaii.edu/" rel="nofollow">http://gmt.soest.hawaii.edu/</a>
Great discussion. Tools are in the box now.<p><a href="http://www.hackertoolbox.com/tags/map" rel="nofollow">http://www.hackertoolbox.com/tags/map</a>
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:<p><a href="https://github.com/mathisonian/lightning" rel="nofollow">https://github.com/mathisonian/lightning</a>
You can style maps using <a href="https://www.mapbox.com/" rel="nofollow">https://www.mapbox.com/</a> and embed them very easily using leaflet.js.<p>If you want to go a bit further, stamen mapstack does some cool stuff: <a href="http://mapstack.stamen.com/" rel="nofollow">http://mapstack.stamen.com/</a>
Thanks all for the responses! I have a lot of new tech to try out.<p>For those wanting an example:<p><a href="http://kut.org/term/google-fiber" rel="nofollow">http://kut.org/term/google-fiber</a><p>Basically just a grey/white map showing important navigational details like roads and rivers, with different color sections overlaying it.
Can you post an example of what you want?<p>If you just want to produce choropleths, you can try Leaflet. Other options include d3.js and kartograph.<p><a href="http://kartograph.org/" rel="nofollow">http://kartograph.org/</a><p><a href="http://d3js.org/" rel="nofollow">http://d3js.org/</a>
Can you clarify on "more graphic"?<p>I'm a fan of datamaps, <a href="https://datamaps.github.io/" rel="nofollow">https://datamaps.github.io/</a>, 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<p><a href="http://cartodb.com/" rel="nofollow">http://cartodb.com/</a><p>Regards.
Another D3 tutorial that was helpful:<p><a href="http://www.tnoda.com/blog/2013-12-07" rel="nofollow">http://www.tnoda.com/blog/2013-12-07</a>