We Keep Coding

How to use a geojson file with javascript in order to create polygones with leaflet?

I am trying to create a map with the limitations of the departments as polygons with leaflet. I have the geojson file on my computer. For that, I intend to use the polygon function of leaflet as follows;
var polygon = L.polygon(departementsmetropole.geojson).addTo(map);
</script>
As you can see, I don't know how to use it. My goal is to extract the coordinates of the files in order to put them in the function. The file being the fronteers of the departments, I can't add them manually because each department has around 5000 points of coordinates.
I am a beginner so, as you can see above, I tried to put the file directly where it should go by the coordinates, but it didn't work. I also tried to use the get method without success.

In official documentation you will get all necessary.
In addition, you have the following jsfiddle example https://jsfiddle.net/ToniBCN/8nft2yhm/
// center of the map
var center = [55.8, -4.2];
// Create the map
var map = L.map('map').setView(center, 3);
// a GeoJSON multipolygon
var mp = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-3.9, 56],
[-3.9, 55.6],
[-4.6, 55.6],
[-4.6, 56],
[-3.9, 56]
],
[
[-4.42136131224148, 55.9201880414654],
[-4.44608055051929, 55.8994054388937],
[-4.49963890012121, 55.8816929539651],
[-4.44196067747298, 55.8362196009829],
[-4.35269676146979, 55.8045881227693],
[-4.35818992553152, 55.7636605341908],
[-4.22772727906531, 55.7350629547249],
[-4.07391868533672, 55.7582517890959],
[-4.00937400761133, 55.7984131283508],
[-4.04095970096631, 55.868595920571],
[-4.14532981813928, 55.8947855700627],
[-4.27991233765179, 55.9148010288061],
[-4.29776512085243, 55.9586449375958],
[-4.42136131224148, 55.9201880414654]
]
]
},
"properties": {
"name": "MultiPolygon",
"style": {
color: "orange",
opacity: 1,
fillColor: "gray",
fillOpacity: 0.3
}
}
};
var mp2 = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-4.42136131224148, 55.9201880414654],
[-4.44608055051929, 55.8994054388937],
[-4.49963890012121, 55.8816929539651],
[-4.44196067747298, 55.8362196009829],
[-4.35269676146979, 55.8045881227693],
[-4.35818992553152, 55.7636605341908],
[-4.22772727906531, 55.7350629547249],
[-4.07391868533672, 55.7582517890959],
[-4.00937400761133, 55.7984131283508],
[-4.04095970096631, 55.868595920571],
[-4.14532981813928, 55.8947855700627],
[-4.27991233765179, 55.9148010288061],
[-4.29776512085243, 55.9586449375958],
[-4.42136131224148, 55.9201880414654]
]
]
},
"properties": {
"name": "MultiPolygon2",
"style": {
color: "red",
opacity: 1,
fillColor: "green",
fillOpacity: 0.3
}
}
};
new L.GeoJSON(mp, {
style: function(feature) {
return feature.properties.style
}
}).addTo(map);
new L.GeoJSON(mp2, {
style: function(feature) {
return feature.properties.style
}
}).addTo(map);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

Google Maps - addGeoJson is not working for my file

addGeoJson is not working in google map for my file
please check below code that I am using in javascript
//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: {lat:49.79, lng: -8.82}
});
// Load GeoJSON.
var promise = $.getJSON("Sensitive_Areas_Nitrates_Rivers.json"); //same as map.data.loadGeoJson();
promise.then(function(data){
cachedGeoJson = data; //save the geojson in case we want to update its values
console.log(cachedGeoJson);
map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});
});
I have downloaded this file from here
you can check my JSON file
Sensitive_Areas_Nitrates_Rivers.json
also, you can check this link with polygon
I have used below JSON format so you can check it
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:27700"
}
},
"features": [
{
"type": "Feature",
"id": 1,
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[
500051.6875,
224280.03130000085
],
[
500047.2812999999,
224277.6875
],
[
499977.5937999999,
224242.625
],
[
499976.6875,
224242.21880000085
]
]
]
},
"properties": {
"OBJECTID": 8,
"type_of_sa": "SA_N",
"datedesign": 1025136000000,
"name": "Rivers Itchen",
"length_km": 12,
"uwwtd_code": "UKENRI134",
"shape_Length": 12172.080443901654
}
}
]
}
[500051.6875, 224280.03130000085] - [X, Y] coordinates may be in EPSG: 27700 to EPSG:4326, Now we need to display these coordinates on google map, Is there any solution for this?

Since Google Maps expects GeoJSON to be in EPSG:4326, Sensitive_Areas_Nitrates_Rivers.json needs to be reprojected. QGIS, for instance, could be utilized for that matter (refer docs for a details)
Reprojected Sensitive_Areas_Nitrates_Rivers.json layer will be displayed like this:

You are getting coordinates in metres. For displaying in google map you need to convert it into [Lng, Lat].
For converting metres to [Lng, Lat] you need to change the projection from EPSG: 27700 to 4326
then only you are able to get this geojson in [Lng, Lat]
Tool you can use: QGIS Desktop 3.4.14
Link: https://qgis.org/en/site/forusers/download.html
After convert you need to export this file as feature.

Create point with Geojson and coordinate table

