How can I call fitbounds on a map with angular leaflet? I saw a post somehwere to look for the map binding event but couldn't find any sample code.
Try to use
angular.module('myModule').controller('MapController', ['$scope', 'leafletData',
function($scope, leafletData) {
leafletData.getMap().then(function(map) {
map.fitBounds(bounds);
});
}
]);
and check out
Dynamically changing Leaflet map bounds in Angular?
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 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'm new on using leaflet and I'm wondering how do you edit a draggable option for object than has already been saved in GeoJson and that you display later on your map.
pldata[index] = new L.GeoJSON(plot[i],{
pointToLayer: function (feature, latlng){
return new L.circleMarker(larlng, geojsonAOs)
},
style: set_style
}).addTo(map)
pldata['aos'].eachLayer(function (layer){
layer.options.draggable: true;
});
I've tried also to put the draggable at true after style but nothing happen.
P.S : Am I obligated to add DrawItem for just drag options ?
P.S2 : All object have been transform in circleMarker or lines and development that has been done is quiet big so I'm trying to find a solution without break the all curent project.
Thanks for your answer.
Ok I've just update the all leaflet library and after I continue with a eachLayer
and on Layer
.on('mousedown', function(){
map.dragging.disable();
map.on('mousemove', function(e){
layer.setLatLng(e.latlng)
});
it's working well to make a circleMarker move.
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 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/