Actions

Widget

Map: Difference between revisions

From Dragon Eye Atlas

← Older editNewer edit →
No edit summary
No edit summary
Line 23: Line 23:
<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; display: grid;">
<div style="text-overflow:ellipsis;vertical-align:top">Biome: <span id="mapinfo-biome"></span></div>
<div style="text-overflow:ellipsis;vertical-align:top">Realm: <span id="mapinfo-realm"></span></div>
<div style="text-overflow:ellipsis;vertical-align:top">Province: <span id="mapinfo-province"></span></div>
<div style="text-overflow:ellipsis;vertical-align:top">Culture: <span id="mapinfo-culture"></span></div>
<div style="text-overflow:ellipsis;vertical-align:top">Religion: <span id="mapinfo-religion"></span></div>
</div>
<script>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
Line 64: Line 57:


   var biome = "";
   var biome = "";
   map.on('mousemove', 'biomes', function(e) {
   map.on('click', 'biomes', function(e) {
       if (e.features.length > 0) {
       if (e.features.length > 0) {
        $("#mapinfo-biome").html(e.features[0].properties.biome);
         biome = e.features[0].properties.biome;
         biome = e.features[0].properties.biome;
       }
       }
   });
   });


   map.on('mouseleave', 'biomes', function() {
   map.on('click', 'overlay', function(e) {
       $("#mapinfo-biome").html("");
       var Realm = "(none)";
  });
      var Province = "(none)";
 
      var Culture = "(none)";
 
       var Religion = "(none)";
  map.on('mousemove', 'overlay', function(e) {
       var info = "<table><tr><td>Biome:</td><td>"+biome+"</td></tr>";
       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); info = info + "<tr><td>Realm:</td><td>"+feature.properties.name+"</td></tr>"; break;
             case 'realm':    Realm = feature.properties.name; break;
             case 'province': $("#mapinfo-province").html(feature.properties.name); info = info + "<tr><td>Province:</td><td>"+feature.properties.name+"</td></tr>"; break;
             case 'province': Province = feature.properties.name; break;
             case 'culture':  $("#mapinfo-culture").html(feature.properties.name); info = info + "<tr><td>Culture:</td><td>"+feature.properties.name+"</td></tr>"; break;
             case 'culture':  Culture = feature.properties.name; break;
             case 'religion': $("#mapinfo-religion").html(feature.properties.name); info = info + "<tr><td>Religion:</td><td>"+feature.properties.name+"</td></tr>"; break;
             case 'religion': Religion = feature.properties.name; break;
         }
         }
       });
       });
      info = info + "</table>";
        
        
       popup.setLngLat(e.lngLat.wrap())
       popup.setLngLat(e.lngLat.wrap())
         .setHTML(info)
         .setHTML("<table><tr><td>Biome:</td><td>"+biome+"</td></tr><tr><td>Realm:</td><td>"+realm+"</td></tr><tr><td>Province:</td><td>"+province+"</td></tr><tr><td>Culture:</td><td>"+culture+"</td></tr><tr><td>Religion:</td><td>"+religion+"</td></tr></table>")
         .addTo(map);
         .addTo(map);
   });
   });

Revision as of 17:24, 11 October 2019

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

Examples

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


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