Leaflet: Create layers from geojson "properties"? - leaflet

I've new to mapping, and I've started creating my map following the documentations and tutorials on http://leafletjs.com. So far so good, I've manage to create a map, add a lot of geosjon data from geojson.io that dislay "popupContent" in a popup. And it works.
But I can't understand how create a few layers to sort all those markers. What I want is too use the "properties" to do it. I have properties named "status" with a values "done", "new" and "active".
Like so:
"type": "Feature",
"properties": {
"popupContent": "content",
"marker-color": "#FFFFFF",
"title": "title of project",
"status": "active
Is that possible? To create a 3 layers based on "status" properties?
If you need the html file to look at, say so and I can add it.
Thanks

You can use the filter option of L.geoJson to create separate layers based on the feature properties. Just specify a function that will return true for the features you want included in each layer:
var activeLayer = L.geoJson(yourGeoJson, {
filter: function(feature, layer) {
return (feature.properties.status === "active");
}
}).addTo(map);
var newLayer = L.geoJson(yourGeoJson, {
filter: function(feature, layer) {
return (feature.properties.status === "new");
}
}).addTo(map);
var doneLayer = L.geoJson(yourGeoJson, {
filter: function(feature, layer) {
return (feature.properties.status === "done");
}
}).addTo(map);

Related

Displaying styles stored in a GeoJson File and making lines appear as lines instead of markers

I've been trying to get Leaflet to display a geojson file using the styles described in the geojson file, and I can't get it to work. The geojson below shows that I've got styles in there - OGR style pen etc, but I've tried extracting them using style function(styles) {return {colour : data.properties.pen}}, but it gives me an error on the console - but not enough errors to match the number of layers - so I can understand that some layers may not have a "pen" property, but none of the layers are coming up with the any differences.
"features": [
{ "type": "Feature", "properties": { "Layer": "Buildings", "SubClasses": "AcDbEntity:AcDb2dPolyline", "EntityHandle": "2ABF", "OGR_STYLE": "PEN(c:#ff7f00,p:"1.2g 0.72g 0.12g 0.72g")" }, "geometry": { "type": "LineString", "coordinates": [ [ -1.386274792183286, 54.907452998026585, 0.0 ], [ -1.386201193400163,
In fact, as the above geojson shows, it's actually a geometry - but all that's showing up is a marker, which is my second problem. Can anyone point me to some example codes or anything which may help me?
$.getJSON(address, function(data) {
//add GeoJSON layer to the map once the file is loaded
layer[i] = L.geoJson(data, {style: function(styles) {
return {color: data.properties.pen,
weight: data.properites.weight
};
onEachFeature: onEachFeature
}
}).addTo(map);
Thanks.
Change your code to:
function onEachFeature(feature, layer) {
if (feature.properties && layer instanceof L.Path) {
layer.setStyle({
color: feature.properties.pen,
weight: feature.properites.weight
});
}
}
$.getJSON(address, function(data) {
//add GeoJSON layer to the map once the file is loaded
layer[i] = L.geoJson(data, {
onEachFeature: onEachFeature
}).addTo(map);
});
Leaflet GeoJson Tutorial

Mapbox - Pointer on click not defined

I am trying to add a popup to my map icons in Mapbox GL JS. So far I have been unsuccessful.
When I create a layer, in the layer's data, I have specified several properties. However when I try and add a popup to the icon, all of the properties are not present. Attempting to access them simply returns undefined.
Adding the layer:
function addRedAirports() {
map.addSource('hoggitRed', {
type: 'geojson',
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 10, // Radius of each cluster when clustering points (defaults to 50)
data: redAirportArray[0]
});
map.addLayer({
"id": 'reds',
"type": "symbol",
"source": "hoggitRed",
"layout": {
"icon-image": "redIcon",
"icon-size": 0.075,
"icon-anchor": "bottom",
"icon-allow-overlap": true
}
});
Here is the contents of the data (redAirportArray[0]). I am looping through an api to get this data.
When I pass this data to mapbox, the properties are complete and correct. However when I try access them for a popup, I get undefined. Console logging the mapbox layer shows none of the inputted properties present..
(I have condensed this code slightly.. every loop I create a feature and then push it to the feature collection. I combined the two in this snippet for the sake of simplicity)
let redAirportArray = [{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": { //SETTING THE PROPERTIES
"test": 'test',
"ID": airportsRed[x].Id,
"team": airportsRed[x].Coalition
},
"geometry": {
"type": "Point",
"coordinates": [airportsRed[x].LatLongAlt.Long, airportsRed[x].LatLongAlt.Lat]
}
}]
Adding a popup on click
map.on('click', 'reds', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
let team = e.features[0].properties.ID;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(team)
.addTo(map);
});
Thanks in advance and I hope you can help!
With the way your layer is currently being added, you're looking for properties in the wrong location. e.features[0] is not defined since e is the feature you just clicked. Your pop up code should look something like this:
map.on('click', 'reds', function (e) {
var coordinates = e.geometry.coordinates.slice(); // Changed
let team = e.properties.ID; // Changed
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(team)
.addTo(map);
});

in-place Update Leaflet GeoJSON feature

I was hoping that GeoJSON.addData() would return the newly created subLayer of the GeoJSON object, but it does not. Why Do I need something like this?
(currently using Leaflet 1.0Beta2)
I am using Leaflet GeoJson to show live data in a GeoJSON (point, line, polygon). It is a CRUD interface (Create, Update and Delete). I receive WebSocket messages with GeoJSON data, each one with a GUID.
I the case of a CREATE I just do a GeoJSon.AddData() to the appropriate layer.
But for the UPDATE and DELETE I want a handle for the layer that was added to the GeoJSON so that I can update its location, or update the Geometry. addData is not giving me this handle. And it is really hard to get it from onEachFeature() or from pointToLayer()
Currently, I do have a way that works but ugly. I have to do is search the entire layer with GeoJSon.eachLayer(fn)
whenever an update or delete occurs. It seems a bit expensive.
{even if Leaflet is not truly engineered for this live r/t display of data, it is working, and it seems sad if you cannot use it for watching a lot of sensor data, IoT) as we are doing.
this.delete = function (layerName, feature) {
if (!(layerName in self.myLayers)) {
alert("live.display: Missing Layer: " + layerName);
return;
}
var layerInfo = Live.myLayers[layerName];
var base = layerInfo.layer;
var id = feature.properties.objectID;
this.find(layerName, id, function (layer) {
this.removeLayer(layer);
Tools.debug(16, "live.delete:", "killed object: " + id);
});
}
this.find = function (layerName, id, action) {
var base = Live.myLayers[layerName].layer;
base.eachLayer(function (feature) {
if (!("objectID" in feature.feature.properties)) { return; }
var objectID = feature.feature.properties.objectID;
if (objectID == id) {
action.call(base, feature);
}
});
}
Instead (or in parallel) of "merging" all created GeoJSON features into a single Leaflet GeoJSON layer group (which you do with addData), why not creating first each feature in its own Leaflet GeoJSON layer, so that it gives you the handle you are looking for (then you could simply record this handle in an object / mapping with the key being your objectID for example)?
If desired, you could even still merge the individual layers into your single GeoJSON layer group after that.
var myGeoJsonLayerGroup = L.geoJson().addTo(map);
var myFeaturesMap = {};
function addNewFeatureToGeoJsonLayerGroup(newGeoJsonData) {
var newGeoJSONfeature = L.geoJson(newGeoJsonData);
myFeaturesMap[newGeoJsonData.properties.objectID] = newGeoJSONfeature;
myGeoJsonLayerGroup.addLayer(newGeoJSONfeature);
}
function updateFeature(updatedGeoJsonData) {
var updatedFeature = myFeaturesMap[updatedGeoJsonData.properties.objectID];
updatedFeature.clearLayers(); // Remove the previously created layer.
updatedFeature.addData(updatedGeoJsonData); // Replace it by the new data.
}
function deleteFeature(deletedGeoJsonData) {
var deletedFeature = myFeaturesMap[deletedGeoJsonData.properties.objectID];
myGeoJsonLayerGroup.removeLayer(deletedFeature);
}
Demo (not using GeoJSON): http://jsfiddle.net/ve2huzxw/94/
EDIT:
A slightly more simple solution would be to store the reference to each individual layer through the onEachFeature function of the GeoJSON layer group:
var myFeaturesMap = {};
var myGeoJsonLayerGroup = L.geoJson({
onEachFeature: function (feature, layer) {
myFeaturesMap[feature.properties.objectID] = layer;
}
}).addTo(map);
function addNewFeatureToGeoJsonLayerGroup(newGeoJsonData) {
myGeoJsonLayerGroup.addData(newGeoJsonData);
}
function updateFeature(updatedGeoJsonData) {
deleteFeature(updatedGeoJsonData); // Remove the previously created layer.
addNewFeatureToGeoJsonLayerGroup(updatedGeoJsonData); // Replace it by the new data.
}
function deleteFeature(deletedGeoJsonData) {
var deletedFeature = myFeaturesMap[deletedGeoJsonData.properties.objectID];
myGeoJsonLayerGroup.removeLayer(deletedFeature);
}
If you want to store references to the actual layers being created, you can access them from the layeradd event on your L.GeoJSON instance:
var geojson = new L.GeoJSON().on(
'layeradd', function (e) {
console.log(e.layer);
}
).addTo(map);
// This addData call will fire the handler above twice
// because it adds two features.
geojson.addData({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [90, 0]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-90, 0]
}
}]
});
If someone still looking for another short method to update GeoJSON, you can try something like this,
//function to clear the previous geojson feature
function clearMap() {
map.eachLayer(function(layer){
if(layer.myTag && layer.myTag === 'previousLayer'){
lmap.removeLayer(layer);
}
});
}
function geojsonUpdate(geojsonData){
var geojsonLayer = L.geoJson(geojsonData, {
onEachFeature: function (feature, layer) {
layer.myTag = 'previousLayer'
);
},
});
geojsonLayer.addTo(lmap);
lmap.fitBounds(geojsonLayer.getBounds());
}
//function call
clearMap();
geojsonUpdate(data);

geojson ignored when using mapbox

why does mapbox ignore my geoJson marker-symbol, marker-color, and marker-size? if for whatever reason it ignores, how do you set either?
sample geoJson:
"properties": {
"id": 578202,
"name": "University of North Carolina at Charlotte",
"marker-symbol": "marker",
"marker-color": "#ff8888",
"marker-size": "small",
"description": 1
}
script:
$.getJSON(url, function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function(feature, layer) {
var popupContent = feature.properties.name +'project(s)';
layer.bindPopup(popupContent, {
closeButton: true,
minWidth: 225
});
}
});
var map = L.mapbox.map('map', '', {
attributionControl: false
});
geojson.addTo(map);
});
That's happening because L.GeoJSON doesn't automaticly know that you want to set the marker options, so if it encounters a Point feature, it simply adds a default marker. If you want to do something special with point features, you can use the pointToLayer function of L.GeoJSON, check the following example:
var geoJsonLayer = L.geoJson(geoJson, {
pointToLayer: function (feature, latLng) {
return L.marker(latLng, {
icon: L.mapbox.marker.icon(feature.properties)
});
}
}).addTo(map);
The only problem with this is that it also adds all the other properties as options of the markericon. Personally i would write some logic so that only the relevant properties get added to the icon options.
Here's a working example on Plunker: http://plnkr.co/edit/3OJPXxOYdzX8mSnjEb90?p=preview
As tmcw pointed out in the comments (see below): you could use L.mapbox.featureLayer, it does exactly what you're trying to accomplish with L.GeoJSON without having to resort to the pointToLayer method i described above and it only uses the appropriate properties. It can even load your data for you so you can do away with jQuery's $.getJSON. Win/win situation if you ask me. You can simply do the following and you're set:
L.mapbox.featureLayer(url).addTo(map);
Here's the working example of this on Plunker: http://plnkr.co/edit/Og6tuYDIkTX7ftedoR3C?p=preview

Load geoJson in MapBox for editing with Leaflet.Draw

I try to load geoJson data in Mapbox and edit it with the plugin Leaflet.Draw
Here is an example : fiddle
var featureGroup = L.featureGroup().addTo(map);
var geojson = {
"type": "FeatureCollection",
"features": [ ........... ]
}
L.geoJson(geojson).addTo(featureGroup);
When i click to the edit button, i have an error :
Uncaught TypeError: Cannot read property 'enable' of undefined
Object seems to be editable but i can't modify it.
What is the correct way to add geojson object in mapbox draw layer ?
I have found the solution :
L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
featureGroup.addLayer(layer);
}
});
Here is working example using CoffeeScript:
drawnItems = new L.FeatureGroup()
map.addLayer drawnItems
layers = L.geoJson geojson
layers.eachLayer (layer) => drawnItems.addLayer layer
I had to do the following to get mine to work (in addition to the above answers):
L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
if (layer.getLayers) {
layer.getLayers().forEach(function (l) {
featureGroup.addLayer(l);
})
} else {
featureGroup.addLayer(layer);
}
}
});
This was for a geojson that was a "Feature" type.