Map: Difference between revisions
From Dragon Eye Atlas
No edit summary |
No edit summary |
||
| Line 57: | Line 57: | ||
map.setLayoutProperty('contours-lines', 'visibility', 'none'); | map.setLayoutProperty('contours-lines', 'visibility', 'none'); | ||
<!--{/if}--> | <!--{/if}--> | ||
map. | // Create a popup, but don't add it to the map yet. | ||
var popup = new mapboxgl.Popup({ | |||
closeButton: false, | |||
closeOnClick: false | |||
}); | |||
var info = "<table>"; | |||
map.on('mousemove', 'biomes', function(e) { | map.on('mousemove', 'biomes', function(e) { | ||
if (e.features.length > 0) { | if (e.features.length > 0) { | ||
$("#mapinfo-biome").html(e.features[0].properties.biome); | $("#mapinfo-biome").html(e.features[0].properties.biome); | ||
info = info + "<tr><td>Biome:</td><td>"+e.features[0].properties.biome+"</td></tr>"; | |||
} | } | ||
}); | }); | ||
| Line 73: | Line 79: | ||
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': $("#mapinfo-realm").html(feature.properties.name); info = info + "<tr><td>Realm:</td><td>"+feature.properties.name+"</td></tr>"; break; | ||
case 'province': $("#mapinfo-province").html(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 'culture': $("#mapinfo-culture").html(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 'religion': $("#mapinfo-religion").html(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; | ||
} | } | ||
}); | }); | ||
info = info + "</table>"; | |||
popup.setLngLat(e.lngLat.wrap()) | |||
.setHTML(info) | |||
.addTo(map); | |||
}); | }); | ||
| Line 86: | Line 97: | ||
$("#mapinfo-culture").html(""); | $("#mapinfo-culture").html(""); | ||
$("#mapinfo-religion").html(""); | $("#mapinfo-religion").html(""); | ||
popup.remove(); | |||
}); | }); | ||
Revision as of 17:16, 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}}