sheub / vectortiles

function loadLocations(e=!0){var t=null;return $.ajax({async:e,global:!1,url:"https://leipzig-einkaufen.de/location.json",dataType:"json",success:function(e){t=e}}),t}$(window).on("scroll",function(){$(window).scrollTop()>220?$(".navbar").addClass("affix"):$(".navbar").removeClass("affix")});var stores2=null,bounds=[[12.179,51.227],[12.6,51.459]];mapboxgl.accessToken="pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig";var map=new mapboxgl.Map({container:"map",style:"https://leipzig-einkaufen.de/json/style-local.json",center:[12.3722,51.3272],zoom:11,hash:!1}),mapDirections=new MapboxDirections;mapDirections.accessToken="pk.eyJ1Ijoic2hldWIiLCJhIjoiWGtobTNPNCJ9.v2JwlNSGBm_KxJUKE_WLig",mapDirections.unit="metric",mapDirections.proximity=!1,mapDirections.interactive=!1,mapDirections.profile="driving",mapDirections.controls={inputs:!0,instructions:!1},map.addControl(new MapboxDirections(mapDirections),"top-left"),map.addControl(new mapboxgl.ScaleControl({maxWidth:80,unit:"metric"}));var directionControl=document.getElementsByClassName("mapboxgl-ctrl-directions");directionControl[0].hidden=!0;var ptsWithin=null,filterEl=document.getElementById("feature-filter"),listingsEl=document.getElementById("listings"),txtCategoriesEl=document.getElementById("txtCategories"),bufferedLinestring={id:"0",type:"Feature",geometry:{type:"Point",coordinates:[0,0]},properties:{}};function normalizeString(e){return e.trim().toLowerCase()}function createPopUp(e){new mapboxgl.Popup({closeOnClick:!0}).setLngLat(e.geometry.coordinates).setHTML("<h3>"+e.properties.name+"</h3><h4>"+e.properties.description+"</h4>").addTo(map)}function getUniqueFeatures(e,t){var i={};return e.filter(function(e){return!i[e.properties[t]]&&(i[e.properties[t]]=!0,!0)})}function colorLocationList(e){e.length&&e.forEach(function(e){var t=e.properties,i=document.getElementById("heading"+t.id);null!==i&&(i.getElementsByClassName("title")[0].style.color="#608BC7")})}function buildLocationList(e){if(listingsEl.innerHTML="",e.length)e.forEach(function(e){var t=e.properties,i=listingsEl.appendChild(document.createElement("div"));i.className="item card cardList",i.id=t.id;var o=i.appendChild(document.createElement("div"));o.className="card-header",o.setAttribute("role","tab"),o.setAttribute("id","heading"+i.id),o.id="heading"+i.id;var a=o.appendChild(document.createElement("h5"));a.className="mb-0";var n=a.appendChild(document.createElement("a"));n.setAttribute("data-toggle","collapse"),n.href="#collapse"+i.id,n.setAttribute("aria-expanded","false"),n.setAttribute("aria-controls","collapse"+i.id),n.className="title",n.textContent=t.name,n.title="Brief description of "+t.name,n.dataPosition=i.id;var r=i.appendChild(document.createElement("div"));if(r.className="collapse",r.setAttribute("id","collapse"+i.id),r.setAttribute("role","tabpanel"),r.setAttribute("aria-labelledby","heading"+i.id),r.setAttribute("data-parent","#listings"),t.image){var s=r.appendChild(document.createElement("img"));s.className="img-responsive img-listing lazyload",s.src=t.image,s.alt=t.name,s.title=t.name}var l=r.appendChild(document.createElement("div"));if(l.className="card-body",l.textContent=t.description,l.appendChild(document.createElement("br")),t.url){var c=l.appendChild(document.createElement("a"));c.textContent=t.name,c.href=t.url,c.target="_blank",c.title=t.name,c.rel="noopener"}n.addEventListener("click",function(){var e=stores2.features[this.dataPosition],t=document.getElementsByClassName("mapboxgl-popup");t[0]&&t[0].parentNode.removeChild(t[0]),createPopUp(e);var i=document.getElementsByClassName("is-active");i[0]&&i[0].classList.remove("is-active"),this.classList.add("is-active")})});else{var t=document.createElement("p");t.textContent="Ziehen Sie die Karte, um die Ergebnisse zu füllen",listingsEl.appendChild(t),map.setFilter("locations",["has","Categories"])}ptsWithin&&colorLocationList(ptsWithin.features)}function filterOnRoute(){var e=map.getSource("directions");if(!(e._data.features.length<2)){var t=turf.buffer(e._data.features[2].geometry,.6,{units:"kilometers"});map.getSource("bufferedTraceSource").setData(t);var i=map.queryRenderedFeatures({layers:["locations"]}),o=turf.featureCollection(i);(ptsWithin=turf.pointsWithinPolygon(o,t))&&buildLocationList(i)}}function displayDirectionControls(){var e=document.getElementsByClassName("mapboxgl-ctrl-directions");if(e[0].hidden)e[0].hidden=!1,map.setLayoutProperty("bufferedTraceLayer","visibility","visible"),map.setLayoutProperty("directions-origin-point","visibility","visible"),map.setLayoutProperty("directions-destination-point","visibility","visible"),map.setLayoutProperty("directions-origin-label","visibility","visible"),map.setLayoutProperty("directions-destination-label","visibility","visible"),map.setLayoutProperty("directions-hover-point","visibility","visible"),map.setLayoutProperty("directions-waypoint-point","visibility","visible"),map.setLayoutProperty("directions-route-line","visibility","visible"),map.setLayoutProperty("directions-route-line-alt","visibility","visible"),filterOnRoute();else{e[0].hidden=!0,ptsWithin=null,map.setLayoutProperty("bufferedTraceLayer","visibility","none"),map.setLayoutProperty("directions-origin-point","visibility","none"),map.setLayoutProperty("directions-destination-point","visibility","none"),map.setLayoutProperty("directions-origin-label","visibility","none"),map.setLayoutProperty("directions-destination-label","visibility","none"),map.setLayoutProperty("directions-hover-point","visibility","none"),map.setLayoutProperty("directions-waypoint-point","visibility","none"),map.setLayoutProperty("directions-route-line","visibility","none"),map.setLayoutProperty("directions-route-line-alt","visibility","none");var t=map.queryRenderedFeatures({layers:["locations"]});t&&buildLocationList(t)}}stores2||buildLocationList((stores2=loadLocations(!1)).features),map.on("load",function(e){map.loadImage("https://leipzig-einkaufen.de/media/diagonal-noise.png",function(e,t){if(e)throw e;map.addImage("background_pattern",t)}),map.loadImage("https://leipzig-einkaufen.de/media/Marker_with_Shadow.png",function(e,t){if(e)throw e;map.addImage("marker_z",t),map.addSource("locations_source",{type:"geojson",data:"https://leipzig-einkaufen.de/location.json"}),map.addLayer({id:"locations",type:"symbol",source:"locations_source",layout:{visibility:"visible","icon-image":"marker_z","icon-size":.9,"icon-allow-overlap":!0}})}),map.addSource("bufferedTraceSource",{type:"geojson",data:bufferedLinestring,maxzoom:13}),map.addLayer({id:"bufferedTraceLayer",type:"fill",source:"bufferedTraceSource",layout:{visibility:"visible"},paint:{"fill-color":"rgb(0,0,0)","fill-opacity":1,"fill-translate":[0,2.5],"fill-pattern":"background_pattern"}}),map.addControl(new mapboxgl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0})),map.on("click","locations",function(e){var t=e.features[0];createPopUp(t);var i=document.getElementsByClassName("is-active");i[0]&&i[0].classList.remove("is-active");var o=document.getElementById("heading"+t.properties.id);o&&o.classList.add("is-active");var a=document.getElementById("collapse"+t.properties.id);a&&$(a).collapse("show")}),map.on("moveend",function(){var e=map.queryRenderedFeatures({layers:["locations"]});e&&(buildLocationList(e),filterEl.value="")}),map.on("mousemove","locations",function(){map.getCanvas().style.cursor="pointer"}),map.on("mouseleave","locations",function(){map.getCanvas().style.cursor=""}),$(".dropdown-item").click(function(){var e=normalizeString($(this).text()),t=map.querySourceFeatures("locations_source");if("alle"!==e&&(t=t.filter(function(t){var i=normalizeString(t.properties.name),o=normalizeString(t.properties.Categories);return i.indexOf(e)>-1||o.indexOf(e)>-1})),t){var i=getUniqueFeatures(t,"Categories");buildLocationList(i),map.setFilter("locations",["in","name"].concat(i.map(function(e){return e.properties.name}))),txtCategoriesEl.value=e}})}),mapDirections.on("route",function(){filterOnRoute()}),$("#btnDisplayControls").on("click",function(){displayDirectionControls()});