Leaflet Tutorial 5: Add GeoJSON using JavaScript

[@micahglenz1354]

Thanks for pointing out how the coords are reverse. Saved me a lot of time

[@FatimaHABIB-jm4ji]

Thanks for sharing, I have question, i have large GEOJSON file and i want to add information to a map dynamically as the user zooms in, how can I do that ?

[@JeffreyKluitenberg]

Great short video! I've succesful added GeoJSON data in my map. But how can I change the default marker to a custom marker for the GeoJSON data?

[@sabafatima1719]

You can use this sample of code as reference:
var myLines =
{
"type": "Feature",
"geometry": {"type": "LineString","coordinates": [[51.50, -0.08], [51.51, -0.06],[51.52, -0.04]]}
};
var myStyle = { "color": "#FF0000", "weight": 9 };
L.geoJSON(myLines, {style: myStyle}).addTo(map);

[@eamontanner6778]

So, my question is how do I remove myGeoJSON? I want to be able to toggle it on and off with a button.

[@idriskodaolu4826]

thanks this saved me

[@aislanarislou]

How to add a circle representing the radius controlled by a slider inside the map ?

[@maptilerofficial]

Hi Aislan, you can see how to add a circle in #2 video of this leaflet series. ruclips.net/video/OYjFR_CGV8o/видео.html
The slider must return a value that will then take the radius parameter of the circle.

[@danyaviation2626]

Can you make a tutorial about How to show lines when you Click on a marker?

[@sabafatima1719]

so, you want to popup a message when clicked on a marker? use this code as reference:
var geojsonFeature = {
"type": "Feature",
"properties": {"name": "Coors Field", "amenity": "Baseball Stadium", "popupContent": "This is where the Rockies play!"},
"geometry": {"type": "Point","coordinates": [-104.99404, 39.75621]}
};
L.geoJSON(geojsonFeature, {
onEachFeature: function (feature, layer) {layer.bindPopup(feature.properties.popupContent);}
}).addTo(map);

[@danyaviation2626]

@@sabafatima1719 thanks but I made the feature, I made a route map where you click on markers and then routes would be shown

[@mathiashomberger3996]

how can i change the colour of the lines?

[@sabafatima1719]

by styling it, here's a reference code:
var myLines =
{
"type": "Feature",
"geometry": {"type": "LineString","coordinates": [[51.50, -0.08], [51.51, -0.06],[51.52, -0.04]]}
};
var myStyle = { "color": "#FF0000", "weight": 9 };
L.geoJSON(myLines, {style: myStyle}).addTo(map);