Actions

Widget

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 ==
 
Shows the ancient (pre-destruction) map of Auseka


=== 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: 50%, 400px)
* width, height - dimensions of the map itself on the page, in px or % (defaults: 100%, 600px)
* bounds - optional bounds array, replaces lon,lat,zoom
* showrealm - highlight the realm given (short name)


=== 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:'50%'}-->; height: <!--{$height|escape:'html'|default:'400px'}-->; float:right; border: 1px solid black'></div>
<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 $showrealm}-->
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.setFilter('realms-overlay', ["!=", "name", "<!--{$showrealm|escape:'html'}-->"]);
   map.setLayoutProperty('realms-overlay', 'visibility', 'visible');
   map.setLayoutProperty('realms-overlay', 'visibility', 'visible');
   map.setLayoutProperty('realms-labels', 'visibility', 'none');
   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}-->


<!--{/if}-->


</script>
</script>
</includeonly>
</includeonly>

Latest revision as of 15: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}}