How to use a variable (array of Leflet Layers) generated inside of a Event in my code later.on

Question

I have an event which after drawing a polygon on a map generate an array of Leaflet layers containing Points of Interests sitting on the polygon. This event works fine.

The point is that I would like to save this array of layers somewhere in a variable to be able to use it later on in my code. I think this is an easy issue but I am newbie with Javascript and Leaflet and not able to find out a solution. Here my code:

mymap.on('pm:create',function(e){
                    var jsn = e.layer.toGeoJSON().geometry;
                    $.ajax({
                            url:'load_data_testing_osm.php',
                            data: {id:'geojsonpol', geojsonpol:JSON.stringify(jsn)},
                            type:'POST',
                            success: function(response){
                                if (response.substring(0,5)=="ERROR"){
                                    alert(response);
                                } else {
                                    alert(response);
                                    jsnPoi = JSON.parse(response);
                                    var fromProjection = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs';
                                    var toProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";
                                    var lyrPoi = L.geoJSON(jsnPoi,{coordsToLatLng:reproject, pointToLayer:returnPoiMarkerOsm});
                                }
                            },  
                            error:function(xhr, status, error){
                                $('#divProjectAffected').html("ERROR: "+error);
                            }
                });
            });

I would like to use var lyrPoi later on in my code

Please post the actual code, not just your comments, otherwise you risk the question to get negative points — Ricardo Sanchez, Oct 15 '20 at 12:42

Falke Design · Accepted Answer · 2020-10-15T17:44:26.817

You can easy create a global variable:

var allPOIs = [];
mymap.on('pm:create',function(e){
                    var jsn = e.layer.toGeoJSON().geometry;
                    $.ajax({
                            url:'load_data_testing_osm.php',
                            data: {id:'geojsonpol', geojsonpol:JSON.stringify(jsn)},
                            type:'POST',
                            success: function(response){
                                if (response.substring(0,5)=="ERROR"){
                                    alert(response);
                                } else {
                                    alert(response);
                                    jsnPoi = JSON.parse(response);
                                    var fromProjection = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs';
                                    var toProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";
                                    var lyrPoi = L.geoJSON(jsnPoi,{coordsToLatLng:reproject, pointToLayer:returnPoiMarkerOsm});
                                    lyrPoi.getLayers().forEach((layer)=>{
                                        allPOIs.push(layer)
                                    });
                                }
                            },  
                            error:function(xhr, status, error){
                                $('#divProjectAffected').html("ERROR: "+error);
                            }
                });
            });

After the ajax call you have a filled allPOIs array with all layers.

Edit

Show layers direclty on map:

var lyrPoi = L.geoJSON(jsnPoi,{coordsToLatLng:reproject, pointToLayer:returnPoiMarkerOsm}).addTo(map);

Loop through the array and add it to the map:

allPOIs.forEach((layer)=>{
     layer.addTo(map);
});

It is no problem if the layer added twice.

Thanks for that!. How can I display the layers on the map after the ajax? — losted, Oct 15 '20 at 15:20
@albertogomeztello I updated the answer, if it is working for you, please check the answer as correct — Falke Design, Oct 15 '20 at 17:44
Both ways of showing the data works inside the event (thanks for that!) but I think it doesn't fix my problem. What I would need is to save the POIs generated with the event as a layer or as a Geojson and be able to use it in other parts of the code. Now, when I call allPOIs (console.log(allPOIs)) out of the event it doesn't show up. — losted, Oct 15 '20 at 19:28
yeah this is because `allPOIs` is empty at the time you read it out. `$.ajax.success` is a async function, this means that your complete code is executing and at the point the request is resolved and you get data from the url, the code in `success` is executed. Means: 1. polygon is created 2. the event code is executed 3. you call `$.ajax` but the `success` code is not executed, because the data is not already loaded, 4. the code after `$.ajax` is executed 5. the data from `$.ajax` is loaded and `success` is executed. Only if 5 is executed `allPOIs` is filled and you can read it out — Falke Design, Oct 15 '20 at 19:59

How to use a variable (array of Leflet Layers) generated inside of a Event in my code later.on

1 Answers1