I'm attempting to implement a mapping functionality into my Laravel app, using Leaflet. For doing that, I've been analyzing, line by line, how it works the code of an existing example project, with such functionality:
https://github.com/nafiesl/laravel-leaflet-example
This project implements in its code, the basic usage of the tools I just need for my app: making a simple CRUD in the database of geographical data, using a map for handle it. After updating some modules used by that project (which were pretty outdated), I could achieve to run it locally in my computer (using PHP 8.2/Laravel 10).
After reading the Leaflet documentation, and analyzing a lot the code of this project (often using the browser console to debug), I've begun to understand the way Leaflet works, and the way it handle objects (such as GeoJSONs and Layers). I've been editing parts the original code for debugging purposes, such as its indentation, adding some variables for storing results of some processes, and also adding lots of 'console.log's, used for looking through the browser console, the kind of data that Leaflet handles (often using those mentioned variables into them).
Despite I've been understanding in general terms, until now, how the code I have works, there's something in it which really puzzles me, and I'm stuck on it while analyzing the code. Since the code has many levels of nested content (such as functions and objects), I will describe here just the code parts which are mainly relevant to my issue:
The code I have in my main Blade view, makes a GET request to the own API of the project (using Axios), for getting a GeoJSON object, with the geographical information needed to generate a layer. This GeoJSON object is generated and returned by the API, from data stored in our database. Currently, our GeoJSON object only consist in a "FeatureCollection". This is an object containing an array called "features". Each item of this array is a "Feature" object. Every "Feature" object here, contains some properties (such as a name,an address and timestamps), and a geometry, which define its geographical information. At the moment, we only have "Features" with a "Point" geometry type, with only a pair of coordinates numbers (latitude and longitude), associated to each one.
Using the GeoJSON object obtained by the request (if successful), the code makes a call to the 'L.geoJSON' method. These it's used for generating a Layer-type object (in this case, of markers), with the geographical information contained into the GeoJSON object. The 'L.geoJSON' method takes two arguments: the first one being the whole GeoJSON object, which will be parsed, and the second one being an object, containing the options to generate the Layer-type object (this second argument is optional, but it's used here).
The method 'pointToLayer' is defined here as an attribute, into the options object passed as second argument to 'L.geoJSON'. This method runs as many times as the number of items that the 'features' array, in the GeoJSON object, has in it. Each time this method runs, it handles a different "Feature" object contained in that array (every existing "Feature" will be handled here once). This method receives two arguments. The first one is 'geoJsonPoint', which will contain the entire "Feature" object, handled at the time that method is running. The second one is 'latlng', which will contain a plain object with just two attributes: 'lat' and 'lng'. These attributes will just adopt the values of the coordinates (latitude and longitude) of the "Point" geometry, defined into the currently handled "Feature", with a Number type. So, the object recieved in 'latlng' won't contain any information of a "Feature" but the coordinates of its "Point" geometry.
Then, into the 'pointToLayer' method, there's a call to 'L.marker', with only one argument passed to it: the 'latlng' object, received as argument by 'pointToLayer'. In the original code, the 'L.marker' method was chained to 'bindPopup', and included directly into the 'return' statement of 'pointToLayer' function. In my edited code, I'm storing the value returned just by 'L.marker' (without chaining) into a variable 'prueba', above the 'return' statement. This returned value is a Layer-type object.
The issue is this one:
When I look at the content of that variable 'prueba', printed by a 'console.log', I can see that I'm having a lot of information loaded here, into a Layer-type object. That information is correspondent to all the processed "Feature" properties (such as name and address, among others), and not only to its "Point" geometry coordinates (consisting in just two numbers).
My doubt is: Since I'm only passing to the 'L.marker' method, the object 'latlng' (containing just two coordinate numbers and nothing else) when assigning the value to 'prueba', where's the object contained in 'prueba' (after the assignment), getting from the information of those "Feature" properties?
Despite this isn't an unwanted behaviour (I want that properties information into my Layer), at this moment I'm just trying to understand how Leaflet works (for using it in my project). So, I'd like to understand what's going on here. I think this might be an issue not only for Leaflet, but for JavaScript in general.
When trying to print the result of a 'L.marker' call with the same parameter, directly within a 'console.log' (without previously storing it result in a variable), I'm also obtaining a Layer-type object. But in this case, just with the coordinates information, and not the "Feature" object properties (I try this just after printing the 'prueba' value). So, there must be something happening in the middle, while storing the value returned by 'L.marker', that I'm not able to see properly.
I'm here posting the most relevant code (located into <script> tags in my Blade view), with comments at the most relevant lines for the issue:
var map = L.map('mapid')
.setView(
[{{ config('leaflet.map_center_latitude') }},{{ config('leaflet.map_center_longitude') }}],
{{ config('leaflet.zoom_level') }}
);
//We're storing this result, just for debugging.
var tile = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
).addTo(map);
//This is a method from an external plugin, imported above in the document (not shown here).
var markers = L.markerClusterGroup();
//Here we make a call to the API, which return us a GeoJSON object if successful.
axios.get('{{ route('api.outlets.index') }}')
.then(
function (response) {
var marker =
L.geoJSON(
//'response.data' contains the entire GeoJSON object.
response.data,
{
pointToLayer:
function(geoJsonPoint, latlng) {
//'geoJsonPoint' contains an entire Feature of the GeoJSON object,
//while 'latlng', just contains the coordinates of its "Point" type geometry.
console.log(geoJsonPoint);
console.log(latlng);
//HERE'S THE ISSUE:
var prueba=L.marker(latlng); //We use this variable 'prueba' for debugging.
console.log("L.marker:");
console.log(prueba);
console.log(L.marker(latlng));
return prueba //Here, we had 'L.marker(latlng)' before, instead of 'prueba'.
.bindPopup(
function (layer) {
console.log("layer:");
console.log(layer);
return layer.feature.properties.map_popup_content;
}
);
}
}
);
console.log("Contenido de marker y markers:");
console.log(marker);
markers.addLayer(marker);
console.log(markers);
}
)
.catch(function (error) {
console.log(error);
});
map.addLayer(markers);
@can('create', new App\Outlet)
var theMarker;
map.on('click', function onClick(e) {
console.log("Contenido de Map y tile:");
console.log(map);
console.log(tile);
console.log(e);
let latitude = e.latlng.lat.toString().substring(0, 15);
let longitude = e.latlng.lng.toString().substring(0, 15);
if (theMarker != undefined) {
map.removeLayer(theMarker);
};
var popupContent = "Your location : " + latitude + ", " + longitude + ".";
popupContent += '<br><a href="{{ route('outlets.create') }}?latitude=' + latitude + '&longitude=' + longitude + '">Add new outlet here</a>';
theMarker = L.marker([latitude, longitude]).addTo(map);
theMarker.bindPopup(popupContent)
.openPopup();
});
@endcan
The whole GeoJSON object, returned by the API, is this one:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": 1,
"name": "Prueba",
"address": "Casa de Lean",
"latitude": "-3.330076616628",
"longitude": "114.65040206909",
"creator_id": 1,
"created_at": "2023-03-15T00:49:43.000000Z",
"updated_at": "2023-03-15T00:49:43.000000Z",
"coordinate": "-3.330076616628, 114.65040206909",
"map_popup_content": "<div class=\"my-2\"><strong>Outlet Name:</strong><br><a href=\"http://localhost:8000/outlets/1\" title=\"View Prueba Outlet detail\">Prueba</a></div><div class=\"my-2\"><strong>Coordinate:</strong><br>-3.330076616628, 114.65040206909</div>"
},
"geometry": {
"type": "Point",
"coordinates": [
"114.65040206909",
"-3.330076616628"
]
}
},
{
"type": "Feature",
"properties": {
"id": 2,
"name": "Casa de Gaby",
"address": "Liniers 557, Lomas del Mirador",
"latitude": "-34.66036884245",
"longitude": "-58.52985620498",
"creator_id": 1,
"created_at": "2023-03-15T02:14:02.000000Z",
"updated_at": "2023-03-15T02:29:23.000000Z",
"coordinate": "-34.66036884245, -58.52985620498",
"map_popup_content": "<div class=\"my-2\"><strong>Outlet Name:</strong><br><a href=\"http://localhost:8000/outlets/2\" title=\"View Casa de Gaby Outlet detail\">Casa de Gaby</a></div><div class=\"my-2\"><strong>Coordinate:</strong><br>-34.66036884245, -58.52985620498</div>"
},
"geometry": {
"type": "Point",
"coordinates": [
"-58.52985620498",
"-34.66036884245"
]
}
}
]
}
Finally, the output obtained in my browser console, correspondent to the 'console.log's prints of 'prueba' and 'L.marker' method (located into the 'pointToLayer' defined function, highlighted with "HERE'S THE ISSUE" comment), is this one (in lines 198 and 199 of the client-side code, read by the browser):
Since our GeoJSON object, has currently two features, the method 'pointToLayer' runs twice, and so does those 'console.log's. Here, we're showing just the result of just one execution of both 'console.log's.
Additionaly, I'll share the result of the 'console.log's showing the values of the 'geoJsonPoint' and 'latlng' arguments into the 'pointToLayer' method (located a few lines above the other ones, lines 182 and 188 in the client-side code):
Does anyone have an idea of what's happening here? If there's more information needed, or something in the question that isn't clear, please tell me.
Thanks a lot!
Leandro
