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)
Related
Trying to place the boundaries of 42 countries to the map with Choropleth Leaflet. Apparently, the data that I have only had lat and long for each country and not the list of coordinates. How would I add polygon coordinates to my existing data? Or is there an API I can use for that? Research brought me nowhere.
my data
"type": "Feature",
"properties": {
"country": "Austria",
"points": 89.19089810712848,
"price": 31.192106322996377
},
"geometry": {
"type": "Polygon",
"coordinates": [
13.199959,
47.2000338
]
}```
If you need rough country border coordinates, you can search for "GeoJSON world", there are a few convenient sources available.
For example https://geojson-maps.ash.ms/, https://github.com/simonepri/geo-maps or https://github.com/johan/world.geo.json
Can the Mapbox GL API get geojson data to external .geojson file?
I use the Mapbox GL API for maps. The user draws the polygon, and send it to contact form in geojson code
example:
{ "type": "FeatureCollection", "features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
27.66357421875,
48.48748647988415
],
[
37.79296875,
48.004625021133904
] }
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 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.
I have to draw a line between 2 or more points (markers). The coordinates are in a GeoJSON file (attached). I tried to make an assignment for the properties: these are "node worker" a point of "Master" and the other and "knot workers" with connecting the "master".
but has not worked and that's why I need your help ... How can I implement it?
{"type": "FeatureCollection", "features": [
{"type": "Feature","properties": {"id":"1","name":"Berlin","wert":"","pc":"master"},"geometry": {"type": "Point","coordinates": [13.523563700000068,52.4909447]}},
{"type": "Feature","properties": {"id":"2","name":"Hamburg","wert":"0","pc":"wn"},"geometry": {"type": "Point","coordinates": [9.99368179999999,53.5510846]}},
{"type": "Feature","properties": {"id":"3","name":"München","wert":"128","pc":"wn"},"geometry": {"type": "Point","coordinates": [11.581980599999952,48.1351253]}},
{"type": "Feature","properties": {"id":"4","name":"Frankfurt am Main","wert":"-128","pc":"wn"},"geometry": {"type": "Point","coordinates": [8.682126700000026,50.1109221]}}
]}
Add LineString features to your featurecollection: http://geojson.org/geojson-spec.html#id3 Leaflet's L.GeoJSON layer will convert them to Polylines: http://leafletjs.com/reference.html#polyline
If changing your GeoJSON file isn't an option. You could write logic which loops over the features in your layer, then separate the master and clients and then draw polylines between them.
After comment:
You've supplied a GeoJSON with the coordinates of the master PC. 13.523563700000068,52.4909447 You want to connect it via Polyline with a client PC. I'll pick the coordinates of the first one: 9.99368179999999,53.5510846. So you add another feature to your GeoJSON collection, a polyline:
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[13.523563700000068,52.4909447], // Master PC coordinates
[9.99368179999999,53.5510846] // WN1 Coordinates
]
},
"properties": {
"label": "From Master to First client"
}
}
And you're gold. Here's a working example: http://plnkr.co/edit/Ndasgy?p=preview