Infomap: Difference between revisions
From Dragon Eye Atlas
No edit summary |
No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 39: | Line 39: | ||
map.addControl(new mapboxgl.ScaleControl()); | map.addControl(new mapboxgl.ScaleControl()); | ||
map.on("load", function() { | |||
map.setLayoutProperty('realms-labels', 'visibility', 'none'); | |||
map.setLayoutProperty('POIs', 'visibility', 'none'); | |||
// Create a popup, but don't add it to the map yet. | // Create a popup, but don't add it to the map yet. | ||
var popup = new mapboxgl.Popup({ | var popup = new mapboxgl.Popup({ | ||
closeButton: false, | |||
closeOnClick: false | |||
}); | }); | ||
map.on('mousemove', 'biomes', function(e) { | map.on('mousemove', 'biomes', function(e) { | ||
if (e.features.length > 0) { | |||
// Change the cursor style as a UI indicator. | |||
map.getCanvas().style.cursor = ' | 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 = ''; | |||
popup.remove(); | |||
}); | |||
}); | }); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 00:22, 28 November 2019
Mapbox-GL-JS Information Map Widget
Parameters
- 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: 100%, 600px)
Examples
- {{#widget:Mapbox|bounds=[[0, 25], [8, 31]]}}
- {{#Widget:Mapbox|lat=31|lon=-15.5|zoom=3}}