1

I am facing some problem where the markers is not being updated when the values in the database changes(i am using a stored procedure which get the latest location based on the timestamp).

Leaflet geolocate example

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
<link rel="stylesheet" href="styles.css">

<script language="javascript">
    var markers = [];
    var createdA = false;
    var shownA = false;
    var markersA = [];
    var markersA = [];
    var a1;
    var a2;
    var a5;
    var data1 = [];
    var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();

    function init() {

        map = new L.Map('test_map').setView(new L.LatLng(center.x, center.y), 12);;
        var basemap = L.tileLayer('https://maps- 
      {s}.onemap.sg/v3/Original/{z}/{x}/{y}.png', {
            attribution: '<img src="https://docs.onemap.sg/maps/images/oneMap64- 
     01.png" style="height:20px;width:20px;"/> New OneMap | Map data © contributors, 
     <a href="http://SLA.gov.sg">Singapore Land Authority</a>',
            detectRetina: true,
            maxZoom: 20,
            minZoom: 9
        });
        basemap.addTo(map);

        $.ajax({

            type: "GET",

            url: '',


            success: function (data, status, xhr) {


                for (var i = 0; i < data.Table.length; i++) {
                    for (var s = 1; s < data.Table.length; s++) {
                        var d1 = { Table: { Latitude: data.Table[i].Latitude, 
     Longitude: data.Table[i].Longitude, Station: 'This is Littleton, CO.', Box: 
     'Box', LocationSend: 'testing1' } };
                        var d2 = { Table: { Latitude: data.Table[s].Latitude, 
     Longitude: data.Table[s].Longitude, Station: 'This is Denver, CO.', Box: 'Box', 
     LocationSend: 'testing2' } };
                        data1.push(d1);
                        data1.push(d2);


                        markersA.push(L.marker(new L.LatLng(data.Table[i].Latitude, 
    data.Table[i].Longitude)));
                        markersA.push(L.marker(new L.LatLng(data.Table[s].Latitude, 
    data.Table[s].Longitude)));
                        map.addLayer(markersA[0]);
                        map.addLayer(markersA[1]);
                    }




                }


            },


            error: function (xhr) {

                alert(xhr.responseText);

            }

        });

        var myTimer = setInterval(function () {


            groupOne(data1);

        }, 2000);

    }
    function pushMarker(marker) {
        markers.push(marker);
    }
    function createMarker(data1) {
        var marker = new L.marker([data1[0], data1[1]]);
        pushMarker(marker);

    }
    function showMarker(marker) {

        map.addLayer(marker);
    }
    function hideMarker(marker, i) {

        var locate = marker.getLatLng();

        markersA[i].setLatLng(locate);


    }
    function createMarkerA(data1) {
        var valid = true;
        for (var i = 0; i < data1.length; i++) {

            var customPopup = 'Coordinates X: ' + data1[i].Table.Latitude + 
     '</br>Coordinates Z: ' + data1[i].Table.Longitude + '</br>Station: ' + 
     data1[i].Table.Station + ' </br> Box: ' + data1[i].Table.Box + '</br > 
     Timestamp: ' + data1[i].Table.LocationSend;

            //var customOptions =
            //            {
            //                'maxWidth': '500',
            //                'className': 'custom'
            //            };
            //var marker = L.marker(new L.LatLng(data[i].Table.Latitude, 
      data[i].Table.Longitude, data[i].Table.Station));
            var marker = L.marker(new L.LatLng(data1[i].Table.Latitude, 
      data1[i].Table.Longitude));
            marker.bindPopup(customPopup);
            pushMarker(marker);


        }

    }


    function groupOne(data) {

        //$.ajax({
        //    type: "GET",
        //    url: '',
        //    data:data,
        //    success: function (data, status, xhr) {



        if (createdA == false) {
            createMarkerA(data);

            shownA = true;
            createdA = true;

        }
        else if (shownA == false) {

            for (var a = 0; a <= 2; a++) {
                hideMarker(markers[a], a);

            }
            shownA = true;

        }
        else if (shownA == true) {

            for (var aa = 3; aa <= 5; aa++) {
                var i = aa - 3;
                hideMarker(markers[aa], i);

            }
            shownA = false;

        }




        //}
        //,
        //error: function (xhr) {

        //    alert(xhr.responseText);

        //}
        //});

    }
</script>

 </head>
 <body onLoad="javascript:init();">
<div id='test_map' style=" height: 800px; "></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.