Develop Reference

Access geojson key-value pairs that are not geometry or properties?

"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-77.155585,
40.056708,
0
],
[
-77.150315,
40.04536,
0
]
]
]
},
"id": 42001030101,
"Households": 1000,
"Income": 74597
},
I am using the google maps JS API. I cannot use the getProperty function because the data doesn't have the properties grouped together.
How can I access each of these pieces of data?
Here is what I tried before I realized that you can't use the properties function.
map.data.setStyle(
function(feature){
let income = feature.getProperty('Income');
let color = 'blue';
if (income > 10000){
color = 'red'
}
return {
fillColor: color,
//strokeColor: "green",
strokeWeight: 0.3,
};
}
);

According to the geojson spec:
A Feature object has a member with the name "properties". The value
of the properties member is an object (any JSON object or a JSON null
value).
As your feature doesn't have a properties member, you can 'repair' it so that any member that is neither type nor geometry is bundled as a member of properties.
This should enable your existing code using feature.getProperty().
const data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-77.155585, 40.056708, 0],
[-77.150315, 40.04536, 0]
]
]
},
"id": 42001030101,
"Households": 1000,
"Income": 74597
}
]
}
const repairGeoJsonProps = (fc) => {
return {
"type": "FeatureCollection",
"features": fc.features.map(ftr => {
const props = Object.entries(ftr).filter(k => ["type", "geometry"].indexOf(k[0]) < 0);
return {
"type": ftr.type,
"geometry": ftr.geometry,
"properties": Object.fromEntries(props)
}
})
}
}
console.log(repairGeoJsonProps(data));

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 do i programmatically adjust the height of an element in a Cesium promise method.

I am trying to move the element height of an entity that is loaded from a geojson file in cesium.js. I'm using the example App.js file from Cesium Workshop/
How would I modify the code below to adjust the height of the data entities so that they are pinned to the elevation of the terrain. The geojson file that I have has an altitude value of 0. This altitude needs to match the terrain at that location. When I render this data many of the points are under the terrain. I assume I also need to lookup the terrain height, convert the data to Cartesian coordinated back and forth to polar coordinates to add the offset into the entity.
var geojsonOptions = {
clampToGround : true
};
var testLinePromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/testLines.geojson', geojsonOptions);
// Save an new entity collection of neighborhood data
var testLines;
testLinePromise.then(function(dataSource) {
// Add the new data as entities to the viewer
viewer.dataSources.add(dataSource);
testLines = dataSource.entities;
// Get the array of entities
var testLineEntities = dataSource.entities.values;
for (var i = 0; i < testLineEntities.length; i++) {
var entity = testLineEntities[i];
if (Cesium.defined(entity.polygon)) {
// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// Generate Polygon center
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
text : entity.name,
showBackground : true,
scale : 0.6,
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
disableDepthTestDistance : 100.0
};
}
}
});
Here is the geojson file
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "623dd9c1-26cb-4248-8e41-ebc8c3a16af5",
"description": "descr A",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-114.5305072,
20.61238237,
0
],
[
-111.9486,
10.46916111,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "15966b86-26d0-4e0b-ba6e-7fa0c98bfe5e",
"description": "descr C",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-135.9989702,
45.7677603,
0
],
[
-134.5305072,
50.61238237,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "00ca37f5-de78-4d5b-88b5-d39808ff8143",
"description": "descr D",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-125.9989702,
65.7677603,
0
],
[
-129.0238961,
67.96685,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "22e5e02f-fa43-445e-a2eb-29ad760a964c",
"description": "descr E",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-105.9989702,
55.7677603,
0
],
[
-100.7366501,
55.67798889,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "c4aefe46-a2a6-4a97-ac36-571c9e370d31",
"description": "descr A",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-111.994653,
78.84398434,
0
],
[
-128.4816326,
16.68839404,
0
]
]
}
}
]
}

Create FeatureCollection from multiple GeoJSON strings

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

Not able to Parse a Json File

I want to load a GeoJson File that is uploaded on server
var promise = ('https://api.myjson.com/bins/31e3j');
that.map.data.loadGeoJson(promise);
This condition works fine
But I want to Load this GeoJson File locally
so I have assigned the Json Code instead a the Server Link to a Variable on which I am neither getting any error but unable to get the O/P as well
var promise = jQuery.parseJSON ('{ "type": "FeatureCollection","crs":{"type": "name","properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84"}},"features": [{"type": "Feature", "properties": {"id": 1},"geometry": {"type": "Polygon", "coordinates": [ [ [ -83.52936044652942, 40.30230752849768], [ -83.52924865349425, 40.30230753872012], [ -83.52924666169983, 40.3021800251207 ], [ -83.52935848418728, 40.302181900418084 ], [ -83.52936044652942, 40.30230752849768]]]}}, ]}');
that.map.data.loadGeoJson(promise);

When in doubt, run it through a linter/formatter:
http://jsonlint.com/
You have an error in the JSON, a comma a few characters from the end:
]]]}}, ]}');
^-------TROUBLE MAKER!
Or this one is cool!
http://pro.jsonlint.com/
I am neither getting any error
Maybe the surrounding code is swallowing the error. If you take your var promise = jQuery.parseJSON('DODGY_JSON_HERE') code and run it in the console, you'll see the error:
Uncaught SyntaxError: Unexpected token ](…)
e.extend.parseJSON #jquery.min.js:2
(anonymous function) #VM270:2
InjectedScript._evaluateOn #VM268:875
InjectedScript._evaluateAndWrap #VM268:808
InjectedScript.evaluate #VM268:664
Not as handy as the linter, but at least you see an error.

Invalid JSON is not parseable, obviously:
...snip...[ -83.52936044652942, 40.30230752849768]]]}}, ]}');
^----

Because that isn't correct JSON. You have additional comma at the end.
{ "type": "FeatureCollection","crs":{"type": "name","properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84"}},"features": [{"type": "Feature", "properties": {"id": 1},"geometry": {"type": "Polygon", "coordinates": [ [ [ -83.52936044652942, 40.30230752849768], [ -83.52924865349425, 40.30230753872012], [ -83.52924666169983, 40.3021800251207 ], [ -83.52935848418728, 40.302181900418084 ], [ -83.52936044652942, 40.30230752849768]]]}} ]}
This is correct JSON:
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
"id": 1
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-83.52936044652942,
40.30230752849768
],
[
-83.52924865349425,
40.30230753872012
],
[
-83.52924666169983,
40.3021800251207
],
[
-83.52935848418728,
40.302181900418084
],
[
-83.52936044652942,
40.30230752849768
]
]
]
}
}
]
}