https://www.firmenauto.de/_next/static/chunks/mehrtankendetailtopchargingcities.fd2232b3a802a66c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[11708],{9327:function(e,t){"use strict";t.Z={src:"/_next/static/media/pitch-marker-2.39f7cd4f.png",height:100,width:100,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAnElEQVR42j3LMQrCQBAF0C/RSwgeykYFAyKCjY0WamFvo0WKxKCFEmxsUijoMQQLwatoXCY/O8t+ePxhhoHN6hFgfj1hcStAnDMs7w34TPM1ZrmQcYS7DXwmlzcJ/cm4+YNRVoPN+PwkIeMIveAzPG5J6OcIRfAJD03091+2sCsF5xZsemnddjcJ0YlFJQO97fTGRWC7HcWU6oPuSqmkUN11e+7uAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8}},33219:function(e,t){"use strict";t.Z={src:"/_next/static/media/pitch-marker.68ee3420.png",height:100,width:100,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAu0lEQVR42mOAg5x1PQzxq94B8Xsgu58BBWSsqrWp2/z/2KWH/49ffvTfsX7Lf4b0lU0IBYELrhy/9OA/EPwB4VNXHv1nCF5wHaHAY9aFU5fBCv6C8NmrQAVesy4jFITOmuRVvvL/pZtPfl259eSXX+XK/wwhM6fD5Y3T5ysyBE//x+A48T8YB0/7b5Q2XwUsKRs7kwVMR0/PkI2e9h+Cp2czAIEcVI6BKXwaM4hmDJywGIiXQcWYGBgYGABDnGJJWB441QAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:8}},6e4:function(e,t,n){"use strict";n.r(t);var i=n(22710),r=n(62230),o=n(85244),s=n(22386),a=n(22970),c=n(52322),u=n(74248),l=n.n(u),d=n(2784),p=n(92909),h=n(33219),f=n(9327),m=n(42713),g=n(86184),A=n(88737),x=[[-122,37],[180,85]];t.default=function(e){var t=e.cityData,n=e.apiKey,u=function(){var e=document.querySelector(".va-maincol").offsetWidth,t=window.matchMedia("(max-width: 1024px)")&&window.matchMedia("(max-width: 1024px)").matches;e!==L&&U(e),t!==J&&O(t)},v=function(){_.current.loadImage(f.Z.src,(function(e,t){e||_.current.addImage("icon-unclustered",t)})),_.current.loadImage(h.Z.src,(function(e,t){e||_.current.addImage("icon-clustered",t)}))}

