var hotelxy=[-19.8,47.5] var maxZoomLevel = 6 var tileSize = 256 var maxLenght = Math.pow(2, maxZoomLevel) * tileSize var mapNE = [maxLenght, 0] var mapSW = [0, maxLenght] var map = L.map('map', { attributionControl: false, zoomControl: false, }).setView(hotelxy,1); L.control.zoom({ position: 'bottomright' }).addTo(map); L.tileLayer('asset/tiles/{z}/{x}/{y}.png', { minZoom: 1, maxZoom: maxZoomLevel, continuousWorld: false, noWrap: true, crs: L.CRS.Simple, }).addTo(map); map.setMaxBounds(new L.LatLngBounds( map.unproject(mapSW, map.getMaxZoom()), map.unproject(mapNE, map.getMaxZoom()) )) var markPointerIcon = L.icon({ iconUrl: 'asset/markers/pointer.png', iconSize: [22, 32], iconAnchor: [11, 32], popupAnchor: [0, -38], }); var markRestoIcon = L.icon({ iconUrl: 'asset/markers/resto-32x41.png', iconSize: [41, 32], iconAnchor: [20.5, 32], popupAnchor: [0, -38], }); var markParkingIcon = L.icon({ iconUrl: 'asset/markers/parking-32x27.png', iconSize: [27, 32], iconAnchor: [13.5, 32], popupAnchor: [0, -38], }); var markTrainIcon = L.icon({ iconUrl: 'asset/markers/train-40x34.png', iconSize: [34, 40], iconAnchor: [17, 40], popupAnchor: [0, -38], }); var markoTrainIcon = L.icon({ iconUrl: 'asset/markers/train-32x27.png', iconSize: [27, 32], iconAnchor: [13.5, 32], popupAnchor: [0, -38], }); var marker = L.marker(hotelxy, { icon: markPointerIcon, draggable : false, }).addTo(map); marker.bindPopup("Hôtel Molière"); marker.on('click', function(e) { console.log(marker.getLatLng()) }) var layzl1 = L.layerGroup() var layzl2 = L.layerGroup() var layzl3 = L.layerGroup() var layzl4 = L.layerGroup() var layzl5 = L.layerGroup() var layzl6 = L.layerGroup() let layzls = [null,null,layzl2,layzl3,layzl4,layzl5,layzl6] var layResto = L.layerGroup() var layParking = L.layerGroup() let resto = jdb.data.db.resto.sub function removeLs(list) { for (i in list){ map.removeLayer(list[i]) } } function addLs(list) { for (i in list) { list[i].addTo(map) } } function iToZL(i) { return lay } train = L.marker([-7.71,23.95], { icon: markTrainIcon, }).addTo(layzl2) let parking = jdb.data.db.parking.sub Object.entries(parking).forEach(p => { p[1]['marker'] = L.marker(p[1]['xy'], { icon: markParkingIcon, }).addTo(layzls[p[1]['minz']]); p[1]['marker'].on('click', function(e) { jdb.data.db.parking.isActive = true p[1]['isActive'] = true let target = document.getElementById(p[1]['id']) target.scrollIntoView({ behavior: 'smooth' }) }) }) layParking.addTo(map) /* Object.entries(resto).forEach(item => { Object.entries(item[1]['sub']).forEach(r => { if (typeof r[1]['xy'] !== "undefined") { r[1]['marker'] = L.marker(r[1]['xy'], { icon: markRestoIcon, }).addTo(layzls[r[1]['minz']]); r[1]['marker'].bindPopup(r[1]['name']) r[1]['marker'].on('click', function(e) { jdb.data.db.resto.isActive = true item[1]['isActive'] = true let target = document.getElementById(r[1]['id']) target.scrollIntoView({ behavior: 'smooth' }) }) } }) }) */ Object.entries(resto).forEach(r => { if (typeof r[1]['xy'] !== "undefined") { r[1]['marker'] = L.marker(r[1]['xy'], { icon: markRestoIcon, }).addTo(layzls[r[1]['minz']]); r[1]['marker'].bindPopup(r[1]['name']) r[1]['marker'].on('click', function(e) { jdb.data.db.resto.isActive = true r[1]['isActive'] = true let target = document.getElementById(r[1]['id']) target.scrollIntoView({ behavior: 'smooth' }) }) } }) layResto.addTo(map) /* min/max = 163 map.setView([-163,-163],2) */ map.on('zoomend', function() { let z = map.getZoom(); switch(z) { case 1: addLs([layzl1]) removeLs([ layzl2, layzl3, layzl4, layzl5, layzl6 ]) break; case 2: addLs([ layzl1, layzl2 ]) removeLs([ layzl3, layzl4, layzl5, layzl6 ]) break; case 3: addLs([ layzl1, layzl2, layzl3 ]) removeLs([ layzl4, layzl5, layzl6 ]) break; case 4: addLs([ layzl1, layzl2, layzl3, layzl4 ]) removeLs([ layzl5, layzl6 ]) break; case 5: addLs([ layzl1, layzl2, layzl3, layzl4, layzl5 ]) removeLs([ layzl6 ]) break; case 6: addLs([ layzl1, layzl2, layzl3, layzl4, layzl5, layzl6 ]) break; } });