Leaflet Maps

// files/js/leafletmap.js
function initializeLeaflet() {
	// Layer definieren
	var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
		'attribution': 'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
		maxZoom: 19,
		useCache: true
	});
	var opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
		maxZoom: 17,
		attribution: 'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © <a href="https://opentopomap.org/about">OpenTopoMap</a> (CC-BY-SA)'
	});
	var satellit = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
		maxZoom: 18,
		attribution: 'Map data © <a href="https://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
	});
	
	var map = L.map('map', { 
		layers: osm, 
		tap: false,
		fullscreenControl: true,
	});
	L.control.scale({imperial:false}).addTo(map); // imperial:false zeigt nur den metrischen Maßstab

	var baseLayers = {
		"OpenStreetMap": osm,
		"OpenTopoMap": opentopo,
		"Satellit": satellit
	};
	L.control.layers(baseLayers).addTo(map);
			
	// Kartenausschnitt festlegen
	var bounds = [ [47.50013976186046,9.732603475826199], [47.513192289950354,9.757662053958269] ];
	map.fitBounds( bounds );
	// Zentriert die Marker on resize
	// map.on("resize", function(e){
		// map.fitBounds( bounds );
	// });

	// Position von Markericon, etc. festlegen -->  
	var customIcon = L.Icon.extend({
		options: {
		shadowUrl: 'files/leaflet/images/marker-shadow.png',
		iconSize:    [25, 45],
		iconAnchor:  [12, 45],
		popupAnchor: [1, -43],
		tooltipAnchor: [16, -28],
		shadowSize:  [41, 45]
		}
	})
	// eigene Marker Icons festlegen	
	var blackIcon = new customIcon({ iconUrl: 'files/theme/design/marker/marker-black.png', iconRetinaUrl: 'files/theme/design/marker/marker-black-2x.png' })
	var blueIcon = new customIcon({ iconUrl: 'files/theme/design/marker/marker-blue.png', iconRetinaUrl: 'files/theme/design/marker/marker-blue-2x.png' })
	var redIcon = new customIcon({ iconUrl: 'files/theme/design/marker/marker-red.png', iconRetinaUrl: 'files/theme/design/marker/marker-red-2x.png' })
	var orangeIcon = new customIcon({ iconUrl: 'files/theme/design/marker/marker-orange.png', iconRetinaUrl: 'files/theme/design/marker/marker-orange-2x.png' })

	// mehrere Marker mit Popup in Karte einfügen --> 
	// wenn die Marker eine url haben, steht der Link im Popup
	// wenn die Marker kein spezielles Icon zugewiesen haben, wird das StandardIcon(blau) angezeigt 
	var myMarker = [
		{
			'name': 'Seebühne Bregenz',
			'latlng': [47.50572190274721, 9.738092422485353],
			'url': 'https://bregenzerfestspiele.com',
			'icon': redIcon,
		},
		{
			'name': 'Hafen Bregenz',
			'latlng': [47.506782927165574, 9.747180506246696],
		},
		{
			'name': 'Vorarlberger Landestheater',
			'latlng': [47.5046782514231, 9.747147560119629],
			'url': 'https://landestheater.org',
			'icon': orangeIcon,
		},
	];
	
	myMarker.map( mrk => {
		let marker = L.marker( mrk.latlng, { title: mrk.name }  );
		if ( mrk.icon && mrk.icon !== '' ) {
			marker = L.marker( mrk.latlng, { title: mrk.name,icon: mrk.icon }  );
		}
		if ( mrk.url !== undefined ) {
			marker.bindPopup(mrk.name+'<br><a class="linkextern" target="_blank" href="'+mrk.url+'">'+mrk.url+'</a>');
		} else {
			marker.bindPopup(mrk);
		}
		marker.addTo( map );
	} );

	// Koordinaten Picker
	// zum Deaktivieren einfach auskommentieren
	var popup = L.popup();
	map.on("dblclick", function(e) {
	  popup
		.setLatLng(e.latlng)
		.setContent('<p class="h5">Koordinaten Picker</p><hr><p>'+e.latlng.lat+', '+e.latlng.lng+'<hr>Kann in leafletmap.js deaktiviert werden!</p>')
		.openOn(map);
	});	
}