"use strict";const map01=new L.map("map01"),fg_shuttle=new L.FeatureGroup;document.addEventListener("alpine:init",(()=>{Alpine.data("mapData",(()=>({debug:!1,shuttle:{geofence:{long:4.4251,lat:51.9108},location:{long:null,lat:null,inside_geofence:!1,distance_to_tlc:null,distance_visible_on_map:135}},tlc:{location:{long:4.4251,lat:51.9108,radius:45}},marker_html:'\n    <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n      <g id="filled_outline" data-name="filled outline">\n        <path d="M464 424H48l-16-24v-95.228A120.771 120.771 0 01152.772 184h206.456A120.771 120.771 0 01480 304.772V400z" fill="#4799cf"/>\n        <path d="M56 304a96 96 0 0196-96h208a96 96 0 0196 96z" fill="#ebebeb"/>\n        <path d="M176 208h160v216H176z" fill="#c3c3c3"/>\n        <path d="M176 304h160v120H176z" fill="#3775a4"/>\n        <path d="M248 208h16v104h-16zM176 208h16v104h-16zM320 208h16v104h-16z" fill="#a8a8a8"/>\n        <path d="M248 320h16v104h-16z" fill="#4799cf"/><path d="M32 304h448v16H32zM360 328h16v16h-16z" fill="#3775a4"/>\n        <path d="M64 336H32v-32h32a16 16 0 0116 16 16 16 0 01-16 16z" fill="#fd9226"/>\n        <circle cx="104" cy="416" fill="#ebebeb" r="40"/><circle cx="104" cy="416" fill="#c3c3c3" r="17"/>\n          <g fill="#85bc94">\n            <path d="M298.6 109.317a56.958 56.958 0 00-80.453-4.736l-10.64-11.955a72.959 72.959 0 01103.043 6.057z"/>\n            <path d="M279.913 125.317a31.972 31.972 0 00-45.165-2.661L224.113 110.7a47.974 47.974 0 0167.755 3.982zM315.463 90.486a79.99 79.99 0 00-112.976-5.949L191.78 72.648a95.989 95.989 0 01135.572 7.131z"/><circle cx="256" cy="143" r="15"/>\n        </g>\n        <path d="M104 464a48 48 0 1148-48 48.054 48.054 0 01-48 48zm0-80a32 32 0 1032 32 32.036 32.036 0 00-32-32z" fill="#a8a8a8"/>\n        <circle cx="408" cy="416" fill="#ebebeb" r="40"/><circle cx="408" cy="416" fill="#c3c3c3" r="17"/>\n        <path d="M408 464a48 48 0 1148-48 48.054 48.054 0 01-48 48zm0-80a32 32 0 1032 32 32.036 32.036 0 00-32-32z" fill="#a8a8a8"/>\n        <path d="M450.012 213.445A127.961 127.961 0 00359.23 176H152.77A128.757 128.757 0 0024.012 303.755c0 .082-.012.162-.012.245v96a8.005 8.005 0 001.344 4.438l16 24A8 8 0 0048 432h10.752a47.99 47.99 0 0090.5 0h213.5a47.99 47.99 0 0090.5 0H464a8 8 0 006.656-3.562l16-24A8.005 8.005 0 00488 400v-95.23c0-.315 0-.619-.011-.929a127.951 127.951 0 00-37.977-90.396zM40 312h24a8 8 0 010 16H40zm64 136a32 32 0 1132-32 32.036 32.036 0 01-32 32zm64-32h-16a48 48 0 00-96 0h-3.719L40 397.578V344h24a23.992 23.992 0 0022.624-32H168zm0-120H64.36A88.12 88.12 0 01152 216h16zm80 120h-64V312h64zm0-120h-64v-80h64zm80 120h-64V312h64zm0-120h-64v-80h64zm-176-96a104.139 104.139 0 00-103.695 96h-7.96A112.765 112.765 0 01152.77 192h206.46a112.765 112.765 0 01112.425 104H463.7A104.139 104.139 0 00360 200zm295.64 96H344v-80h16a88.12 88.12 0 0187.64 80zM408 448a32 32 0 1132-32 32.036 32.036 0 01-32 32zm64-50.422L459.719 416H456a48 48 0 00-96 0h-16V312h128z"/>\n        <path d="M104 391a25 25 0 1025 25 25.028 25.028 0 00-25-25zm0 34a9 9 0 119-9 9.01 9.01 0 01-9 9zM408 391a25 25 0 1025 25 25.028 25.028 0 00-25-25zm0 34a9 9 0 119-9 9.01 9.01 0 01-9 9zM360 328h16v16h-16zM298.6 109.317l11.95-10.634a72.959 72.959 0 00-103.043-6.057l10.635 11.955a56.958 56.958 0 0180.453 4.736z"/><path d="M279.913 125.317l11.955-10.634a47.974 47.974 0 00-67.755-3.982l10.635 11.955a31.972 31.972 0 0145.165 2.661zM315.463 90.486l11.889-10.707a95.989 95.989 0 00-135.572-7.131l10.707 11.889a79.99 79.99 0 01112.976 5.949z"/>\n        <circle cx="256" cy="143" r="15"/>\n      </g>\n    </svg>',init(){this.init_map(),this.$watch("shuttle.location.inside_geofence",(value=>{this.$dispatch("shuttle-inside-geofence-changed",{shuttle_inside_geofence:value,longitude:this.shuttle.location.long,latitude:this.shuttle.location.lat,radius:this.tlc.location.radius})})),this.debug&&setTimeout((()=>{this.tlc.location.radius=45}),2e4)},init_map(){const mapbox_token="pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",mbAttr="© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",mapbox_gray=L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token="+mapbox_token,{attribution:mbAttr,tileSize:512,zoomOffset:-1}),mapbox_color=L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token="+mapbox_token,{attribution:mbAttr,tileSize:512,zoomOffset:-1}),pdok_lucht=L.tileLayer("https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_orthoHR/EPSG:3857/{z}/{x}/{y}.jpeg",{attribution:'Kaartgegevens &copy; <a href="kadaster.nl">Kadaster</a>',tileSize:512,zoomOffset:-1}),base_layers={"<span style=''>Lucht</span>":pdok_lucht,"<span style=''>Kleur</span>":mapbox_color,"<span style=''>Grijs</span>":mapbox_gray},lcontrol=new L.control.layers(base_layers,!0,{collapsed:!0,sortLayers:!0,hideSingleBase:!0});map01.setView([this.tlc.location.lat,this.tlc.location.long]),map01.setZoom(18),map01.setMinZoom(16),map01.addLayer(pdok_lucht),map01.addControl(lcontrol),lcontrol.addOverlay(fg_shuttle,"Vehicle"),map01.addLayer(fg_shuttle);L.circle([this.tlc.location.lat,this.tlc.location.long],{radius:this.tlc.location.radius}).addTo(map01);L.control.custom({position:"bottomleft",content:'\n        <div x-show="shuttle.location.distance_to_tlc != null" class="bg-gray-300 text-gray-500 rounded-md px-2 py-1">\n          distance_tlc: <span x-text="shuttle.location.distance_to_tlc > 1000 ? Math.round(shuttle.location.distance_to_tlc / 1000) : Math.round(shuttle.location.distance_to_tlc)"></span>\n          <span x-text="shuttle.location.distance_to_tlc > 1000 ? \'km\' : \'m\'"></span>\n        </div>'}).addTo(map01),map01.locate({setView:!1,watch:!0,enableHighAccuracy:!0}).on("locationfound",(e=>{const long=e.longitude.toFixed(7),lat=e.latitude.toFixed(7);if(this.shuttle.location.lat===lat&&this.shuttle.location.long===long)return;if(!this.isShuttleInsideGeofence(e.latitude,e.longitude))return this.shuttle.location.lat=null,this.shuttle.location.long=null,this.shuttle.location.inside_geofence=!1,void(this.shuttle.location.distance_to_tlc>this.shuttle.location.distance_visible_on_map?fg_shuttle.clearLayers():(this.shuttle.location.long=long,this.shuttle.location.lat=lat,this.handleShuttlePositonOnMap(e.longitude,e.latitude)));this.shuttle.location.long=long,this.shuttle.location.lat=lat,this.shuttle.location.inside_geofence=!0,this.handleShuttlePositonOnMap(e.longitude,e.latitude),this.storeShuttlePosition(e.longitude,e.latitude)})).on("locationerror",(error=>{}))},toRad:value=>value*Math.PI/180,isShuttleInsideGeofence(lat,lon){const dLat=this.toRad(lat-this.shuttle.geofence.lat),dLon=this.toRad(lon-this.shuttle.geofence.long),lat1=this.toRad(this.shuttle.geofence.lat),lat2=this.toRad(lat),a=Math.sin(dLat/2)*Math.sin(dLat/2)+Math.sin(dLon/2)*Math.sin(dLon/2)*Math.cos(lat1)*Math.cos(lat2),c=2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)),d=Math.round(6371*c*1e3);return this.shuttle.location.distance_to_tlc=d,d<this.tlc.location.radius},handleShuttlePositonOnMap(long,lat){map01.hasLayer(fg_shuttle)&&fg_shuttle.clearLayers();L.marker([lat,long],{icon:new L.divIcon({className:"some_class",iconSize:[40,40],iconAnchor:[20,40],html:this.marker_html})}).addTo(fg_shuttle)},storeShuttlePosition(long,lat){const url_full=new URL("/api/shuttle/update-position","https://zgwnz2cs55.execute-api.eu-central-1.amazonaws.com"),payload={longitude:long,latitude:lat,dt:dayjs().format()};fetch(url_full,{method:"PATCH",body:JSON.stringify(payload),headers:{"Content-Type":"application/json"}}).then((response=>{if(200===response.status)return response.json()})).then((data=>{})).catch((error=>{console.error("Error:",error)}))}})))}));