ed.brz9.dev/proj/map/asset/js/map.js

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-42x56.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 marker = L.marker(hotelxy, {
  icon: markPointerIcon,
  draggable : true,
}).addTo(map);

marker.bindPopup("check");

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
}


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']]);
})

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' })
      })

    }
  })
})

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;
  }
 });