Actions

Widget

Map: Difference between revisions

From Dragon Eye Atlas

← Older edit
No edit summary
No edit summary
 
(64 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
== Map Widget ==
== Map Widget ==
New and unified map widget.


=== Parameters ===
=== Parameters ===
Line 7: Line 8:
* bounds - optional bounds array, replaces lon,lat,zoom
* 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
* show, filter = show must be one of "realm", "culture", "religion" or "province" and filter must be the (short) name of the entity to highlight
* overlay - activate color overlay, most be one of "realms", "cultures", "religions" or "provinces"
* zone - activate zone overlay
* info - set to show the information overlay/popup on click


=== Examples ===
=== Examples ===
* <nowiki>{{#widget:Mapbox|bounds=[[0, 25], [8, 31]]}}</nowiki>
* <nowiki>{{#widget:Map|bounds=[[0, 25], [8, 31]]}}</nowiki>
* <nowiki>{{#Widget:Mapbox|lat=31|lon=-15.5|zoom=3}}</nowiki>
* <nowiki>{{#Widget:Map|lat=31|lon=-15.5|zoom=3}}</nowiki>
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<style>
<style>
a.mapbox-ctrl-logo { display: none !important; }
a.mapbox-ctrl-logo { display: none !important; }
Line 23: Line 27:
<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; margin: 0.5em 0 1em 0.5em; border: 1px solid black'></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">
<div style="width: 20%">Biome: <span id="mapinfo-biome"></span></div>
<div style="width: 20%">Realm: <span id="mapinfo-realm"></span></div>
<div style="width: 20%">Province: <span id="mapinfo-province"></span></div>
<div style="width: 20%">Culture: <span id="mapinfo-culture"></span></div>
<div style="width: 20%">Religion: <span id="mapinfo-religion"></span></div>
</div>
<script>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
var options = {
var options = {
   container: 'map',
   container: 'map',
  projection: { name: 'naturalEarth' },
   style: 'mapbox://styles/notveryprofessional/ck0qxxd4t1bua1cljtkddg3ye',
   style: 'mapbox://styles/notveryprofessional/ck0qxxd4t1bua1cljtkddg3ye',
   logoPosition: 'bottom-right',
   logoPosition: 'bottom-right',
Line 44: Line 42:
<!--{/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());
Line 50: Line 49:
map.on("load", function() {
map.on("load", function() {
<!--{if $show}-->
<!--{if $show}-->
   map.setFilter('overlay', ["all", ["==", "class", "<!--{$show|escape:'html'}-->"], ["!=", "name", "<!--{$filter|escape:'html'}-->"]]);
   <!--{if $show eq "province"}-->
   map.setLayoutProperty('overlay', 'visibility', 'visible');
      map.setFilter('overlay-minor', ["all", ["==", "class", "<!--{$show|escape:'html'}-->"], ["!=", "name", "<!--{$filter|escape:'html'}-->"]]);
      map.setLayoutProperty('overlay-minor', 'visibility', 'visible');
  <!--{elseif $show eq "state"}-->
      map.setFilter('overlay-minor', ["all", ["==", "class", "<!--{$show|escape:'html'}-->"], ["!=", "name", "<!--{$filter|escape:'html'}-->"]]);
      map.setLayoutProperty('overlay-minor', 'visibility', 'visible');
  <!--{elseif $show eq "zone"}-->
      map.setFilter('zones', ["all", ["==", "name", "<!--{$filter|escape:'html'}-->"]]);
      map.setLayoutProperty('zones', 'visibility', 'visible');
      map.setLayoutProperty('contours-labels', 'visibility', 'none');
      map.setLayoutProperty('contours-lines', 'visibility', 'none');
  <!--{else}-->
      map.setFilter('overlay-major', ["all", ["==", "class", "<!--{$show|escape:'html'}-->"], ["!=", "name", "<!--{$filter|escape:'html'}-->"]]);
      map.setLayoutProperty('overlay-major', 'visibility', 'visible');
  <!--{/if}-->
  map.setLayoutProperty('realms-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-lines', 'visibility', 'none');
<!--{elseif $overlay eq "realms"}-->
  map.setLayoutProperty('realms-overlay', 'visibility', 'visible');
  map.setLayoutProperty('contours-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-lines', 'visibility', 'none');
<!--{elseif $overlay eq "cultures"}-->
   map.setLayoutProperty('cultures-overlay', 'visibility', 'visible');
  map.setLayoutProperty('cultures-labels', 'visibility', 'visible');
  map.setLayoutProperty('realms-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-lines', 'visibility', 'none');
<!--{elseif $overlay eq "religions"}-->
  map.setLayoutProperty('religions-overlay', 'visibility', 'visible');
  map.setLayoutProperty('religions-labels', 'visibility', 'visible');
  map.setLayoutProperty('realms-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-labels', 'visibility', 'none');
  map.setLayoutProperty('contours-lines', 'visibility', 'none');
<!--{elseif $overlay eq "provinces"}-->
  map.setLayoutProperty('provinces-overlay', 'visibility', 'visible');
  map.setLayoutProperty('provinces-labels', 'visibility', 'visible');
   map.setLayoutProperty('realms-labels', 'visibility', 'none');
   map.setLayoutProperty('realms-labels', 'visibility', 'none');
   map.setLayoutProperty('contours-labels', 'visibility', 'none');
   map.setLayoutProperty('contours-labels', 'visibility', 'none');
   map.setLayoutProperty('contours-lines', 'visibility', 'none');
   map.setLayoutProperty('contours-lines', 'visibility', 'none');
<!--{/if}-->
<!--{/if}-->
  map.setLayoutProperty('overlay', 'visibility', 'visible');


   map.on('mousemove', 'biomes', function(e) {
   map.on('mouseenter', 'realms-labels', function() { map.getCanvas().style.cursor = 'pointer'; });
       if (e.features.length > 0) {
  map.on('mouseleave', 'realms-labels', function() { map.getCanvas().style.cursor = ''; });
        $("#mapinfo-biome").html(e.features[0].properties.biome);
 
       }
  map.on('mouseenter', 'towns-labels', function() { map.getCanvas().style.cursor = 'pointer'; });
  map.on('mouseleave', 'towns-labels', function() { map.getCanvas().style.cursor = ''; });
 
  map.on('mouseenter', 'villages-labels', function() { map.getCanvas().style.cursor = 'pointer'; });
  map.on('mouseleave', 'villages-labels', function() { map.getCanvas().style.cursor = ''; });
 
  map.on('mouseenter', 'POIs', function() { map.getCanvas().style.cursor = 'pointer'; });
  map.on('mouseleave', 'POIs', function() { map.getCanvas().style.cursor = ''; });
 
  map.on('click', 'realms-labels', function(e) {
       event.stopPropagation();
      var name = e.features[0].properties.name;
      // this could probably improved with the proper mediawiki magic word, but need to figure out which one and how to make it work in widgets
      window.location.href = '/dragoneye/atlas/'+name;
  });
 
  map.on('click', 'towns-labels', function(e) {
      event.stopPropagation();
      var name = e.features[0].properties.Burg;
      // this could probably improved with the proper mediawiki magic word, but need to figure out which one and how to make it work in widgets
      window.location.href = '/dragoneye/atlas/'+name;
  });
 
  map.on('click', 'villages-labels', function(e) {
      event.stopPropagation();
      var name = e.features[0].properties.name;
       // this could probably improved with the proper mediawiki magic word, but need to figure out which one and how to make it work in widgets
      window.location.href = '/dragoneye/atlas/'+name;
   });
   });


   map.on('mouseleave', 'biomes', function() {
   map.on('click', 'POIs', function(e) {
       $("#mapinfo-biome").html("");
       event.stopPropagation();
      var name = e.features[0].properties.name;
      // this could probably improved with the proper mediawiki magic word, but need to figure out which one and how to make it work in widgets
      window.location.href = '/dragoneye/atlas/'+name;
   });
   });


<!--{if $info}-->
  map.setLayoutProperty('overlay-major', 'visibility', 'visible');
  map.setPaintProperty('overlay-major', 'fill-opacity', 0);
  var biome = "";
  map.on('click', 'biomes', function(e) {
      if (e.features.length > 0) {
        biome = e.features[0].properties.Biome;
      }
  });


   map.on('mousemove', 'overlay', function(e) {
   map.on('click', 'overlay-major', function(e) {
      var Realm = "(none)";
      var Culture = "(none)";
      var Religion = "(none)";
       e.features.forEach(function(feature) {
       e.features.forEach(function(feature) {
         switch (feature.properties.class) {
         switch (feature.properties.class) {
             case 'realm':    $("#mapinfo-realm").html(feature.properties.name); break;
             case 'realm':    Realm = feature.properties.name; break;
            case 'province': $("#mapinfo-province").html(feature.properties.name); break;
             case 'culture':  Culture = feature.properties.name; break;
             case 'culture':  $("#mapinfo-culture").html(feature.properties.name); break;
             case 'religion': Religion = feature.properties.name; break;
             case 'religion': $("#mapinfo-religion").html(feature.properties.name); break;
         }
         }
       });
       });
     
      new mapboxgl.Popup()
        .setLngLat(e.lngLat.wrap())
        .setHTML("<table><tr><td>Biome:</td><td>"+biome+"</td></tr><tr><td>Realm:</td><td>"+Realm+"</td></tr><tr><td>Culture:</td><td>"+Culture+"</td></tr><tr><td>Religion:</td><td>"+Religion+"</td></tr></table>")
        .addTo(map);
   });
   });
<!--{/if}-->
});
});
</script>
</script>
</includeonly>
</includeonly>

Latest revision as of 05:38, 27 March 2022

Map Widget

New and unified 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: 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
  • overlay - activate color overlay, most be one of "realms", "cultures", "religions" or "provinces"
  • zone - activate zone overlay
  • info - set to show the information overlay/popup on click

Examples

  • {{#widget:Map|bounds=[[0, 25], [8, 31]]}}
  • {{#Widget:Map|lat=31|lon=-15.5|zoom=3}}


Retrieved from "http://lemuria.org/dragoneye/index.php?title=Widget:Map&oldid=3278"