Widget:Infomap - Revision history

Tom at 23:22, 27 November 2019

2019-11-27T23:22:05Z

← Older revision		Revision as of 01:22, 28 November 2019
Line 56:		Line 56:
	// Populate the popup and set its coordinates		// Populate the popup and set its coordinates
	// based on the feature found.		// based on the feature found.
	~~console.log(e.features[0].properties);~~
	popup.setLngLat(e.lngLat.wrap())		popup.setLngLat(e.lngLat.wrap())
	.setHTML(e.features[0].properties.Biome)		.setHTML(e.features[0].properties.Biome)

2019-11-27T23:20:56Z

← Older revision		Revision as of 01:20, 28 November 2019
Line 56:		Line 56:
	// Populate the popup and set its coordinates		// Populate the popup and set its coordinates
	// based on the feature found.		// based on the feature found.
			console.log(e.features[0].properties);
	popup.setLngLat(e.lngLat.wrap())		popup.setLngLat(e.lngLat.wrap())
	.setHTML(e.features[0].properties.Biome)		.setHTML(e.features[0].properties.Biome)

2019-11-27T23:18:51Z

← Older revision		Revision as of 01:18, 28 November 2019
Line 57:		Line 57:
	// based on the feature found.		// based on the feature found.
	popup.setLngLat(e.lngLat.wrap())		popup.setLngLat(e.lngLat.wrap())
	.setHTML(e.features[0].properties.~~biome~~)		.setHTML(e.features[0].properties.Biome)
	.addTo(map);		.addTo(map);
	}		}

2019-10-06T08:02:20Z

← Older revision		Revision as of 10:02, 6 October 2019
Line 41:		Line 41:
	map.on("load", function() {		map.on("load", function() {
	map.setLayoutProperty('realms-labels', 'visibility', 'none');		map.setLayoutProperty('realms-labels', 'visibility', 'none');
			map.setLayoutProperty('POIs', 'visibility', 'none');

	// Create a popup, but don't add it to the map yet.		// Create a popup, but don't add it to the map yet.

2019-10-06T07:55:26Z

← Older revision		Revision as of 09:55, 6 October 2019
Line 39:		Line 39:
	map.addControl(new mapboxgl.ScaleControl());		map.addControl(new mapboxgl.ScaleControl());

	map.setLayoutProperty('realms-labels', 'visibility', 'none');		map.on("load", function() {
			map.setLayoutProperty('realms-labels', 'visibility', 'none');

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

	map.on('mousemove', 'biomes', function(e) {		map.on('mousemove', 'biomes', function(e) {
	if (e.features.length > 0) {		if (e.features.length > 0) {
	// Change the cursor style as a UI indicator.		// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = '~~pointer~~';		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();
			});

	~~// 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();~~
	~~});~~


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

2019-09-22T19:46:20Z

← Older revision		Revision as of 21:46, 22 September 2019
Line 39:		Line 39:
	map.addControl(new mapboxgl.ScaleControl());		map.addControl(new mapboxgl.ScaleControl());

			map.setLayoutProperty('realms-labels', 'visibility', 'none');

	// Create a popup, but don't add it to the map yet.		// Create a popup, but don't add it to the map yet.

2019-09-22T16:25:28Z

← Older revision		Revision as of 18:25, 22 September 2019
Line 16:		Line 16:
	a.mapbox-ctrl-logo { display: none !important; }		a.mapbox-ctrl-logo { display: none !important; }
	div.mapboxgl-ctrl-bottom-right { display: none !important; }		div.mapboxgl-ctrl-bottom-right { display: none !important; }
			div.mapboxgl-control-container button { margin: 0; }
	</style>		</style>

2019-09-22T16:22:25Z

← Older revision		Revision as of 18:22, 22 September 2019
Line 34:		Line 34:
	<!--{/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());

2019-09-22T16:08:55Z

← Older revision		Revision as of 18:08, 22 September 2019
Line 44:		Line 44:
	});		});

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

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

2019-09-22T16:07:29Z

← Older revision		Revision as of 18:07, 22 September 2019
Line 47:		Line 47:
	// Change the cursor style as a UI indicator.		// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = 'pointer';		map.getCanvas().style.cursor = 'pointer';

	~~var coordinates = e.features[0].geometry.coordinates.slice();~~
	~~console.log(coordinates);~~
	~~var description = e.features[0].properties.biome;~~

	~~// Ensure that if the map is zoomed out such that multiple~~
	~~// copies of the feature are visible, the popup appears~~
	~~// over the copy being pointed to.~~
	~~while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {~~
	~~coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;~~
	}

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