How to change markers colour in geojson - json

I wanna change marker color for in geojson. However, this code doesn't work as expected.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-2.5555, 53.6666]
},
"style": {
"color": "red",
"weight": 5,
"opacity": 0.65
},
"properties": {}
}
]
}

Related

How to setup a month slider filter on Vega-Lite?

I've been trying to create a proportional symbol map with a month filter slider so that the bubbles change as I shift the slider. However, I've only been able to make a slider appear but the interactivity doesn't seem to work. I'd be very glad if someone could help me with this. This is the code I have so far. Thanks!
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 450,
"title": "Refugee Diaspora From Ukraine Post Invasion",
"projection": { "type": "equalEarth" },
"layer": [
{
"data": {
"url": "https://raw.githubusercontent.com/syedzubinhafiz/test_london/main/ne_110m.topojson.json",
"format": { "type": "topojson", "feature": "ne_110m_admin_0_countries" }
},
"mark": { "type": "geoshape", "fill": "lightgray", "stroke": "white" }
},
{
"data": {
"url": "https://raw.githubusercontent.com/syedzubinhafiz/test_london/main/combined.csv"
},
"mark": { "type": "circle" },
"params": [
{
"name": "Month Selection",
"value": 3,
"select": { "type": "point", "fields": ["month"] },
"bind": {
"month": { "input": "range", "min": 3, "max": 9, "step": 1 }
}
}
],
"transform": [
{
"timeUnit": "month",
"field": "date",
"as": "month"
},
{ "filter": { "field": "month", "gt": 3 } }
],
"encoding": {
"longitude": { "field": "centroid_lon", "type": "quantitative" },
"latitude": { "field": "centroid_lat", "type": "quantitative" },
"tooltip": [{ "field": "country" }, { "field": "individuals" }],
"size": {
"field": "individuals",
"type": "quantitative",
"title": "Immigrants"
},
"color": {
"field": "country",
"type": "nominal",
"scale": { "type": "linear", "scheme": "category10" }
}
}
}
]
}
`

Filtering on GeoJSON data

I was wondering how filtering is normally done on a FeatureCollection for GeoJSON data. For example, take the following earthquake data:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": "ak16994521", "mag": 2.3, "time": 1507425650893, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5129, 63.1016, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16994519", "mag": 1.7, "time": 1507425289659, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.4048, 63.1224, 105.5 ] } },
{ "type": "Feature", "properties": { "id": "ak16994517", "mag": 1.6, "time": 1507424832518, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.3597, 63.0781, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38021336", "mag": 1.42, "time": 1507423898710, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.497, 34.299667, 7.64 ] } },
{ "type": "Feature", "properties": { "id": "hv61900626", "mag": 2.91, "time": 1504833891990, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -155.011833, 19.399333, 2.609 ] } }
]
}
Now, if this data is all within a single FeatureCollection, how would anyone filter the data, for example to view earthquakes with magnitude > 2.5 ? It seems like when dealing with a FeatureCollection the first thing to do would be to extract each of the features into its own item: is that what is usually done, so that individual properties may be queried?

GeoJSON is a transfer format and as you have noticed any operation on it requires you to read and parse the whole file every time. If you plan to do anything with the data you should translate it into a more useful format which supports indexes. If you need to keep to a file based format then I recommend GeoPackage which is supported by the majority of modern GIS. Alternatively, you could use a spatially enabled database such as PostGIS.
In either case the easiest way to convert the data is to use ogr2ogr

Multiple items for a single coordinate in GeoJSON

I've set up a rest API that is supplying geojson data from a database. The issue is each coordinate could/does have multiple items associated to it.
Currently troubleshooting the application's javascript file to load, and plot - but looking for feedback on best practice. Any information is appreciated. Thanks!
var foo = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"item": "A",
},
"geometry": {
"type": "Point",
"coordinates": [
90,
135
]
}
},
{
"type": "Feature",
"properties": {
"item": "B",
},
"geometry": {
"type": "Point",
"coordinates": [
90,
135
]
}
},
{
"type": "Feature",
"properties": {
"item": "C",
},
"geometry": {
"type": "Point",
"coordinates": [
90,
135
]
}
},
...

Why is mapbox rejecting my geojson as invalid.

I have a function which is parsing JSON provided by the foursquare api to GeoJSON, which I then provide to the MapBox API using JSON.stringify() on the GeoJSON object then loading it to the map with the following code
MapBox API returns saying that my GeoJSON is invalid.
I checked the GeoJSON specification and it matches exactly !
Can anybody spot the error ?
loading function
this.map.on("load", () => {
this.map.addSource("venues", {
type: "geojson",
data: geojson
});
GeoJSON
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.31272484668867, 18.092948926236698]
},
"properties": {
"id": "4d0a6cc933d6b60c1c569a85",
"venueName": "Peciatkaren",
"address": "Kmetkova 32",
"distance": 20119,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.30957732182106, 18.087218856597]
},
"properties": {
"id": "4bd5ad37637ba5933bc3f670",
"venueName": "Zanzibar",
"address": "Štefánikova trieda 43",
"distance": 20030,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
}]
}

There is nothing wrong with your GeoJSON and there are several ways how you could use it.
Docs:
https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource
https://www.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson
One example below:
var yourgeojson = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.31272484668867, 18.092948926236698]
},
"properties": {
"id": "4d0a6cc933d6b60c1c569a85",
"venueName": "Peciatkaren",
"address": "Kmetkova 32",
"distance": 20119,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.30957732182106, 18.087218856597]
},
"properties": {
"id": "4bd5ad37637ba5933bc3f670",
"venueName": "Zanzibar",
"address": "Štefánikova trieda 43",
"distance": 20030,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
}]
};
map.on('load', function () {
map.addSource('someid', {
type: 'geojson',
data: yourgeojson
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "someid",
"layout": {
...
}
});
});

TileMill and Geojson; Datasource could not be loaded

Im following this article to get a geojson file from an excel using Google Refine.
http://support.mapbox.com/kb/tilemill/converting-addresses-in-spreadsheets-to-custom-maps-in-tilemill
Now I've got the weird issue that I sometimes get the error message that the Datasource could not be loaded, while I'm using the exact same template everytime. The only thing different seems to be the data I'm loading.
Also if I compare the 2 geojson files (1 that is working and 1 that is not) I can see no difference.
Does anyone know what the problem could be? .. is it the use of spaces/breaks or whatever perhaps??
This one is working:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 25.019909,
"geometry": { "type": "Point", "coordinates": [121.365599, 25.019909] },
"properties":
{
"Users" : 1
}
},
{
"type": "Feature",
"id": 24.446706,
"geometry": { "type": "Point", "coordinates": [117.818197, 24.446706] },
"properties":
{
"Users" : 1
}
},
{
"type": "Feature",
"id": 25.100632,
"geometry": { "type": "Point", "coordinates": [117.03403, 25.100632] },
"properties":
{
"Users" : 1
}
},
{
"type": "Feature",
"id": 47.354348,
"geometry": { "type": "Point", "coordinates": [123.918186, 47.354348] },
"properties":
{
"Users" : 1
}
},
{
"type": "Feature",
"id": 30.199652,
"geometry": { "type": "Point", "coordinates": [115.03852, 30.199652] },
"properties":
{
"Users" : 3
}
},
...
...
...
}
]
}
While this one is giving me the error;
{
"type": "FeatureCollection",
"features": [ {
"type": "Feature",
"id": 25.019909,
"geometry": { "type": "Point", "coordinates": [121.365599, 25.019909] },
"properties":
{
"Users" : 1
}
},
{
"type": "Feature",
"id": 24.446706,
"geometry": { "type": "Point", "coordinates": [117.818197, 24.446706] },
"properties":
{
"Users" : 1
}
},
{
"type": "Feature",
"id": 25.100632,
"geometry": { "type": "Point", "coordinates": [117.03403, 25.100632] },
"properties":
{
"Users" : 1
}
},
...
...
...
}
]
}

You have an extra '}' in the second one. But, of course this may only look this way because of what you removed when adding the ..., so its impossible to say unless you post the whole thing that is not working.
Hint: find a text editor that highlights matching braces - most should do this if you tell the editor you are viewing javascript or json code.

I'm sorry.. it was something in the data after all :( .. tilemill is very strict in what it accepts and what not apparently..