Map: Difference between revisions

Revision as of 16:33, 11 October 2019

lon, lat, zoom - longitude, latitude and zoom for the map (defaults: 1, 30, 4)
width, height - dimensions of the map itself on the page, in px or % (defaults: 50%, 400px)
bounds - optional bounds array, replaces lon,lat,zoom
show, filter = show must be one of "realm", "culture", "religion" or "province" and filter must be the (short) name of the entity to highlight

@@ Line 23: / Line 23: @@
 <div style="clear:right"></div>
 <div id='map' style='width: <!--{$width|escape:'html'|default:'50%'}-->; height: <!--{$height|escape:'html'|default:'400px'}-->; float:right; margin: 0.5em 0 1em 0.5em; border: 1px solid black'></div>
+<div style="width: <!--{$width|escape:'html'|default:'50%'}-->; float:right; text-align:center">
+Biome: <span id="mapinfo-biome"></span>
+</div>
 <script>
 mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
@@ Line 52: / Line 55: @@
     map.on('mousemove', 'biomes', function(e) {
        if (e.features.length > 0) {
-          // Change the cursor style as a UI indicator.
+          $("#mapinfo-biome").html(e.features[0].properties.biome);
-         map.getCanvas().style.cursor = 'pointer';
-         // Populate the popup and set its coordinates
-         // based on the feature found.
-         popup.setLngLat(e.lngLat.wrap())
-            .setHTML(e.features[0].properties.biome)
-            .addTo(map);
        }
     });
     map.on('mouseleave', 'biomes', function() {
-       map.getCanvas().style.cursor = '';
+       $("#mapinfo-biome").html("");
-      popup.remove();
     });