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/
Related
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
I created a map of Toronto wards some years ago when there were 44 wards. Now we have 25 wards and I am attempting to convert the map. I haven't been working with D3 for some time and am not sure where to start.
The previous json had the following definition and was much larger than the one I got from the city
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4269" } },
"features": [
{ "type": "Feature", "properties": { "GEO_ID": 14630026, "CREATE_ID": 63519, "NAME": "Scarborough-Rouge River (41)", "SCODE_NAME": "41", "LCODE_NAME": "EA41", "TYPE_DESC": "Ward", "TYPE_CODE": "CITW", "OBJECTID": 1, "SHAPE_AREA": 0.0, "SHAPE_LEN": 0.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -79.264840294724905, 43.779537878926838 ],
The new one starts
{"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[318236.529,4840171.519],[318236.25,4840170.941],
So that I can use the existing javascript I would really like to find a way of converting the new file to the older one. Is that possible?
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));
I created two different geojson data on the map. I want to click selected geojson data. I used this code its working but I get two geojson id not clicked id. I just want to get clicked geojson id. Here f1 is a defined property.
map.data.addListener('click', function(event){
var id=event.feature.getProperty('f1');
alert(id);
infowindow2.setContent(sContent);
infowindow2.setPosition(event.latLng);
infowindow2.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow2.open(map);
}
İt is example of geojson data
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
28.9707230069957,
41.0143811020089
],
[
28.9707162564384,
41.0143424956501
],
[
28.9707099456323,
41.0143003832993
],
[
28.9707027979273,
41.0142558268809
],
[
28.970696368278,
41.0142152406152
],
[
28.9706905696604,
41.0141716903304
],
[
28.9706439363613,
41.0141812741487
],
[
28.9706538187623,
41.0142586346452
],
[
28.9706604147999,
41.0143007495466
],
[
28.9706724204532,
41.0143865085056
],
[
28.9707230069957,
41.0143811020089
]
]
]
},
"properties": {
"f1": 110013011,
"f2": "FATİH",
"f3": "SURURİ",
"f4": "F21C25D2C",
"f5": "P29",
"f6": "337",
"f7": "34",
"f8": "1. Derece Koruma Bolgeleri",
"f9": null,
"f10": "Ş",
"f11": 55,
"f12": 96,
"f13": 1121229337,
"f14": 12,
"f15": 28.9706822916352,
"f16": 41.0142812568067,
"f17": 12,
"f18": 12,
"f19": 227,
"f20": "SURURİ",
"f21": "e17c8db4-bec3-11e5-b590-00a0d1e9ad00",
"f22": 10598737,
"f23": 20598781,
"f24": "e17c66a4-bec3-11e5-8eec-00a0d1e9ad00"
}
}
]
}
I have a list of features and I want to create a FeatureCollection to group them in one string, the features are from different types (polygons, lines and points).
Here is how they are written :
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
-31.640625,
15.623036831528264
],
[
-2.8125,
-14.264383087562637
],
[
-22.5,
-30.751277776257812
],
[
-30.937499999999996,
-38.54816542304657
]
]
}
}
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-24.960937499999996,
29.84064389983441
],
[
-2.109375,
21.616579336740603
],
[
2.4609375,
43.068887774169625
],
[
-31.289062500000004,
49.38237278700955
],
[
-24.960937499999996,
29.84064389983441
]
]
]
}
}
Is there a javascript function that deals with this, i'm stuck on it.
If you have an array of GeoJSON feature strings, you can create a GeoJSON feature collection string like this:
var features = [
'{ "type": "Feature", "properties": {}, ... }',
'{ "type": "Feature", "properties": {}, ... }'
];
var collection = JSON.stringify({
features: features.map(JSON.parse),
type: 'FeatureCollection'
});