resq/templates/home.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <!-- BEGIN: Subheader -->
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">
                    Dashboard
                </h3>
            </div>
            <div>
                <span class="m-subheader__daterange" id="m_dashboard_daterangepicker">
                    <span class="m-subheader__daterange-label">
                        <span class="m-subheader__daterange-title"></span>
                        <span class="m-subheader__daterange-date m--font-brand"></span>
                    </span>
                    <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                        <i class="la la-angle-down"></i>
                    </a>
                </span>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div class="row">
            <div class="col-xl-12">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div id="m_gmap" style="height:600px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::Section-->
    </div>
{% endblock %}

{% block scripts %}
<script>

var map;
var markerLayerGroup;
var markers;

initMap();
displayMarkers();

function initMap() {
    map = L.map('m_gmap').setView([3.084216, 101.6129996], 15);

    // add tile layer
    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);

    // add marker layer group
    markerLayerGroup = L.layerGroup().addTo(map);
}

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

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

        $.each(riders, function(rider_id, point) {
            var lat = point[0];
            var long = point[1];

            // create markers
            L.marker([lat, long]).addTo(markerLayerGroup);
        });
    });
}

setInterval(displayMarkers, 60 * 1000);

</script>

{#
<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>

<script>
// BEGIN google maps stuff

var map;
var markers = [];

initMap();

function initMap() {
    map = new google.maps.Map(document.getElementById('m_gmap'),
    {
        center: {
            lat: {% trans %}default_lat{% endtrans %},
            lng: {% trans %}default_long{% endtrans %},
        },
        mapTypeId: 'roadmap',
        zoom: 13
    });

    displayMarkers();
}

function addMarker(rider_id, location) {
    var marker = new google.maps.Marker({
        position: location,
        label: { 
            text: rider_id,
            color: 'black',
            fontWeight: 'bold',
        },
        map: map
    }); 
    
    markers.push(marker);
}

function clearMarkers() {
    setMapOnAll(null);
    markers = [];
}

function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
} 

function displayMarkers() {
    $.ajax({
        url: '{{ path('rider_locations') }}',
    }).done(function(response) {
        // clear all markers
        clearMarkers();

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

        $.each(riders, function(rider_id, point) {
            var lat = point[0];
            var long = point[1];

            var location = {
                lat: lat,
                lng: long
            };

            addMarker(rider_id, location);
        });
    });
}

setInterval(displayMarkers, 60 * 1000);

// END google maps stuff
</script>

#}

{% endblock %}