0

I'm trying to load 4 markers at a time and timeout should be 5 secs for them and then new markers should come up and old one's should be hidden automatically. I have written this code and unable to proceed further. I have tried out Setinterval() and SetTimeout() but both of these don't seem to work. I actualy want to display markers and hide them on the basis of "date" which is a nested JSON Object but I don't know how to.

JSON data from an API:

   {"datapoint":[{"id":"H0031","In_time":{"date":"2017-10-24 9:41:17.783000"},"lat1":"24.55","long1":"71.75","lat2":"27.715186","long2":"83.323999"}]}
{"datapoint":[{"id":"H0032","In_time":{"date":"2017-10-25 10:41:17.783000"},"lat1":"24.55","long1":"71.75","lat2":"27.715186","long2":"83.323999"}]}
{"datapoint":[{"id":"H0033","In_time":{"date":"2017-10-26 11:41:17.783000"},"lat1":"24.55","long1":"71.75","lat2":"20.715186","long2":"89.323999"}]}
{"datapoint":[{"id":"H0034","In_time":{"date":"2017-10-27 12:41:17.783000"},"lat1":"21.55","long1":"61.75","lat2":"29.715186","long2":"81.323999"}]}
{"datapoint":[{"id":"H0035","In_time":{"date":"2017-10-28 01:41:17.783000"},"lat1":"28.55","long1":"77.75","lat2":"27.715186","long2":"83.323999"}]}

Code:

fetch('http://www.example.com/?qty=10')
        .then((response) => response.json())
        .then((response) => {
            let datapoint = response.datapoint;
            for (let i=0; i<datapoint.length; i++) {

                let hlat = parseFloat(datapoint[i]["lat1"]);
                let hlon = parseFloat(datapoint[i]["long1"]);
                let glat = parseFloat(datapoint[i]["lat2"]);
                let glon = parseFloat(datapoint[i]["long2"]);
                let markerLocation1 = new L.LatLng(hlat, hlon);
                let marker1 = new L.marker(markerLocation1,{icon: greenIcon});
                marker1.addTo(map).bindPopup(popup,customOptions);
                let markerLocation2 = new L.LatLng(glat, glon);
                let marker2 = new L.marker(markerLocation2,{icon: BlueIcon});
                marker2.addTo(map).bindPopup(popup,customOptions);
                var latlngs=[];
                let latlng1=[hlat,hlon];
                let latlng2=[glat,glon];
                var offsetX=latlng2[1]-latlng1[1];
                var offsetY=latlng2[0]-latlng1[0];
                var r=Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2)), theta = Math.atan2(offsetY,offsetX);
                var thetaoffset=(3.14/10);
                var r2 = (r/2)/(Math.cos(thetaoffset)),
                    theta2 = theta + thetaoffset;
                var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
                    midpointY = (r2 * Math.sin(theta2)) + latlng1[0];

                var midpointLatLng = [midpointY, midpointX];

                latlngs.push(latlng1, midpointLatLng, latlng2);
                var pathOne = L.curve(['M',latlng2,'Q',midpointLatLng,latlng1], {snakeArray: 5, color:'grey' ,animate: {duration: 2500, iterations: 2}}).addTo(map);

            }

        })

P.S- I have connected one marker to the corresponding one using L.curve function which generates a curved line.

1

What I have in mind is some sort of chain reaction: Add markers, hook a Listener on them and when they are removed after 5 seconds, add new markers. We will be using an Array Iterator.

// Creating an array of markers and making it iterable
var markers = [[48,16],[48,17],[48,18]].map(lat_lng => L.marker(lat_lng));
var markersIterator = markers.values();

I wrote up two helper functions and an Listener function:

function addMarkerAndTimeout(marker) {
  map.addLayer(marker);
  marker.on('remove', onLayerRemove); //Listener
  window.setTimeout(removeMarker,5000,marker); // pass mymarker as parameter to removeMarker()
}

function removeMarker(marker) {
  map.removeLayer(marker);
}


// Listener function
function onLayerRemove(e) {
  addMarkerAndTimeout(markersIterator.next().value);
}

This triggers the chain reaction:

addMarkerAndTimeout(markersIterator.next().value); // trigger chain reaction
  • Yeah but how do i iterate over the nested json object i.e date – renny Sep 1 '18 at 15:55
  • I don't really get what the In_time object is for. I mean your example shows a date in the past (i.e. year 2017). Could you paste several json objects so that we can get an idea? – Stefan Sep 1 '18 at 20:08
  • Maybe you need to look into the remove event. On remove old markers add new markers. – Stefan Sep 1 '18 at 20:34
  • added some more points – renny Sep 2 '18 at 6:10
  • Also only one marker disappears when i use the above code with my marker's name. and the curve doesn't disappear – renny Sep 2 '18 at 7:06

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.