Infomap: Difference between revisions
From Dragon Eye Atlas
No edit summary |
No edit summary |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 16: | Line 16: | ||
a.mapbox-ctrl-logo { display: none !important; } | a.mapbox-ctrl-logo { display: none !important; } | ||
div.mapboxgl-ctrl-bottom-right { display: none !important; } | div.mapboxgl-ctrl-bottom-right { display: none !important; } | ||
div.mapboxgl-control-container button { margin: 0; } | |||
</style> | </style> | ||
| Line 34: | Line 35: | ||
<!--{/if}--> | <!--{/if}--> | ||
var map = new mapboxgl.Map(options); | var map = new mapboxgl.Map(options); | ||
map.addControl(new mapboxgl.FullscreenControl()); | |||
map.addControl(new mapboxgl.NavigationControl()); | map.addControl(new mapboxgl.NavigationControl()); | ||
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}}