Retour à la vue d'ensemble

viewof map = { let w = Math.min(800, width) - 30, h = 0.9 * w let container = html`

` let resolve container.value = new Promise(_ => resolve = _) yield container const map = new maplibregl.Map({ container, bounds: voirieAutresToulouse.bbox, zoom: 11, bearing: 0, maplibreLogo: true, style: "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/attenue.json", //style: "https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json", //style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", locale: { 'FullscreenControl.Enter': 'Mode plein écran', 'FullscreenControl.Exit': 'Sortie du mode plein écran', 'GeolocateControl.FindMyLocation': 'Localisez-moi', 'GeolocateControl.LocationNotAvailable': 'Localisation non disponible', 'NavigationControl.ZoomIn': 'Zoom +', 'NavigationControl.ZoomOut': 'Zoom -' }, fitBoundsOptions: { padding: 10 }, }) map.on("load", function () { categs.forEach(d => { map.addSource(d.layerName, { type: "geojson", data: d.layer }) }); (viewof cat).value = [categs[0]]; (viewof cat).dispatchEvent(new Event("input", {bubbles: true})); map.addControl(new maplibregl.NavigationControl()) //map.addControl(new maplibregl.FullscreenControl(), 'top-left') map.addControl( new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, fitBoundsOptions: { maxZoom: 12 }, showAccuracyCircle: false, showUserLocation: true }), 'top-right' ); }) map.dragRotate.disable() map.touchZoomRotate.disableRotation() const homeControl = { onAdd: (map) => { const homeContainer = document.createElement('div') homeContainer.className = 'maplibregl-ctrl maplibregl-ctrl-group' homeContainer.addEventListener('contextmenu', e => e.preventDefault()) homeContainer.addEventListener('click', e => map.fitBounds(voirieAutresToulouse.bbox, { padding: 10 })) homeContainer.innerHTML = '

' + '' + '

'; return homeContainer }, } map.addControl(homeControl, 'top-left') resolve(map) invalidation.then(() => map.remove()) }