I'm using the 1:50m Cultural Vectors shape file from naturalearthdata.com.
I use ogr2ogr to create a geoJson file with the following command:
ogr2ogr -f GeoJSON geo_world_50m.json ne_50m_admin_0_countries.shp
I then create a topoJson file with this command:
topojson --id-property iso_n3 -p name=admin -p name -p iso_a3=iso_a3 -p iso_a3 -o topo_world_50m.json geo_world_50m.json
Once I have my topoJson file, I load it in to Leaflet:
$.getJSON('topo_world_50m.json', function (data) {
var country_geojson = topojson.feature(data, data.objects.geo_world_50m);
country_layer.addData(country_geojson);
});
I've tried the 1:50m file as well as the 1:10m file from Natural Earth. Both give me this section of Russia that is reversed at the Finland border.
Any ideas how to address this? Thanks
So... this is a known issue on leaflet, I solved this way:
function onEachShapeFeature(feature, layer){
var bounds = layer.getBounds && layer.getBounds();
// The precision might need to be adjusted depending on your data
if (bounds && (Math.abs(bounds.getEast() + bounds.getWest())) < 0.1) {
var latlongs = layer.getLatLngs();
latlongs.forEach(function (shape) {
shape.forEach(function (cord) {
if (cord.lng < 0) {
cord.lng += 360;
}
});
});
layer.setLatLngs(latlongs);
}
}
var countries = L.geoJson(data, {
onEachFeature: onEachShapeFeature,
});
I know that is hacky... but was the best way I found.
What happens if you use the geoJson? For admin 0 level geographies like this (country level) a geoJson might suffice in terms of detail. It sounds like something is being lost when you go from geo -> topo?
Related
I have displayed the the result markers for the leaflet-knn on the map with following code:
const myloc = new L.LatLng(13.7433242, 100.5421583);
var gjLayer = L.geoJson(testCities, {
onEachFeature: function(feature, layer) {
content = "<b>Name:</b> " + feature.properties.name;
layer.bindPopup(content);
}
});
var longitude = myloc.lng,
latitude = myloc.lat;
var res = leafletKnn(gjLayer).nearest(
[longitude, latitude], 5, distance);
for (i = 0; i < res.length; i++) {
map.addLayer(res[i].layer);
}
Now I want to change the color of this marker that is added or I want to change the icon.
Can anybody tell me how can I do?
Leaflet-knn is agnostic when it comes to the representation of the results - it relies on the existing L.Layers: it takes a L.GeoJSON as an input and then iterates through all its members in order to fetch all their coordinates (in the case of polylines and polygons) and then store a reference to the L.Layer for each of its coordinates.
The results of a leaflet-knn search include the original L.Layer from the L.GeoJSON that was passed at instantiation time.
Either symbolize your GeoJSON afterwards, as explained in the Leaflet tutorials, or create new markers/symbols for the results after each query.
Right now your code is relying on the default symbolization of GeoJSON data (instantiate a L.Marker with a L.Icon.Default for points). I suggest the approach of displaying your L.GeoJSON in the map to ensure that it looks like you want it to (even if it's a partial set of the data), then implementing the leaflet-knn search.
I am exporting Google Directions routes as KML and displaying them on a Mapbox map by reading them with Omnivore and adding them to the map,
The Google KML stores each route as two Places (the start and end points) and one LineString (the route). In Mapbox I would like to show only the routes, that is to filter out the markers somehow. I'm displaying markers out of my own database and the Google markers clutter it up.
Here is my code. I change the styling of the LineStrings just to show that I can, but do not know what magic call(s) to make to not display the Points.
Thanks.
runLayer = omnivore.kml('data/xxxx.kml')
.on('ready', function() {
var llBnds = runLayer.getBounds();
map.fitBounds(llBnds);
this.eachLayer(function (layer) {
if (layer.feature.geometry.type == 'LineString') {
layer.setStyle({
color: '#4E3508',
weight: 4
});
}
if (layer.feature.geometry.type == 'Point') {
//
// Do something useful here to not display these items!!
//
}
});
})
.addTo(map);
Welcome to SO!
Many possible solutions:
Most straight forward from the code you provided, just use the removeLayer method on your runLayer Layer Group when you get a 'Point' feature.
Cleaner solution would be to filter out those features before they are even converted into Leaflet layers, through a custom GeoJSON Layer Group passed as 3rd argument of omnivore.kml, with a specified filter option:
var customLayer = L.geoJSON(null, {
filter: function(geoJsonFeature) {
// my custom filter function: do not display Point type features.
return geoJsonFeature.geometry.type !== 'Point';
}
}).addTo(map);
var runLayer = omnivore.kml('data/xxxx.kml', null, customLayer);
You can also use the style and/or onEachFeature options on customLayer to directly apply your desired style on your LineString.
I am trying to draw the path of a flight using leafletjs and geojson. I'll be getting the geometry from a stream.
this is what I have done so far:
let index = 0;
let geoJsonLayer;
let intervalFn = setInterval(function () {
let point = trackData.features[index++];
if(point) {
let coords = point.geometry.coordinates;
coords.pop();
coords.reverse();
geoFeature.geometry.coordinates.push(coords);
if(map.hasLayer(geoJsonLayer)) map.removeLayer(geoJsonLayer);
geoJsonLayer = L.geoJson(geoFeature, {
onEachFeature: (feature, layer) => {
const content = feature.properties.title;
layer.bindPopup(content);
}
});
geoJsonLayer.addTo(map);
// console.log(coords);
} else {
clearInterval(intervalFn);
}
}, 100);
setInterval is to simulate the part whereby I get the geometry from a stream.
now when a user clicks on the path I need to show some properties of the path, and I am trying to use the onEachFeature for that, but its not working correctly.
I suspect its because I am removing the layers (I did this to improve the performance)
Is there any other better ways to do what I am trying to achieve ?
You should probably try addLatLng()
Adds a given point to the polyline.
Your geoFeature sounds to be a single Feature, so your geoJsonLayer will contain a single layer (polyline):
let myPolyline;
geoJsonLayer.eachLayer(function (layer) {
myPolyline = layer; // Will be done only once actually.
});
// When you receive a new point…
myPolyline.addLatLng([lat, lng]);
With this you should not have to remove your layers every time.
The popup should therefore stay open, if it is shown.
Demo: https://jsfiddle.net/3v7hd2vx/265/ (click on the button to add new points)
my code:-
jQuery.sap.require( "sap.ui.vbm.AnalyticMap");
var oMap = new sap.ui.vbm.AnalyticMap({
width:"100%",
height: '100%',
plugin: false,
regions: {
template: new sap.ui.vbm.Region({
code: 'NA',
color: '#fff',
})
}
});
return new sap.m.Page({
title: "Maps",
content: [oMap]
});
I am trying to highlight a region on the map, but may be I am not following the API properly, any help is appreciated
You need to have the GeoJSON files for your region for them to be shown on the Map. The GeoJSON files are searched in the below places, in the given sequence as mentioned here.
server:port/sap/bc/vbi/geojson/L0.json
./media/analyticmap/L0.json
You will have to upload a GeoJSON file in the MIME repository on your gateway system. You can find many sources for GeoJSON on the Internet.
http://www.naturalearthdata.com/downloads/
http://www.gadm.org/country
However many of these sources will provide you with ShapeFiles. These contain geospatial vector data for defining regions on a map.
You will have to convert your shapefiles to geojson with GDAL or if you use QGIS(like me), GDAL will also installed alongside.
GDAL: http://www.gdal.org/
QGIS: http://www.qgis.org/en/site/forusers/download.html
You can run the below commands to converting a Shape File to GeoJSON
ogr2ogr -f "GeoJSON" target.json source.shp
Or if you would also like to define CRS
ogr2ogr -f "GeoJSON" -s_srs EPSG:3857 -t_srs EPSG:4326 target.json source.shp
You can create your own regions, using this geojson.io
Once you have your GeoJSON file, you can add them to the MIME repository or you can provide a path in your application to the target GeoJSON
sap.ui.vbm.AnalyticMap.GeoJSONURL = "/model/GeoJSON.json";
var oMap = new sap.ui.vbm.AnalyticMap({
width:"100%",
height: '100%',
plugin: false,
regions: {
template: new Region({
code: 'NA',
color: 'rgba(184,225,245,1.0)',
})
}
});
You can also refer to this article.
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
I am aware of bringToFront(), but it does not meet my requirements. I would like to set the zIndex dynamically based on properties.
Leaflet has the method setZIndex(), but this apparently does not work for geoJson layers:
https://jsfiddle.net/jw2srhwn/
Any ideas?
Cannot be done for vector geometries.
zIndex is a property of HTMLElements, and vector geometries (lines and polygons) are rendered as SVG elements, or programatically as <canvas> draw calls. Those two methods have no concept of zIndex, so the only thing that works is pushing elements to the top (or bottom) of the SVG group or <canvas> draw sequence.
Also, remind that L.GeoJSON is just a specific type of L.LayerGroup, in your case containing instances of L.Polygon. Furthermore, if you read Leaflet's documentation about the setZIndex() method on L.LayerGroup:
Calls setZIndex on every layer contained in this group, passing the z-index.
So, do L.Polygons have a setZIndex() method? No. So calling that in their containing group does nothing. It will have an effect on any L.GridLayers contained in that group, though.
Coming back to your problem:
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
Looks like the thing you're looking for is map panes. Do read the map panes tutorial.
This is one of the reason for the implementation of user defined "panes" in Leaflet 1.0 (compared to versions 0.x).
Create panes: var myPane = map.createPane("myPaneName")
If necessary, set the class / z-index of the pane element: myPane.style.zIndex = 450 (refer to z-index values of built-in panes)
When creating your layers, specify their target pane option: L.rectangle(corners, { pane: "myPaneName" })
When building through the L.geoJSON factory, you can loop through your features with the onEachFeature option to clone your layers with specified target pane.
Demo: https://jsfiddle.net/3v7hd2vx/90/
For peoples who are searching about Z-Index
All path layers (so all except for markers) have no z-index because svg layers have a fix order. The first element is painted first. So the last element is painted on top.
#IvanSanchez described good why zIndex not working.
You can control the order with layer.bringToBack() or layer.bringToFront().
With that code you have more options to control the order of the layers.
L.Path.include({
getZIndex: function() {
var node = this._path;
var index = 0;
while ( (node = node.previousElementSibling) ) {
index++;
}
return index;
},
setZIndex: function(idx) {
var obj1 = this._path;
var parent = obj1.parentNode;
if(parent.childNodes.length < idx){
idx = parent.childNodes.length-1;
}
var obj2 = parent.childNodes[idx];
if(obj2 === undefined || obj2 === null){
return;
}
var next2 = obj2.nextSibling;
if (next2 === obj1) {
parent.insertBefore(obj1, obj2);
} else {
parent.insertBefore(obj2, obj1);
if (next2) {
parent.insertBefore(obj1, next2);
} else {
parent.appendChild(obj1);
}
}
},
oneUp: function(){
this.setZIndex(this.getZIndex()+1)
},
oneDown: function(){
this.setZIndex(this.getZIndex()-1)
}
});
Then you can call
polygon.oneUp()
polygon.oneDown()
polygon.setZIndex(2)
polygon.getZIndex()
And now layergroup.setZIndex(2) are working