var map = L.map('map').setView([55.68, 12.57], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

let known_store_chains;
let icons = {};

var markers =  L.featureGroup().addTo(map);

var overlayMaps = {
    "Icons": markers
};

var layerControl = L.control.layers({},overlayMaps).addTo(map);

async function fetchChains() {
    const response = await fetch("chains");
    known_store_chains = await response.json();
    icons["Unknown"] = L.icon({
        iconUrl: 'icons/Unknown.png',
        iconSize: [10, 16],
        iconAnchor: [16, 16],
    });
    for (let known_store_chain in known_store_chains) {
        icons[known_store_chain] = L.icon({
            iconUrl: `icons/${known_store_chain}.png`,
            iconAnchor: [8, 8],
        });
    }
    fetchAll()
}


function addPolygon(store) {
    let color;
    if (known_store_chains.hasOwnProperty(store.brand)) {
        color = known_store_chains[store.brand];
    } else {
        color = 'grey';
    }
    L.polygon(store.polygon, {color: color}).addTo(map);
}

function addShop(shop) {
    let icon;

    if (known_store_chains.hasOwnProperty(shop.brand)){
        icon = icons[shop.brand];
    } else {
        icon = icons["Unknown"];
    }

    L.marker([shop.lat, shop.long], {
        title: shop.name,
        icon: icon,
    }).addTo(markers);
    addPolygon(shop)
}


async function fetchAll() {
  const response = await fetch("all.json");
  const shops = await response.json();
  shops.forEach((shop) => addShop(shop));
}


async function fetch_voronoi_polygons() {
  const response = await fetch("voronoi_polygons.json");
  const voronoi_polygons = await response.json();
  voronoi_polygons.forEach((polygon) => addPolygon(polygon));
}

function update(){
    if (map.getZoom() >= 14){
        //console.log('update')
    }
}

map.on('moveend', function() {
    update()
});

fetchChains()