I have a GeoJson file that I am trying to load to logic.js for the Leaflet. I console.logged the response and it fetches the data, however, when I try to apply the data onto the map, it gives me the following error: Uncaught (in promise) Error: Invalid GeoJSON object.
My GeoJSON data looks like this:
"type": "WineCollection",
"wines": [
{
"type": "wine",
"properties": {
"country": "Albania",
"points": 88.0,
"price": 20.0
},
"geometry": {
"type": "Point",
"coordinates": [
19.9999619,
41.000028
]
}
},
Here is my code:
center: [40.7128, -74.0059],
zoom: 2.5
});
// Adding tile layer
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox",
maxZoom: 18,
id: "mapbox.streets",
accessToken: API_KEY
}).addTo(myMap);
d3.json("static/js/wine.json").then(function(data) {
L.geoJson(data).addTo(myMap);
});
The data sample is not compliant with GeoJSON specification.
You can have an object of type "FeatureCollection", having an array of "features", which are objects of type "Feature" (and having "properties" and a "geometry" like in your data sample).
Unfortunately you cannot customise those types.
There are several GeoJSON linting tool available that can help you quickly spot non compliant data, e.g. http://geojsonlint.com/
Related
I am newbie to mapbox. I have to populate graph like below example
https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/
I am using geojson file as a source but it is not working.
map.on('load', function() {
map.addSource('tls_demand', {
'type': 'geojson',
'url': 'http://1xx.2xx.1xx.1xx/xxxx.geojson'
});
map.addLayer({
"id": "tls_projection",
"type": "fill",
"source": "tls_demand",
"filter": ["==", "$type", "MultiPolygon"],
'paint': {
"line-color": "red",
'fill-opacity': 0.75
}
});
});
Can anyone pls suggest how to do it?
I had some time to play with this.
Here's a snippet and also there's codepen at the bottom.
map.on("load", function() {
map.addSource("tls_demand", {
type: "geojson",
data: "https://gist.githubusercontent.com/androidfanatic/99de0a21907791fc2d57570df19455f6/raw/9710b3c69f0591bc6ca7730b0b6eebe2349b7571/DeoriaBoundary1.geojson"
});
map.addLayer({
id: "tls_projection",
type: "fill",
source: "tls_demand",
filter: ["==", "$type", "Polygon"],
paint: {
"fill-outline-color": "red",
"fill-color": "red",
"fill-opacity": 0.2
}
});
Couple of observations that I had:
MultiPolygon isn't a valid filter option.
The server that is hosting GeoJSON doesn't allow cross origin requests so you'd have to re-host.
The GeoJSON isn't in EPSG:4326 which is the only coordinate system supported by mapboxgl-js so you'd have to project the geojson to EPSG:4326. I used ogr2ogr2 for that and the command is.
ogr2ogr DeoriaBoundary1.geojson -t_srs "EPSG:4326" DeoriaBoundary.geojson
A layer of type fill must provide fill-color paint property.
To pass URL to source, you'd say "data": "https://domain.tld/url-to-geojson" instead of url property.
You can see all of this in action here: https://codepen.io/manishraj/full/jONzBEK
I have a GeoJSON object, and I want to get its bounds without adding it to the map, similarly to what I can get with L.polygon().getBounds().
Is there a way to do this easily?
Perhaps there is a straightforward conversion of the L.geoJSON object to L.polygon?
Once you parse your GeoJSON object through L.geoJSON factory so that it builds a Leaflet GeoJSON layer group (which extends a Feature Group), you can have Leaflet compute the bounds of its child layers (features) using the group's getBound() method, without needing to add the group to a map.
var map = L.map('map').setView([48.86, 2.35], 11);
var geojsondata = {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [2.34, 48.86]}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [2.36, 48.86]}}]};
var geojsongroup = L.geoJSON(geojsondata);
//geojsongroup.addTo(map);
alert(geojsongroup.getBounds().toBBoxString());
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet-src.js"></script>
<div id="map" style="height: 200px"></div>
I am attempting to create a simple heatmap from a feature collection of points using leaflet's heatmap plugin. After successfully getting the json data from an ajax call, I create an empty coords array and push coordinates from each feature.
However, this method does not work and neither does the geojson2heat function. There are no errors in the console. What am I doing wrong and does anyone know of a workaround?
var map = L.map('map').setView([50.0647, 19.9450], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX("newmap.geojson");
coords = [];
function onEachFeature(feature, layer) {
coords.push(feature.geometry.coordinates);
};
L.GeoJSON(geojsonLayer, {
onEachFeature: onEachFeature
})
var heat = L.heatLayer(coords).addTo(map);
The structure of the geojson is standard:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "st_x": 19.952030181884801, "st_y": 50.055513141929701 }, "geometry": { "type": "Point", "coordinates": [ 19.952030181884801, 50.055513141929701 ] } },
{ "type": "Feature", "properties": { "st_x": 18.672015, "st_y": 50.287181666666697 }, "geometry": { "type": "Point", "coordinates": [ 18.672015, 50.287181666666697 ] } },
I am mostly doing the same as you but with Mapbox, which is based on Leaflet.
The problem I had is that the latitude and longitude coordinates of the GeoJSON were reversed. There were no errors on console either- points were just not showing on map. So, you need:
"coordinates": [ longitude, latitude ]
Hope that's the issue.
I am new to leaflet js
Reading the geojson section of leaflet js web site.
A quick question, coordinates in the geojson format, is it same as the lay/lng, which we can get from google map ?
Jimmy
yes but you have to invert lat and lng.
For example if you click on Paris you will get following coordinates with GoogleMap: 48.857031, 2.346526
If you generate some geojson with http://geojson.io/ you will get:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
2.349529266357422,
48.856414043180365
]
}
}
]
}
Also note that GoogleMap only handles 6 decimals (which is ample)
I have a Mapbox GL map with a single layer and multiple markers on that layer, I am trying to update a specific marker, so I am using setData in order to update only one marker but setData will reset the whole layer markers to add only that I am trying to update as the single marker on the whole layer, thus removing all old markers.
By trying to add multiple markers in GEOJson format as an array of GEOJson objects as shown below I get an error:
Uncaught Error: Input data is not a valid GeoJSON object.
code:
map.getSource('cafespots').setData([{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [31.331849098205566, 30.095422632059062]
},
"properties": {
"marker-symbol": "cafe"
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [31.39, 30.10]
},
"properties": {
"marker-symbol": "cafe"
}
}]);
Will appreciate it so much if someone can please help by telling me what I am doing wrong / missing here, thanks
setData expects a complete GeoJSON object (not just it's features) or a url pointing to a GeoJSON object.
You'll need to manage the state of the GeoJSON in your code and update the entire object via setData when a change is made.
var geojson = {
"type": "FeatureCollection",
"features": []
};
map.on('load', function() {
map.addSource('custom', {
"type": "geojson",
"data": geojson
});
// Add a marker feature to your geojson object
var marker {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [0, 0]
}
};
geojson.features.push(marker);
map.getSource('custom').setData(geojson);
});
https://www.mapbox.com/mapbox-gl-js/example/measure/ is a good example that demonstrates this behaviour.