[GIS] How to access array inside of Leaflet LayerControl

leaflet

When you make a Leaflet LayerControl you first make an array of markers, then pass the array to the LayerControl constructor and add the LayerControl to the map, like this:

myLayerGroup = L.layerGroup(arMarker).addTo(map);

However, I want the markers in the Layer Group to change when the user pans the map. I have coded the appropriate event handler, like this:

map.on('dragend',this.onDragEnd);

I then pass the new extent of the map to the server side via Ajax, query the database and get back the markers that are within the new extent.

What I want to do next is add the new markers and delete the old markers that are not within the new extent. But in order to do that I have to access the array that I passed to the LayerControl. I don't want to just delete all the current markers and add the new markers because many of the new markers will also be the current markers.

Is there a way to access that array within the LayerControl, or do I just have to delete the LayerControl and start again?

Best Answer

But in order to do that I have to access the array that I passed to the LayerControl.

No, you don't. Just use the addOverlay and removeLayer methods of L.Control.Layer. Keep an external reference to the layers added to the control if you need.

Related Solutions

[GIS] How to open overlay content from leaflet popup

Since the popup content is dynamic, you need a map.on listener for the popupopen event. This will bind the overlay to the image in the popup:

$(document).ready(function () {
    $("img[rel]").overlay();
    $('#test1').fadeOut();

    var map = L.map('map').setView([-41.2858, 174.78682], 14);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + mapLink,
        maxZoom: 18,
    }).addTo(map);
    var marker = L.marker([-41.29042, 174.78219])
        .bindPopup('<img src="http://tinyurl.com/pb9esy2" rel="#test1" alt="" width="100px"/>')
        .addTo(map);

    map.on('popupopen', function () {
        $("img[rel]").overlay();
    });
});

Request #2

function onPopupOpen() {

    var tempMarker = this;

    var ll = tempMarker.getLatLng();
    $('#latitude').val(ll.lat);
    $('#longitude').val(ll.lng);

    // To remove marker on click of delete button in the popup of marker
    $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });

}

[GIS] leaflet-routing-machine add waypoints, routing summary

I can answer the 2nd part of your question, the first one has me a little tied up now too I'll edit if no one answers when I get my head around it. So for 2) just use something in the line of

routeControl._routes[0].summary.totalDistance

See if this works, also _routes[0] represents your choice for example if you have another routing option for which you want to find out the distance _routes[1] is your answer...integrate this into a function and there it is.

Edit: Regarding your first problem starting without a route just call the following:

L.routing.control.({
    waypoints: [null
    ]
  })

And assuming you want to add new waypoints

L.routing.control.setWaypoints([
    L.latLng(lat1, lon1),
    L.latLng(lat2, lon2)
  ]);

This syntax is very weird indeed but pop open a code inspector and you'll get the hang of it.

Related Question