I have some markers in the map, How to automatically set the best view of the map so all markers can be displayed on the center when map loaded?
I try the following:
var markers = [];
for (let i = 0; i < geoFences.length; i++)
{
var geoFenceLatLon = new L.LatLng(geoFences[i].geoFence_Lat,geoFences[i].geoFence_Lon);
var geoFenceCircle = L.circle(geoFenceLatLon, geoFences[i].geoFence_Radius).addTo(deviceLocation);
markers.push(geoFenceLatLon); //add each markers to array
L.circleMarker([geoFences[i].geoFence_Lat, geoFences[i].geoFence_Lon], { radius: geoFences[i].geoFence_Radius });
L.marker(geoFenceLatLon, {icon: geoFenceMarker}, { pmIgnore: true }).addTo(deviceLocation);
if (i == geoFences.length -1)
{
var group = L.featureGroup(markers); //add markers array to featureGroup
deviceLocation.fitBounds(group.getBounds());
}
}
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap',
maxZoom: 18
}).addTo(deviceLocation);
but I got:
Uncaught TypeError: t.addEventParent is not a function
at e.addLayer (leaflet.js:5:69635)
at e.initialize (leaflet.js:5:68602)
at new e (leaflet.js:5:2708)
at t.featureGroup (leaflet.js:5:145305)
at renderMap
Thank you so much in advance.
var bounds = new google.maps.LatLngBounds();
....
create marker(s)
//extend bounds by calling this for each marker
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
Related
I integrated Leaflet OSM (Open Street Maps) to my application and the map view is loading.
this.map = leaflet.map(this.mapContainer.nativeElement, {
preferCanvas: true,
zoom: 14,
zoomAnimationThreshold: 0,
renderer: leaflet.canvas()
});
I want the count of tiles loaded when map is loaded.
I checked official docs of leaflet but didn't find regarding the count.
do I need to calculate the count of tiles loaded according to screen? if yes then how?
You can try this:
function getTilesCount(){
var tileLayers = map.getPane('tilePane').children[0].children;
var idx = -1;
var tileCount = 0;
for(var i = 0; i < tileLayers.length; i++){
var tile = tileLayers[i];
if(tile.style.zIndex >= idx){
idx = tile.style.zIndex;
tileCount = tile.children.length;
}
}
return tileCount;
}
It counts the DOM tiles in tile container with the highest z-Index
Leverage the tileload event of L.TileLayers, e.g.
var tileCount = 0;
myTileLayer.on('tileload', function() { tileCount++ });
If you want to count tiles on initial map load, you should make sure to hook an event handler for the corresponding tileload event before the tilelayer starts loading, and stop counting when the tilelayer reports all tiles loaded (via its load event), e.g.:
var map = L.map('leaflet', {
center: [0, 0],
zoom: 3
});
// Create a tilelayer but *do not* add it to the map *yet*
var myTileLayer =
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
});
var tileCount = 0;
// Hook up event handlers...
myTileLayer.on('tileload', function(){ tileCount++; });
myTileLayer.once('load', function(){
// Do something with the number of loaded tiles
window.alert(tileCount);
// Detach all event handlers for the 'tileload' event since they're not needed anymore
myTileLayer.off('tileload');
});
// Now that the event handlers are ready, add the tilelayer to the map
myTileLayer.addTo(map);
Below are three functions that I use to respectively create a map, add an IMG-layer and remove an IMG-layer. Problem is that when I add an IMG-layer and then want to remove it before adding a new (different) IMG-layer......the removal is not taking place.
The IMG-layers that I use are simple URLs to png's.
So subsequently:
loadMap();
SetLayer("2018_10_13_16_15.png");
RemoveLayer("2018_10_13_16_15.png");
SetLayer("2018_10_13_16_30.png");
Then "2018_10_13_16_15.png" is not removed.
What am I doing wrong??
var map = L.map('map');
var imageBounds = [[50.520, 0.813], [54.295, 10.996]];
function loadMap(){
map.createPane('labels');
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: cartodbAttribution
}).addTo(map);
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: cartodbAttribution,
pane: 'labels'
}).addTo(map);
map.setView({lat: 52.5, lng: 5.2}, 6.5);
isMap = true; //map is loaded
}
function SetLayer(url) {
IMGLayer = L.imageOverlay(url, imageBounds);
IMGLayer.addTo(map);
}
function RemoveLayer(url) {
IMGLayer = L.imageOverlay(url, imageBounds);
IMGLayer.removeFrom(map);
}
Hi I have connection between marker with polyline like this Image .
I am attaching a sample here.
How Can I make drag possible that when I drag the the marker with polyline.
example , If I drag the marker 3 it should also update the polyline point and where ever I put the marker 3 polyline should connect with marker 3.
I need this type of drag event that can update the polyline also when dragging the marker.
I am using leaflet for this purpose but still unable to solve the dragging logic of marker with polyline.
Here is the sample code I am using
$http.get("db/getConnectionData.php").then(function (response) {
$scope.links1 = response.data.records;
// $scope.showArrow();
angular.forEach($scope.links1, function(value, i) {
var source_panoId = $scope.links1[i].s_panoId;
var dest_panoId = $scope.links1[i].d_panoId;
var sPanoID = $scope.links1[i].sourcePano_id;
var dPpanoID = $scope.links1[i].destPano_id;
angular.forEach($scope.panoramas, function(value, index) {
if($scope.panoramas[index].panoId == source_panoId){
if($scope.links.indexOf($scope.panoramas[index])== -1){
$scope.links.push($scope.panoramas[index]);
}
var SlatLang = $scope.panoramas[index].project_latLng ;
var SLatLngArr = SlatLang.split(",");
var Slat = parseFloat(SLatLngArr[0]);
var Slang = parseFloat(SLatLngArr[1]);
var polypoint1 = [Slat, Slang];
angular.forEach($scope.panoramas, function(value, index1) {
if($scope.panoramas[index1].panoId == dest_panoId){
if($scope.links.indexOf($scope.panoramas[index1])== -1){
$scope.links.push($scope.panoramas[index1]);
}
var DlatLang = $scope.panoramas[index1].project_latLng ;
var DLatLngArr = DlatLang.split(",");
var Dlat = parseFloat(DLatLngArr[0]);
var Dlang = parseFloat(DLatLngArr[1]);
var polypoint2 = [Dlat, Dlang];
// Draw seperate polyline for each connection
polyline = L.polyline([[Slat, Slang],[Dlat, Dlang]],
{
color: 'blue',
weight: 5,
opacity: .7,
}
).addTo(map);
$scope.polycoords.push(polyline);
}
});
}
});
Here is the code that I am using to make drag of marker with polyline
angular.forEach($scope.panoramas, function(value, index4){
$scope.markers[index4].on('dragstart', function(e){
var latlngs = polyline.getLatLngs(),
latlng = $scope.markers[index4].getLatLng();
for (var i = 0; i < latlngs.length; i++) {
if (latlng.equals(latlngs[i])) {
this.polylineLatlng = i;
}
}
});//dragstart
$scope.markers[index4].on('drag', function(e){
var latlngs = polyline.getLatLngs(),
latlng = $scope.markers[index4].getLatLng();
latlngs.splice(this.polylineLatlng, 1, latlng);
polyline.setLatLngs(latlngs);
});//drag
$scope.markers[index4].on('dragend', function(e){
delete this.polylineLatlng;
});//dragEnd
});
First, when creating the marker, remember to pass the draggable option as true, like this:
var marker = L.marker(latLng, { draggable: true });
Now, check which drag event you want to attach a listener to and then call the redraw function of the polyline inside the callback, like this:
// var polyline defined somewhere
marker.on('drag', function (e) {
polyline.redraw();
});
If this doesn't work, please provide sample code so we can work around with it.
Edit
You also need to change the coordinates of the polyline, otherwise redraw will do nothing. Check out this answer on SO and see if it fits your needs.
Edit 2
You're using an array of polylines while the answer just uses one polyline which has the array of coordinates, so in your case you need to use two loops to accomplish the same task. You can make this faster and maybe use an object as a lookup table to get the right polyline for each marker, for example, like this:
var table = {};
// ...
table[marker] = polyline;
Then later you can get the polyline used for each marker. But anyway, here's what I think would work in your case the way it is in the sample (it was a little hard to understand but I hope it works for you).
I don't know where you are putting the second part of your sample (the event handlers) but I assume it's not inside the double loop that is creating the polylines, right? So this is what I came up with:
marker.on('dragstart', function (e) {
var markerLatLng = marker.getLatLng();
this.polylineLatLngs = [];
for (var i = 0; i < $scope.polycoords.length; i++) {
var polyline = $scope.polycoords[i];
var latLngs = polyline.getLatLngs()
for (var j = 0; j < latLngs.length; j++) {
if (markerLatLng.equals(latLngs[j])) {
this.polylineLatLngs.push([i, j]);
}
}
}
});
marker.on('drag', function (e) {
for (var i = 0; i < this.polylineLatLngs.length; i++) {
var polyline = $scope.polycoords[this.polylineLatLngs[i][0]];
var latLngs = polyline.getLatLngs();
var markerLatLng = marker.getLatLng();
latLngs.splice(this.polylineLatLngs[i][1], 1, markerLatLng);
polyline.setLatLngs(latLngs);
}
});
I am getting this type of behavior. Please let me know how I can solve this .
Thank you for your time.
This is the polyline created by getting data from db or by making the connection between panorama.
This Image when I start dragging the marker 2 I got the result like this
This image when I dragged the marker 3.
This type of result I am getting using the source code you provided above.
I have a listener that will detect changes of the location of objects on databases. It will pass all the information of the object that is being changed.
I want to get all markers from the current map and find the marker that is affected. Once found, update the location.
But, I am still looking for the best ways to get all markers from the map and then I can update the location.
var map = L.map('map').setView([37.78541,-122.40787], 13);
var markers = new L.FeatureGroup();
var mapLink =
'OpenStreetMap';
L.tileLayer(
'https://{s}.tiles.mapbox.com/v4/examples.map-i87786ca/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZ2Vja29iIiwiYSI6IndzVjRGN0kifQ.lToORsjE0lkt-VQ2SXOb-Q', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var marker = createCircleMarker([44.977368, -93.232659]);
marker._id = "69"; // Id of the marker
map.addLayer(marker);
var socket = io();
socket.on('update location', function(obj) {
// Get all markers and find markers with attribute obj.name to
// update the location to [obj.lat,obj.lon]
});
Use eachLayer method on L.map. Like
map.eachLayer(function (layer) {
if (layer.options.name === 'XXXXX') {
layer.setLatLng([newLat,newLon])
}
});
Documentation at http://leafletjs.com/reference-1.2.0.html#map-eachlayer
To add an option without using map.eachLayer; all layers within the map are internally stored in map._layers.
Use
map._layers.forEach(function (layer) {
...
});
to iterate over ALL Layer elements. Not just the ones currently visible.
I've an issue with the leaflet openPopup method.
showMap = function(elements) {
var jsonp = 'http://a.tiles.mapbox.com/v3/blahblahblah.jsonp';
var m = new L.Map("my_map").setView(new L.LatLng(51.5, -0.09), 15);
var geojsonLayer = new L.GeoJSON();
var PlaceIcon = L.Icon.extend({
iconSize: new L.Point(25, 41),
shadowSize: new L.Point(40, 35),
popupAnchor: new L.Point(0, -30)
});
var icon = new PlaceIcon(__HOME__ + '/images/leaflet/marker.png');
var marker;
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
if (i == 0) {
marker.openPopup();
}
m.addLayer(geojsonLayer).addLayer(marker);
}
// Get metadata about the map from MapBox
wax.tilejson(jsonp, function(tilejson) {
m.addLayer(new wax.leaf.connector(tilejson));
});
}
When I click on a marker I have the popup open. But I would like to have the first popup open when the map is loaded. (and open other popups on markers click)
AnNy ideas ?
Put openPopup call after you add the marker to the map and you should be fine.
I'm assuming that when you click on a marker you see the popup but you're not getting the popup of the first marker to show automatically when the map is loaded?
First, it doesn't look like you're actually using GeoJSON so a GeoJSON layer isn't necessary (you can just use a FeatureLayer) but that shouldn't cause any issues. Whatever layer group you use you should only be adding it to the map once and then adding all child layers to the LayerGroup. You're currently adding the geojsonLayer multiple times in your "for" loop which you don't want to do.
Second, you have to call marker.openPopup() after the marker is added to the map.
Try changing your code around to looks something like this:
var layerGroup = new L.FeatureGroup();
layerGroup.addTo( m );
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
//You don't add the marker directly to the map. The layerGroup has already
//been added to the map so it will take care of adding the marker to the map
layerGroup.addLayer( marker );
if (i == 0) {
marker.openPopup();
}
}
I had this issue and fixed it with adding a timeout right after I added the marker on the map.
marker.addTo(this.map).bindPopup('Info');
setTimeout(() => {
marker.openPopup();
}, 500);
I don't know why but on some page, I need to apply timeout. In any case it's my workaround, hope this works for some of you too.
First add your map then put openPopup():
L.marker([lat, long]).bindPopup('Your message').addTo(map).openPopup();