var bluedot = L.icon({
    iconUrl: '/theme/bluedot.svg',
    iconSize:     [18, 18],
    iconAnchor:   [9, 9],
    popupAnchor:  [0, -10]
});

var nfctag = L.icon({
    iconUrl: '/theme/nfclogo.svg',
    iconSize:     [20, 20],
    iconAnchor:   [10, 10],
    popupAnchor:  [0, -12]
});

const showNfcTags = L.geoJSON(nfcTags, {
    pointToLayer(feature, latlng) { return L.marker(latlng, { icon: nfctag });},
    onEachFeature
});

const map = L.map('map').fitBounds(showNfcTags.getBounds());

const tiles = 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);

showNfcTags.addTo(map);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: false, watch: true});

function onEachFeature(feature, layer) {
    let popupContent = ``;

    if (feature.properties && feature.properties.title) {
        popupContent += feature.properties.title;
    }

    layer.bindPopup(popupContent);
}

var locationMarker, locationCircle;
pageload = true;

function onLocationFound(e) {
    if (locationMarker)  { 
        map.removeLayer(locationMarker);
        map.removeLayer(locationCircle);
    }
    const radius = e.accuracy / 2;
    if ( pageload ) { 
        area = showNfcTags.getBounds();
        area.extend(e.latlng);
        map.fitBounds(area);
        //map.zoomOut(1, {animate: false});
        pageload = false;
    }
    locationMarker = L.marker(e.latlng, {icon: bluedot}).addTo(map)
    locationCircle = L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
    alert(e.message);
}

var info = L.control({position: 'topright'});
var download = L.control({position: 'bottomleft'});

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this._div.innerHTML = '<h4>' + nfcTags["title"] + '</h4>' + '<img style="display:inline; width:18px" src="/theme/nfclogo.svg" /> <span>NFC Tag Locations</span>';
    return this._div;
};

download.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this._div.innerHTML = 'Download <a href="/projects/' + nfcTags["id"] + '.gpx">GPX</a> <a href="/projects/' + nfcTags["id"] + '.kml">KML</a>';
    return this._div;
};

info.addTo(map);
download.addTo(map);