We Keep Coding

find which shape is edited or deleted in leaflet drawControl

i implemented leaflet and leafletDraw in my Angular6 app, it works fine and i can trigger the create event and add the polygon to my map, but when i try to delete or edit my polygon i can't find which shape is deleted or edited:
ngOnInit() {
const myMap = this.mapElement.nativeElement;
const map = L.map(myMap).setView([35.6892, 51.3890], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © OpenStreetMap',
maxZoom: 18,
}).addTo(map);
const editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
if (this.type === 'marker') {
this.marker = MarkerOptions;
if (this.data) {
L.marker(this.data, MarkerOptions).addTo(editableLayers).bindPopup('I am popup');
}
} else if (this.type === 'polygon') {
this.polygon = {
allowIntersection: false,
drawError: {
message: '<strong>Oh snap!<strong> you can\'t draw that!'
},
shapeOptions: {}
};
if (this.data) {
L.polygon(this.data).addTo(editableLayers);
}
}
const drawPluginOptions: LeafletControls.Control.DrawConstructorOptions = {
position: 'topright',
draw: {
polyline: false,
polygon: this.polygon,
circle: false,
rectangle: false,
circlemarker: false,
marker: this.marker
},
edit: {
featureGroup: editableLayers,
remove: {},
edit: {
selectedPathOptions: {
stroke: false ,
color : '#e10010',
weight : 500
}
}
}
};
const drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);
map.once(L.Draw.Event.CREATED, (e: any) => {
console.log('lia e' , e);
this.layer = e.layer;
// if (type === 'marker') {
// layer.bindPopup('A popup!');
// }
editableLayers.addLayer(this.layer);
});
map.on('draw:edited', (e: any) => {
console.log('lia edit' , e , this.layer); //unable to trigger which shape is.
});
map.on('draw:deleted', (e: any) => {
console.log('lia delete' , e ); //unable to trigger which shape is.
console.log(this.layer);
});
}

The draw:edited and draw:deleted events pass you a LayerGroup which contains the layers that were edited/deleted.
map.on('draw:edited', (e: any) => {
var editedlayers = e.layers;
editedlayers.eachLayer(function(layer) { // Do something with the edited layer
});
});

Uncaught TypeError: events.forEach is not a function Leaflet and VueJS

I am making a vue project and I want to use leaflet inside of my components. I have the map showing but I run into an error when I try to add a marker to the map. I get
Uncaught TypeError: events.forEach is not a function
at VueComponent.addEvents (VM2537 Map.vue:35)
at e.boundFn (VM2533 vue.esm.js:191)
at HTMLAnchorElement. (leaflet.contextmenu.js:328)
at HTMLAnchorElement.r (leaflet.js:5)
<template>
<div>
<div id="map" class="map" style="height: 781px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: [],
markers: null
};
},
computed: {
events() {
return this.$store.state.events;
}
},
watch: {
events(val) {
this.removeEvents();
this.addEvents(val);
}
},
methods: {
addEvents(events) {
const map = this.map;
const markers = L.markerClusterGroup();
const store = this.$store;
events.forEach(event => {
let marker = L.marker(e.latlng, { draggable: true })
.on("click", el => {
store.commit("locationsMap_center", e.latlng);
})
//.bindPopup(`<b> ${event.id} </b> ${event.name}`)
.addTo(this.map);
markers.addLayer(marker);
});
map.addLayer(markers);
this.markers = markers;
},
removeEvent() {
this.map.removeLayer(this.markers);
this.markers = null;
}
},
mounted() {
const map = L.map("map", {
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [
{
text: "Add Event Here",
callback: this.addEvents
}
]
}).setView([0, 0], 1);
L.tileLayer("/static/map/{z}/{x}/{y}.png", {
maxZoom: 4,
minZoom: 3,
continuousWorld: false,
noWrap: true,
crs: L.CRS.Simple
}).addTo(map);
this.map = map;
}
};
</script>

