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

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

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
}