I need to display data sets, e.g. a bunch of point-based JSON files of weather forecasts, on a not-so-detailed map. The map should not be as detailed as a full-blown Google map (with roads, names of cities, rivers, etc). However, altitude contours/shades (e.g. 100m, 500m, 1000m) and 1 level of administrative lines (e.g. state/county) should appear, as well as the labels of those. For example:

enter image description here

The above image and several others like that were manually generated by me on ArcGIS. Now I would like to create a WebApp, where myself or another user can simply upload a JSON file and the points are automatically plotted on a map that looks like the one above. As far as I can see there are 2 ways of displaying a map on a WebApp:

  1. Use existing maps made available by Google, Open Street Maps, etc.
  2. Use a library to draw the map using shape/JSON files (e.g. jVectorMap).

Although 2 sounds more laborious than 1, I'm inclined to going for 2, because everything I've seen from Google or OSM is way too detailed for my needs. I can imagine plotting points and drawing county boundaries from shape/JSON files is relatively trivial with map drawing libraries. What worries me is plotting the elevation contours/shades. So my questions are:

  • Was it just me not looking properly for available maps? So is it possible to display a map like the one above with the likes of Google or OSM (which will make my life easier)?
  • If not, and I'll unfortunately have to go with option 2, are there shape/JSON files of elevation contours ready for download on the web?
  • If not, what JavaScript library can easily interpolate points so I can let the script generate the elevation lines/polygons automatically as it plots the points (the points in my data sets have an elevation attribute)?

I've mentioned JavaScript just because I'm more fluent in it, but I'm not particularly wedded to it. As long as I can run the code on a browser I'm happy!


By "map" do you mean map tiles? Or a complete web mapping solution?

Here are a few suggestions to get started:

MapBox studio
CartoDB basemaps (and CartoDB)
Leaflet Provider

Several of these offer elevation data as a hillshade baked into the tiles. MapBox studio in particular offers nearly complete control over what is shown on the basemap (labels, roads, imported data, etc.). The same could be said for CartoDB - although CartoDB is a platform for making web mapping applications - not only map tiles.

Note: OpenLayers is not a map or map provider, it is a front-end library for displaying map data in web browsers, similar to Leaflet and the Google Maps API.

| improve this answer | |
  • By "map" I meant "the layers sitting under the points". Does "tile" mean a non-vector format? I'd rather everything displayed were a vector, so zooming won't affect resolution. – Rodrigo Feb 25 '16 at 17:01
  • Mabox studio is all vector as I understand; all others are pngs tiles rendered at different zoom levels, so detail remains relevant – toms Feb 25 '16 at 17:03
  • I tried Mapbox studio but I couldn't make elevation polygons/lines 'stick around' if I zoomed out a little. I left the "edit by zoom level" option off. Am I missing something? – Rodrigo Feb 25 '16 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.