New2Dis,
Here is your example running in a jsfiddle.
computed: {
events: function () {
return this.store.events;
}
},
watch: {
events: function (val) {
this.removeEvents();
this.addEvents(val);
}
},
methods: {
addEvents(events) {
console.log("hoi")
const map = this.map;
const markers = L.markerClusterGroup();
const store = this.$store;
events.forEach(event => {
let marker = L.marker(event.latlng, { draggable: true })
.on("click", el => {
//store.commit("locationsMap_center", event.latlng);
})
.bindPopup(`<b> ${event.id} </b> ${event.name}`)
.addTo(this.map);
markers.addLayer(marker);
});
map.addLayer(markers);
this.markers = markers;
},
removeEvents() {
if (this.markers != null) {
this.map.removeLayer(this.markers);
this.markers = null;
}
}
},
I did replace some things to make it works, like the $store as I don't have it, and removeEvent was not written correctly, so I'm not sure what I actually fixed...
I have also created a plugin to make it easy to use Leaflet with Vue.
You can find it here
You will also find a plugin for Cluster group here
Give it a try and let me know what you think.

Need to bind an inner function to the click event of an element

I need to use a "resetMap" function which I defined in my initMap function (callback function for google map), to bind to reset button. Now it cannot be used because its not there in the global scope.
If I move this function to global scope its items such as mapOptions.center setzoom etc will be undefined.
This is my script file
var map;
/* Hardcoding 5 airport locations - our data - model*/
var airports = [
{
title: "Calicut International Airport",
lat: 11.13691,
lng: 75.95098,
streetAddress: "Karipur",
cityAddress: "Malappuram, Kerala",
visible: ko.observable(true),
id: "nav0",
showIt: true
},
{
title: "Chennai International Airport",
lat: 12.9920434,
lng: 80.1631409,
streetAddress: "Meenambakkam",
cityAddress: "Chennai, Tamil Nadu",
visible: ko.observable(true),
id: "nav1",
showIt: true
},
{
title: "Trivandrum International Airport",
lat: 8.4829722,
lng: 76.909139,
streetAddress: "Vallakkadavu",
cityAddress: "Thiruvananthapuram, Kerala",
visible: ko.observable(true),
id: "nav2",
showIt: true
},
{
title: "Cochin International Airport",
lat: 10.15178,
lng: 76.39296,
streetAddress: "Nedumbassery",
cityAddress: "Kochi, Kerala",
visible: ko.observable(true),
id: "nav3",
showIt: true
},
{
title: "Kempegowda International Airport",
lat: 13.2143948,
lng: 77.6896124,
streetAddress: "Devanahalli",
cityAddress: "Bengaluru, Karnataka",
visible: ko.observable(true),
id: "nav4",
showIt: true
}
];
/* Initializing map, markers */
function initMap() {
var myLatlng = new google.maps.LatLng(13.2143948, 77.6896124);
var mapOptions = {
zoom: 6,
disableDefaultUI: true
};
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8.4829722, 76.909139), //SW coordinates here
new google.maps.LatLng(13.2143948, 77.6896124) //NE coordinates here
);
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.fitBounds(bounds);
setMarkers(airports);
setMapWithMarker();
/* Function to reset the map zoom and set center */
function resetMap() {
map.setCenter(mapOptions.center);
map.setZoom(6);
}
$(window).resize(function(){
map.setCenter(mapOptions.center);
});
}
/* Controlling the visibility of marker based on the 'showIt' property */
function setMapWithMarker() {
for (var i = 0; i < airports.length; i++) {
if(airports[i].showIt === true) {
airports[i].locMarker.setMap(map);
} else {
airports[i].locMarker.setMap(null);
}
}
}
/* Setting markers on map and attaching content to each of their info windows */
function setMarkers(location) {
var img = 'img/airport.png';
for (var i = 0; i < location.length; i++) {
location[i].locMarker = new google.maps.Marker({
position: new google.maps.LatLng(location[i].lat, location[i].lng),
map: map,
animation: google.maps.Animation.DROP,
title: location.title,
icon:img
});
var airportTitle = location[i].title;
var wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' +
airportTitle + '&format=json&callback=wikiCallback';
(function(i){
var wikiRequestTimeout = setTimeout(function() {
$('.show-error').html('ERROR: Failed to load wikipedia data - Airport details will not show up! Sorry for the inconvenience caused.');
}, 5000);
$.ajax({
url: wikiUrl,
dataType: "jsonp"
}).done(function(response){
var article = response[2][0];
location[i].contentString =
'<strong>'+ location[i].title + '</strong><br><p>' + location[i].streetAddress
+ '<br>' + location[i].cityAddress + '<br></p><p>' + article +
'</p><p>Source: Wikipedia</p>';
clearTimeout(wikiRequestTimeout);
});
})(i);
/* info window initialization and setting content to each marker's info window */
var infowindow = new google.maps.InfoWindow({});
new google.maps.event.addListener(location[i].locMarker, 'click',
(function(airport, i) { return function() {
airport.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
airport.setAnimation(null);
}, 2400);
infowindow.setContent(location[i].contentString);
infowindow.open(map,this);
map.setZoom(15);
map.setCenter(airport.getPosition());
};
})(location[i].locMarker, i));
/* info window call when clicked on airport menu item */
var searchNav = $('#nav' + i);
searchNav.click((function(airport, i) {
return function() {
airport.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
airport.setAnimation(null);
}, 2200);
infowindow.setContent(location[i].contentString);
infowindow.open(map,airport);
map.setZoom(15);
map.setCenter(airport.getPosition());
};
})(location[i].locMarker, i));
}
}
/* Function for toggling the menu */
function slideToggle() {
$(this).toggleClass('toggled');
$( "#listing" ).toggle( "slow", function() {
// Animation complete.
});
}
/* Our view model */
function viewModel() {
var self = this;
this.locMarkerSearch = ko.observable('');
ko.computed(function() {
var search = self.locMarkerSearch().toLowerCase();
return ko.utils.arrayFilter(airports, function(airport) {
if (airport.title.toLowerCase().indexOf(search) >= 0) {
airport.showIt = true;
return airport.visible(true);
} else {
airport.showIt = false;
setMapWithMarker();
return airport.visible(false);
}
});
});
};
// Activates knockout.js
ko.applyBindings(new viewModel());
I need to bind the function here in my index.html
<footer>
<button id="reset" data-bind="click: resetMap">Reset Zoom to center</button>
</footer>
<script src="js/lib/knockout-3.4.0.js"></script>
<script src="js/script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVOVW9WT7QaVlFYDkE7K2Qm-AvSS02YrM&callback=initMap" async defer onerror="googleError()"></script>
How can I resolve this problem? Thanks in advance..

