The-Hunt/app/static/assets/leaflet/utils.js

var greenIcon = new L.Icon({
    iconUrl: '/static/assets/leaflet/images/marker-icon-2x-green.png',
    shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var goldIcon = new L.Icon({
    iconUrl: '/static/assets/leaflet/images/marker-icon-2x-gold.png',
    shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var bluePlayerIcon = new L.Icon({
    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-blue.png',
    shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var bluePlayerIconMini = new L.Icon({
    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-blue.png',
    shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
    iconSize: [10, 16.4],
    iconAnchor: [5, 16.4],
    popupAnchor: [1, -34],
    shadowSize: [16.4, 16.4]
});

var greenPlayerIcon = new L.Icon({
    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-green.png',
    shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

function addObjectiveMarker(map, objective){
    var objectiveMarker = L.marker([
        objective['latitude'],
        objective['longitude']
    ], {icon: greenIcon})
    if(objective['found']){
        objectiveMarker.setIcon(goldIcon)
    }
    objectiveMarker.addTo(map);
    
    if(objective['hash']){
        objectiveMarker.bindTooltip(`<b>${objective['name']}</b><br>
        ${objective['hash']}`).openPopup();
    } else {
        objectiveMarker.bindTooltip(`<b>${objective['name']}</b>`).openPopup();
    }
    return objectiveMarker
}

function addPlayerMarker(map, player, icon=bluePlayerIcon){
    var playerMarker = L.marker([
        player['latitude'],
        player['longitude']
    ], {icon: icon}).addTo(map);
    var timestamp_utc = moment.utc(player['timestamp_utc']).toDate()
    var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm');
    playerMarker.bindTooltip(`<b>${player['username']}</b><br>
                                ${timestamp_local}`).openPopup();
    return playerMarker
}

function getMap(){
    var map = L.map( 'map', {
        center: [52.2, 5.3],
        minZoom: 6,
        maxZoom: 18,
        bounds: [[50.5, 3.25], [54, 7.6]],
        zoom: 8
    });
    L.control.scale().addTo(map);
    
    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
    }).addTo( map );
    return map
}

var csrftoken = $('meta[name=csrf-token]').attr('content')
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    })

function pollLocations(url, requestedUsers, mode, playerLocations, responseHandler) {
    $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify({
            requested_users: requestedUsers,
            mode: mode,
            last_update: moment(get_latest_date(playerLocations)).format("YYYY-MM-DD HH:mm:ss:SSSS")
        }),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function(data){
            responseHandler(
                data.filter(item => item.latitude && item.longitude && item.timestamp_utc && item.username)
            )
        },
        error: function(error) {
            console.log(error);
        }
    });
}

function get_latest_date(playerLocations){
    return new Date(Math.max.apply(null, playerLocations.map(function(e) {
        return new Date(e.timestamp_utc);
    })));
}