Leaflet Map – Trigger Event on Tile Layer in Leaflet

leaflet

Is it possible to make a click event occur only on the tile layer on a Leaflet map?

I tried

var tiles= L.tileLayer(...).addTo(map);

tiles.on('click', function(e) { console.log('ok') });

but it doesn't do anything. I also tried

tiles.on({ click: console.log('ok') });

but it only triggers once when the map loads.

I'd like this event to occur only on tile layers, not when the user clicks on another layer.

Best Answer

Is it possible to make a click event occur only on the tile layer on a Leaflet map?

No.

If you read the documentation for L.TileLayer, you'll see that L.TileLayers do not have a click event.

I'd like this event to occur only on tile layers, not when the user clicks on another layer.

If that's the case, then you should look at attaching a click event handler to the L.Map instance, and use L.DomEvent.stopPropagation on any other click event handlers (so that e.g. a marker click event won't propagate upwards to the map instance and fire the map's click event handler).

Related Solutions

[GIS] Triggering click event on Leaflet map

I think that your are thinking it is more complex than you think!

Try this:

var popLocation= new L.LatLng(-42.8585,147.2468);
var popup = L.popup()
    .setLatLng(popLocation)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

Sourced from the excellent documentation.

I know what you want to do now. Here's how you can open a popup at an arbitrary clicked location:

map.on('click', function(e) {        
        var popLocation= e.latlng;
        var popup = L.popup()
        .setLatLng(popLocation)
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);        
    });

Final edit: I seriously think that if you want to fire a 'click' event to achieve something that your design needs to be looked at. If you really want to do it, it seems possible in javascript. It's not a GIS question, though.

Leaflet – Loading Vector Tile Layer in Leaflet Map

In Leaflet 0.7x, this is made easy with the Leaflet.MapboxVectorTile plugin. You just need to specify the URL pattern in the url configuration option. The plugin documentation details the other configuration options that are available. To add the Mapillary data, you would use it like this:

var config = {
  url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox"
};
var mapillarySource = new L.TileLayer.MVTSource(config);
map.addLayer(mapillarySource);

Here is a fiddle showing the result:

http://fiddle.jshell.net/nathansnider/sj12o4hj/

For Leaflet 1.0x, you will want to use Leaflet.VectorGrid's L.vectorGrid.protobuf method. It has a number of styling options described in the docs, but for just loading the tiles, you would use it like this:

var url = 'https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox';
var mapillaryLayer = L.vectorGrid.protobuf(url).addTo(map);

Example fiddle:

http://fiddle.jshell.net/nathansnider/mwmpmLo7/

Best Answer

Related Solutions

[GIS] Triggering click event on Leaflet map

Leaflet – Loading Vector Tile Layer in Leaflet Map

Related Question