You haven't shown us how viewModel uses initMap, but fundamentally, initMap needs to make resetMap available to the outside world. One way to do that is to return it:
function initMap() {
// ...
function resetMap() {
}
// ...
return resetMap;
}
and then have code in viewModel put that on the view model:
function viewModel() {
this.resetMap = initMap(); // I assume you're calling this indirectly; whatever
}
Then resetMap has access to what it needs, and it's on the view model so it can be bound.

Add Marker on Google map wherever I click

I want to achieve something similar to this http://jsfiddle.net/sya8gn0w/1/.
Now the problem is I have my own custom directive to display map. I want a function in child controller which will achieve above mentioned functionality on some button click.
eg. The place marker functionality triggers only if I click on some button.
Present code -
function ParentCtrl($scope){
var mainCtrl = this;
angular.extend(mainCtrl , {
map: {
center: {
latitude: 18.5,
longitude: 73.85
},
zoom: 13,
markers: [],
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
var lat = e.latLng.lat(), lon = e.latLng.lng();
var marker = {
id: Date.now(),
coords: {
latitude: lat,
longitude: lon
}
};
mainCtrl .map.markers.pop();
mainCtrl .map.markers.push(marker);
console.log(mainCtrl .map.markers);
console.log("latitude : "+lat+" longitude : "+lon);
$scope.$apply();
}
}
}
});
};
I want to move the functionality present in 'click:' part of angular.extend to a function presents in ChildCtrl controller. Is it possible ?
Ortherwise suggest me different approach to achieve this.

