Test:Manual-GeoJson-Display

Aus SpaceOnEarth
Version vom 4. April 2022, 15:35 Uhr von Axel (Diskussion | Beiträge) (1 Version importiert)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

Load CSS: /images/m-dir/Test/Manual-GeoJson-Display/leaflet.css
Load JS:/images/m-dir/Test/Manual-GeoJson-Display/leaflet.js
Load JS:/images/m-dir/Test/Manual-GeoJson-Display/sample-geojson.js
Add JS:
function mOnload() {
var map = L.map('map').setView([39.74739, -105], 13);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data © OpenStreetMap contributors, ' +
			'CC-BY-SA, ' +
			'Imagery © Mapbox',
		id: 'mapbox/light-v9'
	}).addTo(map);

	var baseballIcon = L.icon({
		iconUrl: '/images/m-dir/Test/Manual-GeoJson-Display/baseball-marker.png',
		iconSize: [32, 37],
		iconAnchor: [16, 37],
		popupAnchor: [0, -28]
	});

	function onEachFeature(feature, layer) {
		var popupContent = "

I started out as a Hoxel GeoJSON " + feature.geometry.type + ", but now I'm a Leaflet vector!

"; if (feature.properties && feature.properties.popupContent) { popupContent += feature.properties.popupContent; } layer.bindPopup(popupContent); } L.geoJSON([bicycleRental, campus], { style: function (feature) { return feature.properties && feature.properties.style; }, onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); } }).addTo(map); L.geoJSON(freeBus, { filter: function (feature, layer) { if (feature.properties) { // If the property "underConstruction" exists and is true, return false (don't render features under construction) return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true; } return false; }, onEachFeature: onEachFeature }).addTo(map); var coorsLayer = L.geoJSON(coorsField, { pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: baseballIcon}); }, onEachFeature: onEachFeature }).addTo(map); } window.onload=mOnload;
x