(function($){ var currentMap={ map: null, polygon: null }; //var defMarkerIcon='/wp-content/uploads/2019/03/logo32.png'; var defMarkerIcon='/wp-content/uploads/2019/05/logo3d.png'; var isInfoOnTop=true; var horzExtent="30%"; var fullscreenControl = L.Control.extend({ options: { position: 'bottomright' //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright' }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom-fullscreen'); container.onclick = function(){ requestFullscreen($(".map_container")); } return container; }, }); $(document).ready(function(){ if($(".map_container .infobox_outer").width() == 0) isInfoOnTop=false; $(".map_container .infobox_outer .closeicon").click(closeContentBox); if($(".map_container").closest("main.main").parent("div").hasClass("col-sm-12")) horzExtent="30%"; else horzExtent="45%"; if(!L.Browser.mobile) { $(".map_container .infobox_outer").niceScroll({ railpadding: { top: 10, right: 0, left: 0, bottom: 10 }, emulatetouch: true, autohidemode: false, }); } initMap($(".map")); }); function requestFullscreen(jqEl) { var i=jqEl.get(0); if (i.requestFullscreen) { i.requestFullscreen(); } else if (i.webkitRequestFullscreen) { i.webkitRequestFullscreen(); } else if (i.mozRequestFullScreen) { i.mozRequestFullScreen(); } else if (i.msRequestFullscreen) { i.msRequestFullscreen(); } } function iconByUrl(path) { this.iconByUrl={}; if(! iconByUrl[path]) iconByUrl[path] = L.icon({ iconUrl: path, // shadowUrl: '/wp-content/uploads/2019/03/logo32_shadow.png', iconSize: [32, 30], // size of the icon // shadowSize: [20, 20], // size of the shadow iconAnchor: [16, 16], // point of the icon which will correspond to marker's location // shadowAnchor: [15, 15], // the same for the shadow popupAnchor: [0, -16] // point from which the popup should open relative to the iconAnchor }); return iconByUrl[path]; } function initMap(jqMap) { var map =initializeMap(jqMap.get(0)); var osm = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }); map.addLayer(osm); var Hydda_RoadsAndLabels = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png', { maxZoom: 18, // minZoom: 7, attribution: 'Tiles courtesy of OpenStreetMap Sweden — Map data © OpenStreetMap contributors' }); map.addLayer(Hydda_RoadsAndLabels); Hydda_RoadsAndLabels.setOpacity(0.1); map.on('zoomend', function (e) { var currentZoom = map.getZoom(); if(currentZoom < 7) { Hydda_RoadsAndLabels.setOpacity(0.1); return; } if(currentZoom < 13) { Hydda_RoadsAndLabels.setOpacity(0.3 + (currentZoom - 7)*0.1); return; } Hydda_RoadsAndLabels.setOpacity(1); }); var markers = L.markerClusterGroup({ spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: true, disableClusteringAtZoom: 14, // singleMarkerMode: true, maxClusterRadius: 40, iconCreateFunction: function(cluster) { return L.divIcon({className: 'cluster_icon',iconSize: [28, 32], html: '

' + cluster.getChildCount() + '

' }); //return iconByUrl(defMarkerIcon); }, }); /* markers.on( 'clusterclick', function ( a ) { var childMarkers=a.layer.getAllChildMarkers(); var html=""; for(var i=childMarkers.length - 1; i >=0; i--) html += childMarkers[i].properties.html + "

"; showContent(html); //a.layer.spiderfy(); }); */ /* markers.on( 'clustermouseover', function ( a ) { var childMarkers=a.layer.getAllChildMarkers(); var html=""; for(var i=childMarkers.length - 1; i >=0; i--) html += childMarkers[i].properties.html + "

"; showContent(html); }); */ var jsonMarker=jqMap.data("markers"); var geoJsonLayer = L.geoJSON(jsonMarker, { pointToLayer: function (feature, latlng) { var iconPath=(feature.properties.icon)?feature.properties.icon:defMarkerIcon; var marker = L.marker(latlng,{ icon: iconByUrl(iconPath),title: feature.properties.title }); marker.properties = { html: feature.properties.html, title: feature.properties.title, }; /* marker.on('mouseover', function (e) { showContent(this.feature.properties.html, { 'map': map,'layer' : markers.getLayers(), 'latlng': e.latlng}); }); */ marker.on('click', function (e) { showContent(this.feature.properties.html, { 'map': map,'layer' : markers.getLayers(), 'latlng': e.latlng}); }); return marker; } }); markers.addLayer(geoJsonLayer); map.addLayer(markers); map.on("click",function(a) { if(!$(a.originalEvent.srcElement).is(".leaflet-marker-icon, .clustericon_inner")) { closeContentBox(); } }); map.fitBounds(markers.getBounds()); currentMap.map = map; } function closeContentBox() { if(!isInfoOnTop) $(".map_container .infobox_outer").animate({'width': '0px', opacity: 0,}); else $(".map_container .infobox_outer").animate({'height': '0px', opacity: 0,}); $(".map_container .infobox_outer").removeClass("expanded"); } function showContent(html,nearBy=null) { html = "

" + html + "

"; if(nearBy) { var others=L.GeometryUtil.nClosestLayers(nearBy.map,nearBy.layer,nearBy.latlng,4); if(others && others.length > 1 ) { html += "

Nearby:

"; var num=others.length; for(i=0; i< num;i++) { if(others[i].distance == 0) continue; //var dist=L.GeometryUtil.readableDistance(others[i].distance, 'metric'); var dist=L.GeometryUtil.length([others[i].latlng, nearBy.latlng]); html += others[i].layer.properties.html.replace('','( ' + Math.ceil(dist / 1000) + ' km )') + "

"; } html += "

"; } } $(".map_container .infobox").html(html); $(".map_container .infobox_outer").scrollTop(0); if(!$(".map_container .infobox_outer").hasClass("expanded")) { $(".map_container .infobox_outer").addClass("expanded"); if(!isInfoOnTop) $(".map_container .infobox_outer").animate({'width': horzExtent,opacity: 1,}); else $(".map_container .infobox_outer").animate({'height': '30%',opacity: 1}); } if(!L.Browser.mobile) $(".map_container .infobox_outer").getNiceScroll().resize(); } function initializeMap(el) { var map = new L.Map(el, { attributionControl: true, dragging: false, zoomControl: true, fadeAnimation: true, markerZoomAnimation: true, zoomAnimation: true, tap: true, touchZoom: true, tapTolerance: 32, maxZoom: 16, gestureHandling: true, /* fullscreenControl: { pseudoFullscreen: false, // if true, fullscreen to page width and height title: { 'false': 'Vollbildansich', 'true': 'Vollbild beenden' } }, */ // zoom: 6, // minZoom: 6, }); map.zoomControl.setPosition('bottomright'); // map.fullscreenControl.setPosition('bottomright'); map.addControl(new fullscreenControl()); return map; } function getScreenWidth(){ if (!window) { return null; } const docElement = document.documentElement; const body = document.getElementsByTagName('body')[0]; return window.innerWidth || docElement.clientWidth || body.clientWidth; } function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; })(jQuery);