Map: Difference between revisions
From Dragon Eye Atlas
No edit summary |
No edit summary |
||
| (28 intermediate revisions by the same user not shown) | |||
| Line 8: | 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 " | * 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 | * info - set to show the information overlay/popup on click | ||
| Line 16: | Line 17: | ||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
<script src='https://api | <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0-beta.1/mapbox-gl.js'></script> | ||
<link href='https://api | <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 30: | Line 31: | ||
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 47: | 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('realms-labels', 'visibility', 'none'); | ||
map.setLayoutProperty('contours-labels', 'visibility', 'none'); | map.setLayoutProperty('contours-labels', 'visibility', 'none'); | ||
| Line 59: | Line 74: | ||
map.setLayoutProperty('cultures-overlay', 'visibility', 'visible'); | map.setLayoutProperty('cultures-overlay', 'visibility', 'visible'); | ||
map.setLayoutProperty('cultures-labels', '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('contours-labels', 'visibility', 'none'); | map.setLayoutProperty('contours-labels', 'visibility', 'none'); | ||
map.setLayoutProperty('contours-lines', 'visibility', 'none'); | map.setLayoutProperty('contours-lines', 'visibility', 'none'); | ||
| Line 72: | Line 100: | ||
map.on('mouseleave', 'villages-labels', function() { map.getCanvas().style.cursor = ''; }); | 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) { | map.on('click', 'realms-labels', function(e) { | ||
| Line 88: | Line 118: | ||
map.on('click', 'villages-labels', function(e) { | 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('click', 'POIs', function(e) { | |||
event.stopPropagation(); | event.stopPropagation(); | ||
var name = e.features[0].properties.name; | var name = e.features[0].properties.name; | ||
| Line 95: | Line 132: | ||
<!--{if $info}--> | <!--{if $info}--> | ||
map.setLayoutProperty('overlay', 'visibility', 'visible'); | map.setLayoutProperty('overlay-major', 'visibility', 'visible'); | ||
map.setPaintProperty('overlay', 'fill-opacity', 0); | map.setPaintProperty('overlay-major', 'fill-opacity', 0); | ||
var biome = ""; | var biome = ""; | ||
map.on('click', 'biomes', function(e) { | map.on('click', 'biomes', function(e) { | ||
if (e.features.length > 0) { | if (e.features.length > 0) { | ||
biome = e.features[0].properties. | biome = e.features[0].properties.Biome; | ||
} | } | ||
}); | }); | ||
map.on('click', 'overlay', function(e) { | map.on('click', 'overlay-major', function(e) { | ||
var Realm = "(none)"; | var Realm = "(none)"; | ||
var Culture = "(none)"; | var Culture = "(none)"; | ||
var Religion = "(none)"; | var Religion = "(none)"; | ||
| Line 113: | Line 149: | ||
switch (feature.properties.class) { | switch (feature.properties.class) { | ||
case 'realm': Realm = feature.properties.name; break; | case 'realm': Realm = feature.properties.name; break; | ||
case 'culture': Culture = feature.properties.name; break; | case 'culture': Culture = feature.properties.name; break; | ||
case 'religion': Religion = feature.properties.name; break; | case 'religion': Religion = feature.properties.name; break; | ||
| Line 121: | Line 156: | ||
new mapboxgl.Popup() | new mapboxgl.Popup() | ||
.setLngLat(e.lngLat.wrap()) | .setLngLat(e.lngLat.wrap()) | ||
.setHTML("<table><tr><td>Biome:</td><td>"+biome+"</td></tr><tr><td>Realm:</td><td>"+Realm | .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); | .addTo(map); | ||
}); | }); | ||
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}}