I have a map which loads a GeoJSON containing two features (lines). I would like to use Leaflet Elevation plugin to display an elevation profile for each of those lines. The problem with my code is that when I click a feature, there is no data added to the elevation profile.
var map = L.map('map').setView([44.635, 22.653], 11);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
function addData(e) {
var el = L.control.elevation();
el.addData(e);
map.addControl(el);
}
function onEachFeature(feature, layer) {
layer.on({
click: addData
});
}
var trails = new L.GeoJSON.AJAX('https://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/map.geojson', {
onEachFeature: onEachFeature
}).addTo(map);
Here's a JSFiddle of my work: http://jsfiddle.net/pufanalexandru/eaok0Lnz/3/
To anyone who might be interested, I think I found a way to achieve this:
var trails = new L.GeoJSON.AJAX('https://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/map.geojson', {
onEachFeature: function onEachFeature(feature, layer) {
layer.on({
click: function () {
el.clear();
el.addData(feature);
}
});
}
}).addTo(map);
Related
I am starting with leaflet and wanted to display more information when clicking on a marker in a map using a sidebar.
I use the php call where the geoJeson called allande_geoJson is generated with all the information I need from my database:
In the example I'm using, a maker is generated so that when you click on it, the information is displayed in the sidebar:
var marker = L.marker([51.2, 7]).addTo(map).on('click', function () {
sidebar.toggle();
});
I wanted to enter the makers directly from my geoJeson and I am trying various ways with no success, such as:
var marker= L.marker(new L.GeoJSON(allande_geoJson)).addTo(map).on('click', function () {
sidebar.toggle();
});
any ideas?
The Markers are loaded automatically when you put the geojson data in the L.geoJSON() layer.
With onEachFeature you add the click event to each marker.
function onEachFeature(feature, layer) {
layer.on('click', function () {
sidebar.toggle();
});
}
L.geoJSON(allande_geoJson, {
onEachFeature: onEachFeature
}).addTo(map);
I have Point, MultiPolygon, and Linestring features in a single FeatureCollection. I want to style Points with circleMarker(), and the others normally. I add Points to an idToFeature object for manipulation with JavaScript, but can't add the non-point features.
Using Leaflet 1.3.3, if I use pointToLayer:, Points are styled fine, and the other types do render, with a default blue (don't know why, as they aren't points). I have tried using onEachFeature: instead, and can style non-points that way, but can't figure how to generate circleMarkers for points.
What I have
(can't style MultiPolygons, or add them to my idToFeature object for JS manipulation)
// geom is an array of features inc. Point, MultiPolygon, Linestring
renderPlaces = function(geoms) {
data = {"type":"FeatureCollection","features":geoms}
idToFeature = {}
mappy.createPane('placePane');
mappy.getPane('placePane').style.zIndex = 200;
features = L.geoJSON(data, {
pane: 'placePane',
pointToLayer: function (feature, latlng) {
identifier = feature.properties.id;
if(feature.type=='Point'){
marker = L.circleMarker(latlng, styles.place_default)
.bindPopup(feature.properties.title+' (id:'+identifier+')');
// add to array for programmatic selection
idToFeature[identifier] = marker
return marker
}
}
}).addTo(map);
}
What I tried (one take anyway)
features = L.geoJSON(data, {
style: function (feature) {
if(feature.type=="Point"){
return {color: "#009900"};
} else {
return {color: "#000099"};
}
}
onEachFeature: function(feature, layer) {
if(feature.type == 'Point'){
console.log('point', feature)
marker = L.circleMarker(latlng, styles.place_default)
return marker
}
}
}).addTo(map);
I'd prefer not to break the GeoJSON into separate type-specific FeatureCollections, feel certain I shouldn't have to...but how?
I cobbled a solution. It doesn't seem ideal, but works: use both pointToLayer and onEachFeature, one after the other.
features = L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
count_features +=1;
identifier = feature.properties.whgid;
if(feature.type=='Point'){
marker = L.circleMarker(latlng, styles.marker_default
).bindPopup(feature.properties.title+' (whg id:'+identifier+')');
// add to array for selection
idToFeature[identifier] = marker
return marker
}
},
onEachFeature: function(feature,layer) {
identifier = feature.properties.whgid;
if(feature.type != 'Point'){
layer.setStyle(styles.default)
idToFeature[identifier] = layer
}
}
}).addTo(map);
I have the following code which fetches some remote GeoJSON from an API and displays the results on a Leaflet map:
<script>
// Center the map
var map = L.map('map').setView([54.233669, -4.406027], 6);
// Attribution
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=REMOVED', {
attribution: 'Map © OpenStreetMap',
id: 'mapbox.streets'
}).addTo(map);
// Create an empty layergroup for the data
var LayerUTMGroundHazards = L.layerGroup();
var LayerUTMAirspace = L.layerGroup();
// Style the features
function setStyle(feature) {
return {
fillColor: feature.properties.fillColor,
color: feature.properties.strokeColor,
fillOpacity: feature.properties.fillOpacity,
opacity: feature.properties.strokeOpacity
};
}
// Build Guardian UTM
function getGuardianUTMdata() {
// Clear the current Layer content
LayerUTMGroundHazards.clearLayers();
LayerUTMAirspace.clearLayers();
// Define what we want to include
function FuncGroundHazards(feature) {
if (feature.properties.category === "groundHazard") return true
}
function FuncAirspace(feature) {
if (
(feature.properties.category === "airspace" || feature.properties.category === "airport")
&& feature.properties.detailedCategory !== "uk:frz"
) return true
}
// Build the layers
fetch("https://example.com/json?n=" + map.getBounds().getNorth() + "&e=" + map.getBounds().getEast() + "&s=" + map.getBounds().getSouth() + "&w=" + map.getBounds().getWest(), { headers: { 'Authorization': 'REMOVED', 'X-AA-DeviceId': 'mySite' } })
.then(function (responseGuardianUTM) { return responseGuardianUTM.json() })
.then(function (dataGuardianUTM) {
// Create Layer: Ground Hazards
var featuresUTMGroundHazards = L.geoJson(dataGuardianUTM, {
filter: FuncGroundHazards,
style: setStyle,
pointToLayer: function (feature, latlng) { return L.marker(latlng, { icon: L.icon({ iconUrl: feature.properties.iconUrl, iconSize: [25, 25], }), }) },
onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.name); },
});
// Add the L.GeoJSON instance to the empty layergroup
LayerUTMGroundHazards.addLayer(featuresUTMGroundHazards).addTo(map);
});
// other layers are here (removed from this example)
}
// Update the Guardian UTM layer if the map moves
map.on('dragend', function () { getGuardianUTMdata(); });
map.on('zoomend', function () { getGuardianUTMdata(); });
// Layer controls
var layerControl = new L.Control.Layers(null, {
'Airspace Restrictions': LayerUTMAirspace,
'Ground Hazards': LayerUTMGroundHazards
// other layers are here (removed from this example)
}).addTo(map);
</script>
The problem is that every time the map is moved or zoomed, all of the Layer checkboxes are reset to Checked again, regardless of how many were checked before the map moved. They do not honour / remember their state when the map moves.
Given my code above, how can I store or preserve the checkbox state for each of the multiple Layers that I have so they are not reset every time the map is moved?
EDIT:
Here is a working fiddle. Remove the checkbox from the 'Ground Hazards', then move or zoom the map, you will see how it puts a tick back in the box again
https://jsfiddle.net/hdwz1b6t/1/
You're (re-)adding LayerUTMGroundHazards every time. This line here...
// Add the L.GeoJSON instance to the empty layergroup
LayerUTMGroundHazards.addLayer(featuresUTMGroundHazards).addTo(map);
...is not only adding featureUTMGroundHazards to layerUTMGroundHazards, it's also (re-)adding layerUTMGroundHazards to the map.
And quoting from https://leafletjs.com/examples/layers-control/ :
The layers control is smart enough to detect what layers we’ve already added and have corresponding checkboxes and radioboxes set.
So when you do LayerUTMGroundHazards.addTo(map);, the checkboxes reset.
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
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.