I don't know whether my answer going to help you or not.
Recently I worked on GoogleMap, I want to share what I know.
angular.extend(scope, {
map: {
show: true,
control: {},
version: 'uknown',
center: {
latitude: 0,
longitude: 0
},
options: {
streetViewControl: false,
panControl: false,
maxZoom: 10,
minZoom: 1
},
zoom: 2,
dragging: false,
bounds: {},
markers: scope.markers,
doClusterMarkers: true,
currentClusterType: 'standard',
clusterTypes: clusterTypes,
selectedClusterTypes: selectedClusterTypes,
clusterOptions: selectedClusterTypes['standard'],
events: {
tilesloaded: function(map, eventName, originalEventArgs) {},
click: function(mapModel, eventName, originalEventArgs) {},
dragend: function() {}
},
toggleColor: function(color) {
if (color === 'red') {
return '#6060FB';
} else {
return 'red';
}
}
}
Here the statement markers: scope.markers will help to create new markers or to remove old markers.
In "ChildCtrl" you write a function to update scope.markers object of parent controller.

You could declare the function for adding a marker in a separate controller
and then utilize $controller service to inject that controller into another controller:
angular.module('main', ['uiGmapgoogle-maps'])
.controller('MapCtrl', function ($scope,$controller) {
$controller('MarkerCtrl', {$scope: $scope});
angular.extend($scope, {
map: {
center: {
latitude: 42.3349940452867,
longitude:-71.0353168884369
},
zoom: 11,
markers: [],
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
$scope.addMarker(e.latLng);
$scope.$apply();
}
}
}
});
})
.controller('MarkerCtrl', function($scope) {
angular.extend($scope, {
addMarker: function(latLng) {
var marker = {
id: Date.now(),
coords: {
latitude: latLng.lat(),
longitude: latLng.lng()
}
};
$scope.map.markers.push(marker);
}
});
});
Plunker

I used different but better approach to achieve the desired results.
Found this solution on fiddle . Hope this would be helpful for someone else also.
function dragMarkerService(resolveAddressService){
this.placeMarker = function(location, idValue, map){
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(location.latitude, location.longitude),
draggable: true
});
google.maps.event.addListener(myMarker, 'dragend', function (evt) {
location.latitude = evt.latLng.lat();
location.longitude = evt.latLng.lng();
resolveAddressService.resolveAddress(location, idValue)
});
google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
angular.element(idValue).val() = 'Currently dragging marker...';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
};

Phonegap not firing GoogleMaps v3 domListener function inside Angularjs directive

I've got a directive in one of my templates, the following is the code of that directive:
appDirectives.directive('map', function() {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
alert("This fires just fine.");
function initialize() {
alert("This doesnt fire on Phonegap.");
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.currentLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var mapOptions = {
center: $scope.currentLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map($element[0], mapOptions);
var currentLocation = $scope.currentLocation;
$scope.onCreate({
map: map,
currentLocation: currentLocation
});
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}, function (error) {
alert('Erro ao obter localização.');
});
}
google.maps.event.addDomListener(window, 'load', initialize());
}
}
When running the app on the browser, everything works as expected. But when running on the iOS Simulator, it just doesnt fire the function initialize().
I've tried this (as described here):
google.maps.event.addDomListener(window, 'load', initialize);
Bu then it just fails to work both in the browser and in the simualtor.
Any idea why?

You have to make sure that cordova is ready before getting the current location. here is an explanation from phonegap docs
http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#deviceready
edited:
here is how you can use deviceReady in angular way
in your api.js where you keep service
//cordova service
apiServices.factory('cordovaReady', function() {
return function (fn) {
var queue = [];
var impl = function () {
queue.push(Array.prototype.slice.call(arguments));
};
document.addEventListener('deviceready', function () {
queue.forEach(function (args) {
fn.apply(this, args);
});
impl = fn;
}, false);
return function () {
return impl.apply(this, arguments);
};
};
});
//map service
apiServices.factory('geolocation', function ($rootScope, cordovaReady) {
return {
getCurrentPosition: cordovaReady(function (onSuccess, onError, options) {
navigator.geolocation.getCurrentPosition(function () {
var that = this,
args = arguments;
if (onSuccess) {
$rootScope.$apply(function () {
onSuccess.apply(that, args);
});
}
}, function () {
var that = this,
args = arguments;
if (onError) {
$rootScope.$apply(function () {
onError.apply(that, args);
});
}
},
options);
})
};
});
Then inject geoLocation service in your controller
geolocation.getCurrentPosition(function (position) {
$scope.position = {
coords: {
latitude: position.coords.latitude,
longitude: position.coords.longitude
}
};
});