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);

How to plot GeoJson data in d3.js

I am trying to display a floorplan to my webapp using d3.js and vue js. The data comes from a .json file and is in a geojson format. I generated some test data from this geojson website. I was thinking I could use the d3.js path function to plot each different object to a svg element. Would this be the correct way to go about doing this? I have looked at this tutorial to make a united states map from geojson data. I was thinking this would be the right way to do it if you inputted different data. However my program spits out random rectangles to the webapp. I think this may be becauseof the projection I am using but Im not sure. I havent used d3.js like this before so its all new to me. I included my code in below. Any help is greatly appreciated and im open to possibly using a different java script library but d3js is preferred.
createFloormap(){
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")
var path = d3.geoPath().projection(d3.geoAlbersUsa().scale(500))
//var path = d3.geoPath()
//var path = d3.geoPath().projection(d3.geoMercator().scale(100))
var x = d3.scaleLinear()
.domain([1, 10])
.rangeRound([600, 860]);
var color = d3.scaleThreshold()
.domain(d3.range(2, 10))
.range(d3.schemeBlues[9]);
var promises = [
d3.json("../static/data.json")
//d3.json("https://raw.githubusercontent.com/adamjanes/udemy-d3/master/08/8.04/data/us-map.json")
]
Promise.all(promises).then(function(data){
ready(data[0]);
})
function ready(us) {
console.log(us)
svg.append("g")
.selectAll("path")
.data(us.features)
//.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("fill", "grey")
.attr("d", path)
.attr("stroke", "#fff")
.attr("stroke-width", .2)
}
}
},
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-144.140625,
45.583289756006316
],
[
-65.390625,
45.583289756006316
],
[
-65.390625,
69.28725695167886
],
[
-144.140625,
69.28725695167886
],
[
-144.140625,
45.583289756006316
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
9.4921875,
39.36827914916014
],
[
159.609375,
39.36827914916014
],
[
159.609375,
70.02058730174062
],
[
9.4921875,
70.02058730174062
],
[
9.4921875,
39.36827914916014
]
]
]
}
}
]
}

My apologies, I mislead you when commenting on your last question. I read the code and saw an obvious issue - but missed the reference to a floor plan - which for the coordinates given was unlikely to be measured in latitude/longitude pairs. The answer below would be appropriate for a floor plan in lat/long pairs (as would be exported from geojson.io and because projection is less relevant at the building scale) or a geojson floor plan with coordinates in meters/feet.
Geojson in an arbitrary Cartesian coordinate system
You don't have geographic coordinates consisting of latitude/longitude pairs measured in degrees (as I thought when commenting), you have coordinates consisting of x,y values measured in some unit like metres or feet.
To project these corodinates we do not want to use d3.geoSomeProjection because these project latitude/longitude pairs on a sphere to a 2d plane. Nor do we want to use a null projection (the default projection for d3.geoPath) because that treats geojson coordinates as pixel coordinates (we can use a null projection when the coordinates in the geojson have been already been converted to pixel values - we know we don't want a null projection here because we have negative values).
Instead we can use d3.geoIdentity (the geo prefix indicates it is just part of the geo module of D3 but it doesn't require geographic coordinates). This "projection" allows us to apply some projection methods to the data, namely .center() or .scale(). D3 also has two convenience methods that set both simultaneously: fitExtent and fitSize which stretch and translate specified geojson to given dimensions:
var projection = d3.geoIdentity().fitSize([width,height],geoJsonObject)
var projection = d3.geoIdentity().fitExtent([[left,top],[right,bottom]],geoJsonObject)
So, with your data we get:
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-144.140625,
45.583289756006316
],
[
-65.390625,
45.583289756006316
],
[
-65.390625,
69.28725695167886
],
[
-144.140625,
69.28725695167886
],
[
-144.140625,
45.583289756006316
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
9.4921875,
39.36827914916014
],
[
159.609375,
39.36827914916014
],
[
159.609375,
70.02058730174062
],
[
9.4921875,
70.02058730174062
],
[
9.4921875,
39.36827914916014
]
]
]
}
}
]
}
var width = 500;
var height = 300;
var svg = d3.select("svg")
.attr("width",width)
.attr("height",height);
var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection);
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d",path);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
One thing to note is that SVG coordinates space, to which d3.geoIdentity is treating coordinates as being in, has the opposite convention as might be expected: y=0 is at the top of the SVG with y values increasing as one moves down. If your coordinates appear to be upside down, then you can use d3.geoIdenity().fitSize(...).reflectY(true)

How to display (antimeridian) vector tiles generated by geojson-vt in leaflet using L.CRS.Simple?

I have a GeoJSON simple data that i need to display on a leaflet map using L.CRS.Simple crs, because is antimeridian data, and sometimes, coordinates can be [450,389] (more than 180)
This is the very simple GeoJSON:
{
"type": "FeatureCollection",
"name": "entities",
"features": [
{
"type": "Feature",
"properties": {
"Layer": "0",
"SubClasses": "AcDbEntity:AcDbPolyline",
"EntityHandle": "1F9",
"style": "PEN(c:#FF0000)"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
0,
0
],
[
0,
150
],
[
150,
150
],
[
150,
0
],
[
0,
0
]
]
}
}
]
}
Using geojson-vt, (demo page) i'm getting this rectangle:
I made some modifications to geojson-vt lib:
Projection functions:
function projectX(x, simple, projectionFactor) {
return x / 256 + 1;
}
function projectY(y, simple, projectionFactor) {
return - y / 256 + 0.5;
}
I added to GeoJSONVT.prototype.getTile function this line:
y = y + (1 << (z - 1)); // xy map
And the result is (markers are placed on [0,0],[150,0],[150,150],[0,150]):
Any suggestion? Why i'm losing tiles here?

I recommend you read this: https://macwright.org/2016/09/26/the-180th-meridian.html
Quoting the GeoJSON spec recommended solution:
In representing Features that cross the antimeridian, interoperability is improved by modifying their geometry. Any geometry that crosses the antimeridian SHOULD be represented by cutting it in two such that neither part’s representation crosses the antimeridian. - GeoJSON Spec, 3.1.9

How to convert zip code into GeoJSON

I have an array of users containing their zip codes and i would like to display their location based on their zipcode on Google Maps but i cannot turn my zipcode into a GeoJSON format. Help me

From what I looked up GeoJSON uses latitude and longitude right?
If that's the case you can just use another api that tells you latitude and longitude based on the zip code you input in its query.
Using google api:
http://maps.googleapis.com/maps/api/geocode/json?address={zipcode}
extract the lat/lon coordinate values from the JSON above:
var zipCode; //from your array of users
$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + zipCode, function (json){
var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;
//Handle your geoJSON here, I'm just guessing on this part I don't know geoJSON
var geojsonFeature =
{
"type": "Feature",
"properties":
{
"name": "",
"amenity": "",
"popupContent": ""
},
"geometry":
{
"type": "Point",
"coordinates": [latitude, longitude]
}
};
L.geoJSON(geojsonFeature).addTo(map);
});

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