1,b=function(){var e=_.current.getBounds(),t=[[e.getSouthWest().lng,e.getSouthWest().lat],[e.getNorthEast().lng,e.getNorthEast().lat]];D(t)},y=function(e){var n=e.target.value,i=t.find((function(e){return e._id===n}));D(x),H(i)},w=function(e){var t=_.current,n=t.queryRenderedFeatures(e.point,{layers:["clustered-points"]}),i=n[0].geometry.coordinates,r=n[0].properties.cluster_id;t.getSource("service-pois").getClusterExpansionZoom(r,(function(e,n){e||t.easeTo({center:i,zoom:n})}))},C=function(e){var t=_.current;try{var n=t.queryRenderedFeatures(e.point,{layers:["unclustered-points"]})[0],i=null===n||void 0===n?void 0:n.properties;if(!i)return;R((0,o.Z)((0,r.Z)({},n.properties),{address:JSON.parse(i.address),chargepoints:JSON.parse(i.chargepoints),feature:JSON.parse(i.coordinates)}))}catch(s){console.error("error in listsServiceStation MapView onClickUnclustered:",s)}},S=(0,d.useContext)(g.DT),_=(0,d.useRef)(),E=(0,d.useRef)(null),j=(0,d.useState)([]),k=j[0],N=j[1],B=(0,d.useState)(null),M=B[0],R=B[1],T=(0,d.useState)(x),I=T[0],D=T[1],P=(0,d.useState)(!1),z=P[0],Z=P[1],F=(0,d.useState)(0),L=F[0],U=F[1],W=(0,d.useState)(0),J=W[0],O=W[1],Q=(0,d.useState)(null===t||void 0===t?void 0:t[0]),Y=Q[0],H=Q[1];function V(){return(V=(0,i.Z)((function(){var e,t;return(0,a.__generator)(this,(function(n){switch(n.label){case 0:if(console.log("getPoisInBounds, isLoading:",z),z)return[2];Z(!0),n.label=1;case 1:return n.trys.push([1,3,,4]),[4,fetch(S.apiHost+"/mt/e-pois-in-bounds/",{method:"POST",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({cityName:Y.properties.NAME_3})}).then((function(e){return e.json()}))];case 2:return e=n.sent(),N({type:"FeatureCollection",features:e.map((function(e){return{type:"Feature",geometry:e.coordinates,properties:(0,r.Z)({},e)}}))}),[3,4];case 3:return t=n.sent(),console.log("error in detailTopChargingCities::getPoisInBounds",t),[3,4];case 4:return Z(!1),[2]}}))}))).apply(this,arguments)}if((0,d.useEffect)((function(){var e;null===_||void 0===_||null===(e=_.current)||void 0===e||e.resize()}),[L]),(0,d.useEffect)((function(){return u(),window.addEventListener("resize",u),function(){window.removeEventListener("resize",u)}}),[]),(0,d.useEffect)((function(){if(!(null===E||void 0===E?void 0:E.current)&&_.current){var e=_.current;e.on("click","clustered-points",w),e.on("click","unclustered-points",C),E.current=!0}}),[null===_||void 0===_?void 0:_.current]),(null===t||void 0===t?void 0:t.length)<3)return null;var X=(0,s.Z)(t,3),K=X[0],G=X[1],q=X[2];return(0,c.jsxs)("div",{className:"mb-4",children:[(0,c.jsx)(m.Headline,{headline:"Die Top 3 E-Auto St\xe4dte in Deutschland",size:"medium",useH3:!0,isDarkMode:!0}),(0,c.jsxs)(A.Text,{isDarkMode:!0,children:["Um einen \xdcberblick zu bekommen in welchen St\xe4dten in Deutschland Elektromobilit\xe4t am besten ausgebaut ist haben wir Ihnen die Top 3 zusammengestellt. Mit aktuell ",K.properties.chargingPoint.count," Lades\xe4ulen ist ",K.properties.NAME_3," f\xfchrend. ",G.properties.NAME_3," und ",q.properties.NAME_3," folgen mit ",G.properties.chargingPoint.count," und ",q.properties.chargingPoint.count," Lades\xe4ulen."]}),(0,c.jsx)("fieldset",{className:"flex space-x-2 mb-4 "+l().button,children:t.map((function(e){var t=e.properties.NAME_3;return(0,c.jsxs)("div",{className:"cursor-pointer",children:[(0,c.jsx)("input",{checked:e._id===Y._id,onChange:y,type:"radio",name:"city",id:t,value:e._id,disabled:z,className:"hidden"}),(0,c.jsx)("label",{className:"text-sm inline-flex items-center px-[1em] py-[0.6em] border border-solid border-skin-primary text-skin-primary rounded-full cursor-pointer "+l().bgColor,htmlFor:t,children:t})]},e._id)}))}),(0,c.jsxs)(p.ZP,{ref:_,mapboxAccessToken:n,initialViewState:{longitude:Y.centeredPoint[0],latitude:Y.centeredPoint[1],zoom:9},maxZoom:15,minZoom:9,style:{width:L,height:J?375:520,zIndex:1},mapStyle:"https://maps.promobil.de/styles/6eb3236c-e4e7-44cb-ad2e-093a1c7881d1/style.json",reuseMaps:!1,doubleClickZoom:!1,onLoad:function(){v(),function(){V.apply(this,arguments)}(),b()},maxBounds:I,children:[M&&(0,c.jsx)(p.GI,{longitude:M.feature.coordinates[0],latitude:M.feature.coordinates[1],anchor:"bottom",onClose:function(e){R(null)},style:{left:"0px",top:"0px",position:"absolute",fontSize:"12px"},maxWidth:"300px",pitchAlignment:"map",focusAfterOpen:!1,offset:[0,-20],children:(0,c.jsxs)("div",{children:[(0,c.jsx)("div",{children:M.name}),(0,c.jsx)("p",{children:(M.address.street?M.address.street+", ":"")+M.address.city+" "+M.address.postcode}),(0,c.jsx)("p",{children:(M.network&&"null"!==M.network?M.network+", ":"")+M.operator}),(0,c.jsxs)("div",{children:["Anschl\xfcsse:",(0,c.jsx)("ul",{children:M.chargepoints.filter(

1Boolean).map((function(e,t){return(0,c.jsx)("li",{children:e.connector+" ("+e.power+")"},"popupdata-charging-city-"+t)}))})]})]})}),(0,c.jsxs)(p.Hw,{id:"service-pois",type:"geojson",data:{type:"FeatureCollection",features:k.features||[]},cluster:!0,clusterMaxZoom:14,clusterRadius:40,children:[(0,c.jsx)(p.mh,{id:"unclustered-points",source:"service-pois",filter:["!",["has","point_count"]],type:"symbol",layout:{"icon-allow-overlap":!0,"text-allow-overlap":!0,"icon-image":"icon-unclustered","icon-size":.5,"icon-offset":[0,-27]}}),(0,c.jsx)(p.mh,{id:"clustered-points",source:"service-pois",filter:["has","point_count"],type:"symbol",layout:{"text-field":["get","point_count_abbreviated"],"text-size":8,"text-anchor":"center","text-offset":[0,-4],"icon-allow-overlap":!0,"text-allow-overlap":!0,"icon-image":"icon-clustered","icon-size":.5,"icon-offset":[0,-52]}})]})]},Y._id)]})}},74248:function(e){e.exports={"bg-color":"detailTopChargingCities_bg-color__RTvCe",bgColor:"detailTopChargingCities_bg-color__RTvCe",button:"detailTopChargingCities_button__SwBfB"}}}]);