Map integration

 Web Map Interface:

There are a number of ways to implement a map on the map. The option most known is probably with google maps API.

We will not go with this option in this application but go with Leaflet. Leaflet is open-source and has all features most developers need.

We will also be using Tangram, as mapping engine. This will allow us to fully customize the look of our map, including a custom elevation map.

Now we have an interface to show the map, an engine to change the look fully all we need now is map data. Here too there are different option but keeping with the open-source theme we will be going with OpenStreetMaps. More specifically Mapzen which is the tangram integration for OpenStreetMap. 

Our map interface has two main functions, Show a map with elevation data and letting the user select a region they want. We'll start with the latter with this code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<div id="mapid"></div> <input type="range" min="50" max="10000" value="50" class="slider" id="myRange" /> <script> var map = L.map("mapid").setView([51.505, -0.09], 13); var circle = L.circle() .setRadius(slider.value) .setLatLng([51.5, -0.09]) .addTo(map); function onMapClick(e) { circle.setLatLng(e.latlng); } function onSliderChange(e) { circle.setRadius(e.latlng); } slider.oninput = function () { circle.setRadius(this.value); }; map.on("click", onMapClick); </script>

In here we add a map with Leaflet (represented as 'L') and set the position, add a circle and change the position and radius on click and slider change.

Next we're going to change the map look the something that shows elevation.

Because the is just a quick mockup we'll be using some example code from tangram. Have a look at their heightmapper.

It is exactly what Blender want for the displacement modifier, a heightmap! Now this map may not look that great but is will do the job for now and we will change it later.