I am currently working on a blog using the template "Fly to a location based on scroll position". However, i have a huge amount of points to display due to the use I'm making of it. Therefore, I intend to create a table that would contain the coordinates of the marker to display on the map. However, I don't manage to get a fully functional table. I can see in my code that the for loop is being ran, but the markers don't display.
I know i have to use function to put parameter but i don't know how whith Geojson.
Could you help me with this issue?
Ruman
code
var tab_coordo = [-5.949547290802002,54.6500264517435,-9.42651,52.97188,-9.465258121490479,51.94015569078675,12.352237701416016, 45.4577225021236];
for (tab_coordo = 0; tab_coordo < tab_coordo.length; tab_coordo++) {
var geojson ={
"features": [{
"type": "Feature",
"geometry": {
"type": "Point", "coordinates": [tab_coordo, tab_coordo++]//ireland cavehills
},
"properties": {
"title" : "jaimiejourneys",
"video": ("<iframe src='https://www.instagram.com/p/BWbCDZKA-Nu/embed' width='200' height='200' frameborder='0' scrolling='no'></iframe>")
}
},
]
}
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<p>' + marker.properties.video + '</p>'))
.addTo(map);
});
}

It resolved thanks for helping :)
var tab_coordo = [
-5.949547290802002, 54.6500264517435,
-9.42651,52.97188,
-9.465258121490479,51.94015569078675,
12.352237701416016, 45.4577225021236
12.411632537841797, 45.488298185683945
];
var coordo= tab_coordo.length;
for (var inc = 0; inc < coordo; inc=inc+2) {
//var inc_coordo = inc;
var geojson ={
"features": [{
"type": "Feature",
"geometry": {
"type": "Point", "coordinates": [tab_coordo[inc], tab_coordo[inc+1]]
},
"properties": {
"title" : "jaimiejourneys",
"video": ("<iframe src='https://www.instagram.com/p/BWbCDZKA-Nu/embed' width='200' height='200' frameborder='0' scrolling='no'></iframe>")
}
},
]
}

Mapbox-gl-js directions plugin returns directions only for the last call made in case of simultaneous calls

I am trying to retrieve directions for multiple routes using mapbox-gl-js Directions API plugin (https://github.com/mapbox/mapbox-gl-js).
The following code requests the directions and draws them on Map.
var mapBoxDrawDrivingPath = function(routeArray, day)
{
var colorArray = ['#4286f4' , '#7312bc' , '#11bc2e' , '#80bc11', '#bc2411'];
//var stringDay = day.toString(16);
var rand = Math.floor((Math.random() * 5));
var lineColor = colorArray[rand] ;
console.log("Day : " + day + " " + lineColor);
console.log(routeArray[0]);
var MapBoxDir = new MapboxDirections({accessToken: mapboxgl.accessToken });
map.panTo(routeArray[0]);
MapBoxDir.setOrigin(routeArray[0]);
MapBoxDir.setDestination(routeArray[routeArray.length -1]);
MapBoxDir.on('route', function(e) {
//the following function is altered to return "lng,lat" instead of "lat,lng"
var routeGeometry = polyLineDecode(e.route[0].geometry);
map.addLayer(
{
"id": "route"+day,
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": routeGeometry
//routeGeometry
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": lineColor,
"line-width": 4
}
});
});
}
The above function is called multiple times with different set of coordinates. Since the result of directions is a non-blocking behavior on callback, the function "mapBoxDrawDrivingPath" is called one after the other without waiting for result from previous call.
I assumed it would return respective directions for each enqueued call but it returns the directions of the last inputs in all of its callback returns.
What am I doing wrong here ?

TurfJS Add Point to MapBox Map

New to Turf JS and have been looking at integration via the MapBox API. Using the default MapBox.Outdoors map and have been following some of the example TurfJS documentation http://turfjs.org/docs/#point but can't seem to get my point plotting on top of the map. Any suggestions greatly appreciated, the error seems to be in my list line of code in relation to the FeatureLayer.setGeoJSON but I can't figure it out. If I leave the last line active the map doesn't load, if I comment it out the map loads but no pin shows up?
<BODY>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA';
var point = turf.point([35.463453, -97.514914], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all?
</SCRIPT>
</BODY>

I think the problem is that you're trying to add geojson to the map without converting it first. You need to convert the geojson to a format that leaflet can use. Here is an example that should work for you. It will also bind a popup to the point marker that will display the properties for you. The style part can be done either statically (like for all properties except title) so that it would be applied to all points within the feature collection, or dynamically using each features properties (as is done with title).
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]};
L.geoJson(featureCollection, {
onEachFeature: function (feature, layer) {
layer.bindPopup(""+feature.properties+"<br />");
},
style: function (feature) {
style = {
"title": feature.properties.title,
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
};
return style
}
}).addTo(map)

I think you should use the set marker function that mapbox makes available to you. So you can skip creating a feature layer and just use the mapbox-marker function. It is documented here:
https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/
There is also a description of how to create a simple marker here:
https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/
For the code you provided you could just skip the creation of a geojson object via turf.point and just use this:
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker([-97.514914, 35.463453], {
icon: L.mapbox.marker.icon({
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
})
}).addTo(map);
Or if you want to use geojson with turf.point you could also do it that way:
var point = turf.point([-97.514914, 35.463453], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});
var coords = point.geometry.coordinates;
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker(coords, {
icon: L.mapbox.marker.icon(point.properties)
}).addTo(map);
Also make sure that you need to flip your point coordinates from
[35.463453, -97.514914] to [-97.514914, 35.463453] to match the geojson specification which is "projected coordinates, longitude, latitude for geographic coordinates"
http://geojson.org/geojson-spec.html#id2