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);
Related
I'm a complete beginner when it comes to leaflet but i'm slowly but surely learning the ropes after an introduction course. I've read over the Leaflet documentation but i'm still having trouble combining a permanent toolTip (label) with a bindPopup on click.
I can find success in doing one OR the other but not both. See below for my current code that labels each feature of my geoJSON multipolygon. I would now also like to display feature attribute information from the geoJSON in a popup when that feature polygon is clicked.
var lyrNeighbourhoods= new L.GeoJSON.AJAX("data/Neigh_Demo1.geojson",
{style: {weight:1, fillOpacity:0.1},
onEachFeature: function (feature, layer) {
layer.bindTooltip(feature.properties.Neigh_Name, {direction:"center",permanent:true,
className: 'labelstyle'});
}
}).addTo(mymap);
I've been racking my brain over this for too long. Any help is appreciated.
In your onEachFeature option function, there is nothing stopping you from also attaching a popup to your Layer:
function (feature, layer) {
layer.bindTooltip(feature.properties.Neigh_Name, {
direction: "center",
permanent: true,
className: 'labelstyle'
});
layer.bindPopup("My popup content");
}
I am using the following leaflet plugin:
https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer
I am having issues adding a popup to the map when a user clicks on a point.
L.marker([pts[p].lat, pts[p].lng], {
icon: new L.DivIcon({
html: '<div>Test</div>'
})
}).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
The popup shows, but I am unable to get the actual flowmap lines to show up. Is there anyway to allow for a popup and to allow for the lines to show up underneath it?
You can use the fact that the CanvasFlowmapLayer extends L.GeoJSON
You just need to overload the method creating the marker and add your popup there ...
var oneToManyFlowmapLayer = L.canvasFlowmapLayer(geoJsonFeatureCollection, {
pointToLayer: function(geoJsonPoint, latlng) {
var marker = L.circleMarker(latlng);
return marker.bindPopup('' + latlng)
},
// et caetera
Check it out here: https://yafred.github.io/Leaflet.Canvas-Flowmap-Layer/docs/main/
I am loading a geojson file using leaflet's L.geoJSON() to display a map.
Initially i have attahced a popup with each feature.The popup shows a certain property "Count". The code is:
var geoJSON = new L.geoJson(var_name,{
onEachFeature: function(feature,layer){layer.bindPopup('Count :'+feature.properties.Count);},
style: applyStyle
}).addTo(map);
This code works fine.
After this, the user initiates an event and i make an ajax call and assign new values to the property "Count" of each feature. I also use the setStyle function so that the style is reassigned based on new values of "Count". Here is the code:
$.ajax({
type: 'GET',
url: 'new_data.json',
dataType: 'json',
success: function(data){
var i;
for(i=0;i<48;i++){
var_name.features[i].properties.Count = data[i];
}
geoJSON.setStyle(applyStyle);
}
});
The style changes work well but the popup still contains the old value for the property "Count".
There is so setPopUp function like setStyle. So how do i make the popUp change its value?
In other words, can we call the onEachFeature method again after the geoJSON layer has been loaded?
P.S.: I am not using same popup content for each feature. After i make the ajax call, i update the "Count" property of each feature. I want the pop-up for each feature to show the value of its new value of "Count" property.
What you're doing now is using the setStyle method of your L.GeoJSON layer, which when called, iterates all the features contained in the layer and calls the setStyle method of each feature. (If the feature has a setStyle method). Since there is no setPopup method in L.GeoJSON. (it's a very rare use case if you would want the same popup content on each feature) you'll have to iterate the features in your GeoJSON layer yourself and set the new content on the popup itself:
var geojsonLayer = new L.GeoJSON(geojsonCollection, {
'onEachFeature': function (feature, layer) {
layer.bindPopup('Initial content');
}
}).addTo(map);
geojsonLayer.eachLayer(function (layer) {
layer._popup.setContent('Updated content')
});
Here's an example on Plunker: http://embed.plnkr.co/uYHC8jZtgls351YhsmPS/preview
Using the each layer function as suggested by #iH8 , i was able to do this in the following way:
var j = 0; geoJSON.eachLayer(function (layer){
layer._popup.setContent("new count = " + var_name.features[j++].properties.Count);
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);
I am looking for solution to add filter (not checkbox) to my site. I have this code loading blank map from Mapbox and added Markers from JSON file. I was trying to add setFilter function, but probably I am using it wrong. I would like to filter items by category property from my JSON file.
<script>
L.mapbox.accessToken = '*************';
var baseLayer = L.mapbox.tileLayer('test****');
var markers = L.markerClusterGroup();
// CALL THE GEOJSON HERE
jQuery.getJSON("locations.geojson", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
// USE A CUSTOM MARKER
layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '004E90'}));
// ADD A POPUP
layer.bindPopup("<h1>" + feature.properties.title + "</h1><p>" + feature.properties.description + "</p><p><a href=' + feature.properties.website + '>" + feature.properties.website + "</a></p>");
layer.on('mouseover', function (e) {
this.openPopup();
});
layer.on('mouseout', function (e) {
this.closePopup();
});
}
});
markers.addLayer(geojson);
// CONSTRUCT THE MAP
var map = L.map('map', {
searchControl: {layer: markers},
zoom: 6,
center: [51.505, -0.09],
maxZoom: 13
})
.setView([62.965, 19.929], 5)
.fitBounds(markers.getBounds());
baseLayer.addTo(map);
markers.addTo(map);
L.control.fullscreen().addTo(map);
});
</script>
Could you please help me add filter buttons (something like here: https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers)
PS: I think I tried all examples from Mapbox website, yet seems my skills are very limited here.
Thank you
I was trying to add setFilter function, but probably I am using it wrong. I would like to filter items by category property from my JSON file.
This code example is using L.geoJson to load the markers into your map. Like the Mapbox example, you'll need to use L.mapbox.featureLayer instead, since it includes the setFilter function and L.geoJson does not.
tmcw's answer is correct, L.mapbox.featureLayer is confusing
this tutorial helped me!
https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/