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

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

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

var goldPlayerIcon = new L.Icon({
    iconUrl: '/static/assets/leaflet/images/person-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 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]
});

function addObjectiveMarker(map, objective, icon=greenIcon){
    var objectiveMarker = L.marker([
        objective['latitude'],
        objective['longitude']
    ], {icon: icon})
    if(objective['found']){
        objectiveMarker.setIcon(goldIcon)
    }
    objectiveMarker.addTo(map);
    
    if(objective['hash']){
        objectiveMarker.bindTooltip(`<b>${objective['name']}</b><br>
        ${objective['hash']}`).openPopup();
        objectiveMarker.hash = objective['hash'];
    } 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_local = toMomentLocal(player['timestamp_utc']).format('YYYY-MM-DD HH:mm')
    playerMarker.bindTooltip(`<b>${player['username']}</b><br>
                                ${timestamp_local}`).openPopup();
    playerMarker.username = player['username'];
    return playerMarker;
}

function toMomentLocal(timestamp_utc_string){
    var timestamp_utc = moment.utc(timestamp_utc_string).toDate();
    return moment(timestamp_utc).local();
}

var myLocationMarker
function updateMyLocation(position){
    if(myLocationMarker == undefined){
        myLocationMarker = L.marker([
            position.coords.latitude, 
            position.coords.longitude
        ], {icon: bluePlayerIcon}).addTo(map)
        myLocationMarker.bindTooltip('Your current location').openPopup();
    }
    else{
        var newLocation = new L.LatLng(
            position.coords.latitude, 
            position.coords.longitude
        );
        myLocationMarker.setLatLng(newLocation); 
    }
}

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);
    
    //pioneer,atlas,neighbourhood,transport
    L.tileLayer( 'https://tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=df457ee6c2dd4b6e99b24c853421a1db', {
        attribution: 'Kaartgegevens &copy; <a href="https://www.thunderforest.com">Thunderforest</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){
    if (playerLocations.length == 0){
        return new Date('0001-01-01T00:00:00Z');
    }
    return new Date(Math.max.apply(null, playerLocations.map(function(e) {
        return new Date(e.timestamp_utc);
    })));
}