resq/templates/map/initOpenStreetMap.js

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin="">
</script>

<script>

var rider_markers = {};
var cust_markers = {};

function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url, cust_popup_url) {
    var map = L.map(div_id).setView(
        [center_lat, center_lng],
        zoom
    );

    // add tile layer
    // TODO: put access token in .env
    var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
    }).addTo(map);

    // layer groups
    // .addTo(map) --> this will display your riders by default
    var lg_avail_rider = L.layerGroup().addTo(map);
    var lg_jo_rider = L.layerGroup().addTo(map);
    var lg_cust = L.layerGroup().addTo(map);

    // this little snippet will not display your riders by default.
    // Instead, a toggle button will display in the map, with a checkbox with text Riders.
    // Check that to display the riders
    //var ridersLayerGroup = L.layerGroup();

    // create icons
    var icon_rider_active_jo = L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    });
    var icon_rider_available = L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    });
    var icon_customer = L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    });

    $.ajax({
        url: '{{ path('rider_locations') }}',
    }).done(function(response) {
        // clear all markers
        lg_avail_rider.clearLayers();
        lg_jo_rider.clearLayers();
        lg_cust.clearLayers();

        // get riders and mark
        var riders = response.riders;

        $.each(riders, function(rider_id, rider_data) {
            // rider location
            var point = rider_data['loc'];
            var lat = point[0];
            var long = point[1];

            // customer location
            var cloc = rider_data['cust_loc'];
            var clat = cloc[0];
            var clong = cloc[1];

            // rider popup content
            rider_popup = '<strong>' + rider_data['label'] + '</strong>';

            // create rider markers
            if (rider_data['has_jo']) {
                var jo_data = rider_data['jo'];

                // rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
                rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup('Loading...');
                // var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
                cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
                lg_cust.addLayer(cust_markers[jo_data['id']]);
                lg_jo_rider.addLayer(rider_markers[rider_id]);

                // customer popup ajax
                cust_markers[jo_data['id']].on('click', function(e) {
                    var popup = e.target.getPopup();
                    var url = cust_popup_url.replace('[id]', jo_data['id']);
                    console.log(url);
                    $.get(url).done(function(data) {
                        popup.setContent(data);
                        popup.update();
                    });
                });
            } else {
                // rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
                rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup('Loading...');
                lg_avail_rider.addLayer(rider_markers[rider_id]);
            }

            // ajax loading of rider popup
            rider_markers[rider_id].on('click', function(e) {
                var popup = e.target.getPopup();
                var url = rider_popup_url.replace('[id]', rider_id);
                console.log(url);
                $.get(url).done(function(data) {
                    popup.setContent(data);
                    popup.update();
                });
            });
        });

        // console.log(rider_markers);
    });

    // base layer
    var baseMaps = {
        'Streets': streets
    };

    // overlay layer
    var overlayMaps = {
        'Available Riders' : lg_avail_rider,
        'JO Riders' : lg_jo_rider,
        'Customers' : lg_cust 
    }
    
    L.control.layers(baseMaps, overlayMaps).addTo(map);

    return map;
}

initMap();

</script>