We Keep Coding

How to add marker click listener in IONIC2?

I am working with IONIC2, i have implement map and put markers on the map.
I can get map click listener but can not get Marker click listener.
I had tried addlistener also but can not get click event for marker.
Here is my code for adding marker on map:
addMarkerOnMap(latLng1: GoogleMapsLatLng, depotsEntity: DepotsEntity) {
/**
* To add marker in the map, need to initialize GoogleMapsMarkerOptions
*/
let options: GoogleMapsMarkerOptions = {
icon: "www/img/location.png",
title: depotsEntity.address,
position: latLng1,
animation: GoogleMapsAnimation.DROP
};
let marker = this.map.addMarker(options)
this.map.on(this.map.markerClicked, function () {
console.log("markerClicked"); // This is not working yet
});
Please help me if anybody knows regarding marker click listener in IONIC2.

Looking at your code I will assume that you are using cordova-plugin-googlemaps.
There are a couple of things you are doing wrong. The first is that map.addMarker() doesn't return a marker, instead it returns a promise with a value of type GoogleMapsMarker which makes this line incorrect
let marker = this.map.addMarker(options)
Secondly, you attach the event handler to the marker object and not to the map which means this bit is also wrong
this.map.on(this.map.markerClicked, function () { });
What you need to do is call this.map.addMarker(), wait until the promise is resolved, and add the click handler to the marker returned by the promise.
Example
this.map.addMarker(options).then((marker: GoogleMapsMarker) => {
marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(() => { console.log('Marker clicked...'); });
});
You will need to make sure GoogleMapsMarker and GoogleMapsEvent have been imported from ionic-native.
Note
As of writing this I have theoretically showed you how to implement what you want but at the minute this is likely to give you the following error
this._next is not a function
This is a known issue and as far as I can tell it happens on any map / marker event that you have to subscribe to. The issue can be tracked on the Ionic Native GitHub page #206.

How to get modified and original geojson points after editing polygon in leaflet?

I have a geojson feature I've created. After editing, I know there is a draw:edited event. How do I get the original points that the polygon consisted of, and is it possible to get the new polygon points? How? Is it possible to know which vertices were changed or added?
I tried the following, all of which does not work:
map.on('draw:edited', function (e) {
var type = e.layerType;
var layer = e.layer; // this is giving undefined errors
var shape = layer.toGeoJSON() // this is undefined
var shape_for_db = JSON.stringify(shape);
});

The draw:created event fired on L.Map returns a L.LayerGroup as e.layers, which contains all the features that just have been edited. This is because you can edit multiple features at once before pressing the save button. You can iterate the L.LayerGroup and then fetch the GeoJSON:
map.on('draw:edited', function (e) {
e.layers.eachLayer(function (layer) {
console.log(layer.toGeoJSON());
});
});

Google Maps marker click listener

I need to add click event to Google Map markers, I'm using cordova in my app. Any way recommended in the documentation is not working... unless I make the marker draggable (then it works like gold) and I can't do that. I found that it was an issue a long, long time ago in 2011...
I think something had to be done with that since 2011. Do you have any idea?
Working piece of code below:
var position = new google.maps.LatLng(coords.lat, coords.lng);
var markerOptions = angular.extend({
map: map,
position: position,
title: name,
draggable: true
}, DrawingOptions.marker);
var googleMarker = new google.maps.Marker(markerOptions);
var marker = {
Id: id,
Type: type,
marker: googleMarker,
circle: new google.maps.Circle(circleOptions),
};
marker.marker.addListener('click', function () {
addInfoModal();
});
I also tried to make a function adding listener, but it won't work. I was also thinking about not-so-graceful solution - making marker draggable, but actually preventing action while dragging, but this isn't working and it looks bad in code.
Have you heard of something helpful in this case?

Seem your function is not right.
try without function simply adding the listener this way :
google.maps.event.addListener(googleMarker, 'click', function (event) {
alert('click');
});

Leaflet - Event on tiles loading

I am currently developing a map-based application and need a way to get notified when Leaflet is pulling tiles from the TileProvider (which, in my case, is MapBox). I read the Leaflet documentation, especially the part with the TileLayer. Currently, I am using the following code to attach a tileload handler:
map.eachLayer(function (layer) {
layer.on('tileload', function(e) {
console.log(e);
});
});
Is there a better way to get the TileLayer of the current map? One problem with this approach is that I hook the handler to all layers (although only TileLayers will raise events, it is unclean to hook it too all layers). Or can I attach the handler directly to the map instance somehow?
Update
I initialize the map with the following MapBox code snippet:
map = L.mapbox.map( element, '...', mapOptions );
This automatically creates a TileLayer (and several other layers), attaches them to the map object and returns this object for later use.

Why not use tileload event directly on the tile layer, like this:
//create a variable to store the tilelayer
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
//add the tileload event directly to that variable
osm.on('tileload', function (e) {
console.log(e);
});

If you've got a lot of L.mapbox.TileLayer instances and you don't want to add the eventhandler manually to each instance like Alexandru Pufan suggests in his answer you could still use a loop and Object's instanceof method:
map.eachLayer(function (layer) {
if (layer instanceof L.mapbox.TileLayer) {
layer.on('tileload', function(e) {
console.log(e);
});
}
});
After reading your comment on Alexandru's answer i'm guessing you only have one layer, then it would be best to add it manually to the instance, which is possible with L.mapbox.TileLayer like this:
var layer = L.mapbox.tileLayer(YOUR MAP ID);
layer.on('tileload', function(e) {
console.log(e);
});
var map = L.mapbox.map('mapbox', null, {
'center': [0, 0],
'zoom': 0,
'layers': [layer]
});

Need to redraw a map with new data (in conjunction with CartoDB.js)

I seem to be having some trouble with reinitializing a Leaflet map object. I am running an init() function that starts by initializing a map, adding a tilelayer and layer with polygons, and then adding sublayers which color the polygons according to a ST_Intersects query. The issue is that this function is tied to an AJAX call that is caused by a click event but does not update the data according to the new parameters sent to the map. I don't think I am explaining this very well, so here is a bit of my code:
success: function(data) {
init(data);
}
function init(data){
// initiate leaflet map
alert("start");
var map = L.map('cartodb-map').setView([40.750028, -73.926768], 11);
alert("map made");
//create sublayers, etc
}
What happens is that the first time init is run, both 'start' and 'map made' alerts work, and the map is made according to the data. Any further calls to init simply alerts with "start" and "map made" is never alerted so I believe the problem is with reinitializing the leaflet map. What should I do to fix this?

Not sure the problem without seeing more of your code, but you could try calling map.remove(); the second time around. So:
if (map) {
map.remove();
// add in new map initialization here
} else {
var map = ...
}