Difference between revisions of "AncientMap"
From Dragon Eye Atlas
(Created page with "<noinclude> == Mapbox-GL-JS Map Widget == Shows the ancient (pre-destruction) map of Auseka === Parameters === * lon, lat, zoom - longitude, latitude and zoom for the map (d...") |
|||
Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
== Mapbox-GL-JS Map Widget == | == Mapbox-GL-JS Ancient Map Widget == | ||
=== Parameters === | === Parameters === | ||
* lon, lat, zoom - longitude, latitude and zoom for the map (defaults: 1, 30, 4) | * 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: | * width, height - dimensions of the map itself on the page, in px or % (defaults: 100%, 600px) | ||
=== Examples === | === Examples === | ||
Line 24: | Line 20: | ||
<div style="clear:right"></div> | <div style="clear:right"></div> | ||
<div id='map' style='width: <!--{$width|escape:'html'|default:' | <div id='map' style='width: <!--{$width|escape:'html'|default:'100%'}-->; height: <!--{$height|escape:'html'|default:'600px'}-->; float:right; border: 1px solid black'></div> | ||
<script> | <script> | ||
mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw'; | mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw'; | ||
Line 39: | 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()); | ||
<!--{if $ | map.setLayoutProperty('realms-labels', 'visibility', 'none'); | ||
// Create a popup, but don't add it to the map yet. | |||
var popup = new mapboxgl.Popup({ | |||
closeButton: false, | |||
closeOnClick: false | |||
}); | |||
map.on('mousemove', 'biomes', function(e) { | |||
if (e.features.length > 0) { | |||
// Change the cursor style as a UI indicator. | |||
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(); | |||
}); | |||
<!--{if $showrealms}--> | |||
map.on("load", function() { | map.on("load", function() { | ||
map.setLayoutProperty('realms-overlay', 'visibility', 'visible'); | map.setLayoutProperty('realms-overlay', 'visibility', 'visible'); | ||
map.setLayoutProperty('realms-labels', 'visibility', ' | map.setLayoutProperty('realms-labels', 'visibility', 'visible'); | ||
map.setLayoutProperty('contours-labels', 'visibility', 'none'); | map.setLayoutProperty('contours-labels', 'visibility', 'none'); | ||
map.setLayoutProperty('contours-lines', 'visibility', 'none'); | map.setLayoutProperty('contours-lines', 'visibility', 'none'); | ||
Line 52: | Line 74: | ||
<!--{/if}--> | <!--{/if}--> | ||
</script> | </script> | ||
</includeonly> | </includeonly> |
Latest revision as of 16:05, 24 September 2019
Mapbox-GL-JS Ancient 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}}