Map: Difference between revisions
From Dragon Eye Atlas
No edit summary |
No edit summary |
||
| (6 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 | * 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 17: | 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 31: | 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 73: | 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('realms-labels', 'visibility', 'none'); | ||
map.setLayoutProperty('contours-labels', 'visibility', 'none'); | map.setLayoutProperty('contours-labels', 'visibility', 'none'); | ||
| Line 119: | 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 = ""; | ||
| Line 129: | Line 142: | ||
}); | }); | ||
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 137: | 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 145: | 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}}