Develop Reference

Labeling GeoJSON Polygon in Mapbox

I cannot find anywhere in the Mapbox GL JS documentation on how to add a simple label to a GeoJSON polygon so I am working off of a few examples I have found.
My GeoJSON is structured like so:
const gj = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "309"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
77.34374999999999,
54.57206165565852
],
[
124.45312499999999,
63.074865690586634
],
[
102.65625,
64.16810689799152
],
[
77.34374999999999,
54.57206165565852
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "310"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
81.9140625,
48.22467264956519
],
[
124.45312499999999,
51.39920565355378
],
[
122.6953125,
59.88893689676585
],
[
81.9140625,
48.22467264956519
]
]
]
}
}
]
}
I'm trying to label the polygons with the id field.
Here is what that looks like:
map.addSource("maine", {
type: "geojson",
data: gj,
});
map.addLayer({
id: "maine",
type: "fill",
source: "maine",
layout: {
"text-field": ['get','id'],
},
paint: {
"fill-color": "#088",
"fill-opacity": 0.8,
},
});
The issue I'm having is that when I add the text-field to the layout object, the layer doesn't render at all. I've searched Mapbox's docs and on here as well, but I cannot find a vanilla way to add a simple label.

I found out that, if you are trying to add labels to polygons using this library, you first need to create a point layer from the existing data set and use that to label.
This website helped me figure it out: http://fuzzytolerance.info/blog/2016/07/15/Generate-centroid-points-from-polygons-with-Turf-js/

How to create JavaScript object and fill data dynamically? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to create a data object dynamically with key-value pairs. In this object, there is also an array named features and also within this array element called geometry one more array coordinates.
In feature array, properties like title and content will add dynamically and also values of coordinates array.
How to add data in coordinates array: "geometery":{"coordinates":[]}.. ?
data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Day 1",
"content": "This is where some people moved to."
},
"geometry": {
"type": "Point",
"coordinates": [
-73.7949,
40.7282,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "The Next Day",
"content": "This is where some people grooved to."
},
"geometry": {
"type": "Point",
"coordinates": [
-74.3838,
40.9148,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "Amazing Event",
"content": "This is where they went to have fun."
},
"geometry": {
"type": "Point",
"coordinates": [
4.899431,
52.379189,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1776",
"content": "This where they went when the revolution had begun."
},
"geometry": {
"type": "Point",
"coordinates": [
-71.3489484,
42.4603719,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1776",
"content": "This where they went when the revolution had begun."
},
"geometry": {
"type": "Point",
"coordinates": [
-71.2272,
42.4473,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1984",
"content": "So they all came here...and disappeared without a trace!"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.118092,
51.509865,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "12/22/63",
"content": "Now, this can be quite the scary place."
},
"geometry": {
"type": "Point",
"coordinates": [
-70.2553259,
43.661471,
1
]
}
},
]
}
var data = {
features: []
};
for (piece in pieces){
data.features.push({
type: "Feature",
properties: {title: '{piece.title}' , content: '{piece.content}' },
geometry: {type: "Point"},
});
}

What have you already tried and where was your problem?
You could do something like this:
var data = {
features: []
};
data.features.push({
type: "Feature"
});

GeoJSON file making leaflet API slow site down

I'm trying to use the leaflet API to display data about Coral Reef locations across the world. I originally downloaded a shapefile (.shp), and converted it to GeoJSON using QGIS. I put the data in my project folder, but when I attempted to display this data on leaflet through an Ajax request, the browser took a very long time to load and eventually return a not responding message. However, I could see that the markers would appearing on the map, albeit it very slowly. Is there any way to create a smaller file, or load the data more efficiently so it doesn't make the entire site unusable?
My Ajax request looked like this:
$.ajax({
type: 'GET',
url: './coldwater.geojson',
dataType: 'json',
data: data,
success: function (data) {
L.geoJSON(data).addTo(mymap);
}, error: function(){
console.log('Couldn\'t load data');
}
});
Here's a snippet of the geoJSON
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -75.116700000304718, 18.283300000094982 ], [ -75.116699858211859, 18.283301156623111 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -34.850000000399632, 9.01670000040474 ], [ -34.849996660317572, 9.016695959750791 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -34.850000000399632, 9.01670000040474 ], [ -34.849996660317572, 9.016695959750791 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -81.166699999905006, 23.983300000394763 ], [ -81.166699953140267, 23.983303104854429 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.549997733808311, 26.649999766076405 ], [ -79.416700222836994, 27.166696245435446 ], [ -79.416700222836994, 27.283302340130945 ], [ -79.416699999805132, 27.283300000094982 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -78.683303107752181, 27.416698775628049 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.216699996607531, 24.099999131754601 ], [ -78.850001440414133, 26.516702255105031 ], [ -78.39999868309269, 26.583297050818317 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -77.083301298815854, 25.166702977260627 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.233301481578053, 27.216698550297906 ], [ -79.216699996607531, 27.300002749627254 ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -79.549997733808311, 26.649999766076405 ], [ -79.416700222836994, 27.166696245435446 ], [ -79.416699999805132, 27.166700000104981 ], [ -79.366697917974477, 27.533295877103114 ] ] } },
Would it be better to use the google maps API?
Or is there a better way to insert a shapefile into a leaflet map?
ps: if this isn't appropriate or is off topic let me know. I'm new to posting on stackoverflow

*pointsWithinPolygon* on Trufjs

I'm trying to get some point inside multiple polygon using pointsWithinPolygon in turfjs, but the result is unexpected.
Is there any chance that pointsWithinPolygon isn't compatible with FeatureCollection?
Here is the example of my usage.
let points = {
"type": "Point",
"coordinates": [
106.866995, -6.261513
]
}
let filter = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"IdArea": 4
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
106.314674,
-6.6348689124
],
[
107.5781628906,
-6.6348689124
],
[
107.5781628906,
-5.9742195859
],
[
106.314674,
-5.9742195859
],
[
106.314674,
-6.6348689124
]
]
]
}
}
]
}
let result = turf.pointsWithinPolygon(points, filter);
console.log(result);

You are trying to use geoJsons as inputs to turf's pointsWithinPolygons function.
The function takes a turf.points array of points, and a turf.polygon array of polygon vertices.
Based on the variables you established, you would need to call:
let result = turf.pointsWithinPolygon(turf.points([points.coordinates]), turf.polygon(filter.features.geometry.coordinates));

Duplicating Point Layer for Simulation

I'm trying to simulate city traffic movements (at the moment I'm only into vehicles) but I'm having a problem.
What happens is that I'm trying to simulate 1 car per point at the map, but I don't know how to duplicate a certain layer (and each one has a different route), for example this one:
map.addSource('point', {
"type": "geojson",
"data": pointOnCircle(0)
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
I don't know if I could just loop and generate N points with different names or do it in another way.
Here's a video of what I've done until now (for simulating it I created 2 different layers because I didn't know how to duplicate them) :
https://www.youtube.com/watch?v=xWZD9aBUFlg

You should put all your points in the one data layer:
map.addSource('points', {
"type": "geojson",
"data": pointsOnCircle(0) // change this function to return multiple features
});
map.addLayer({
"id": "points",
"source": "points",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf" // possibly make this a data-driven function
}
});
Your GeoJSON data source would look like:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
146.25,
-37.16031654673676
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
138.515625,
35.460669951495305
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-81.5625,
33.43144133557529
]
}
}
]
}