Tom at 14:05, 24 September 2019

2019-09-24T14:05:05Z

← Older revision		Revision as of 16:05, 24 September 2019
Line 1:		Line 1:
	<noinclude>		<noinclude>
	== Mapbox-GL-JS Map Widget ==		== Mapbox-GL-JS Ancient Map Widget ==

	~~Shows the ancient (pre-destruction) map of Auseka~~

	=== Parameters ===		=== Parameters ===
	* lon, lat, zoom - longitude, latitude and zoom for the map (defaults: 1, 30, 4)		* 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)~~		* width, height - dimensions of the map itself on the page, in px or % (defaults: 100%, 600px)
	* bounds - optional bounds array, replaces lon,lat,zoom
	* showrealm - highlight the realm given (short name)

	=== Examples ===		=== Examples ===
Line 24:		Line 20:

	<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; border: 1px solid black'></div>		<div id='map' style='width: <!--{$width\|escape:'html'\|default:'100%'}-->; height: <!--{$height\|escape:'html'\|default:'600px'}-->; float:right; border: 1px solid black'></div>
	<script>		<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';		mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
Line 39:		Line 35:
	<!--{/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());

	<!--{if $~~showrealm~~}-->		map.setLayoutProperty('realms-labels', 'visibility', 'none');

			// Create a popup, but don't add it to the map yet.
			var popup = new mapboxgl.Popup({
			closeButton: false,
			closeOnClick: false
			});

			map.on('mousemove', 'biomes', function(e) {
			if (e.features.length > 0) {
			// Change the cursor style as a UI indicator.
			map.getCanvas().style.cursor = 'pointer';

			// Populate the popup and set its coordinates
			// based on the feature found.
			popup.setLngLat(e.lngLat.wrap())
			.setHTML(e.features[0].properties.biome)
			.addTo(map);
			}
			});

			map.on('mouseleave', 'biomes', function() {
			map.getCanvas().style.cursor = '';
			popup.remove();
			});

			<!--{if $showrealms}-->
	map.on("load", function() {		map.on("load", function() {
	~~map.setFilter('realms-overlay', ["!=", "name", "<!--{$showrealm\|escape:'html'}-->"]);~~
	map.setLayoutProperty('realms-overlay', 'visibility', 'visible');		map.setLayoutProperty('realms-overlay', 'visibility', 'visible');
	map.setLayoutProperty('realms-labels', 'visibility', '~~none~~');		map.setLayoutProperty('realms-labels', 'visibility', 'visible');
	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 52:		Line 74:
	<!--{/if}-->		<!--{/if}-->

	~~<!--{/if}-->~~

	</script>		</script>
	</includeonly>		</includeonly>

Tom: Created page with " == Mapbox-GL-JS Map Widget == Shows the ancient (pre-destruction) map of Auseka === Parameters === * lon, lat, zoom - longitude, latitude and zoom for the map (d..."

2019-09-24T14:01:22Z

Created page with "<noinclude> == Mapbox-GL-JS Map Widget == Shows the ancient (pre-destruction) map of Auseka === Parameters === * lon, lat, zoom - longitude, latitude and zoom for the map (d..."

New page

<noinclude>
== Mapbox-GL-JS Map Widget ==

Shows the ancient (pre-destruction) map of Auseka

=== 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
* showrealm - highlight the realm given (short name)

=== Examples ===
* <nowiki>{{#widget:Mapbox|bounds=[[0, 25], [8, 31]]}}</nowiki>
* <nowiki>{{#Widget:Mapbox|lat=31|lon=-15.5|zoom=3}}</nowiki>
</noinclude>
<includeonly>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
<style>
a.mapbox-ctrl-logo { display: none !important; }
div.mapboxgl-ctrl-bottom-right { display: none !important; }
div.mapboxgl-control-container button { margin: 0; }
</style>

<div style="clear:right"></div>
<div id='map' style='width: ; height: ; float:right; border: 1px solid black'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibm90dmVyeXByb2Zlc3Npb25hbCIsImEiOiJjazBvNDdkMnYwNjZrM21vMGNrd3JnaTNtIn0.2EP0LISTpDMG-Bzr_yqzBw';
var options = {
container: 'map',
style: 'mapbox://styles/notveryprofessional/ck0xfs8z911xa1cki3fl4xxjq',
logoPosition: 'bottom-right',
minZoom: 2,
center: [, ],
zoom: 
};

options.bounds = ;

var map = new mapboxgl.Map(options);
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.ScaleControl());


map.on("load", function() {
map.setFilter('realms-overlay', ["!=", "name", ""]);
map.setLayoutProperty('realms-overlay', 'visibility', 'visible');
map.setLayoutProperty('realms-labels', 'visibility', 'none');
map.setLayoutProperty('contours-labels', 'visibility', 'none');
map.setLayoutProperty('contours-lines', 'visibility', 'none');
});




</script>
</includeonly>

Widget:AncientMap - Revision history

Tom at 14:05, 24 September 2019

Tom: Created page with " == Mapbox-GL-JS Map Widget == Shows the ancient (pre-destruction) map of Auseka === Parameters === * lon, lat, zoom - longitude, latitude and zoom for the map (d..."