6

I'm using geoserver to serve PostGIS layer (contains points only) as MVT (Mapbox Vector Tiles). I have a simple Leaflet application that displays that layer along with OSM or Google satellite imagery background.

Here is the code:

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }), map = new L.Map('map', { center: new L.LatLng(42.647, 18.101), zoom: 13 }), drawnItems = L.featureGroup().addTo(map); // MVT layer style var vectorTileStyling = { trgovinas: { icon: new L.Icon({ iconUrl: 'icons/shop.png', iconSize: [20, 20], // size of the icon iconAnchor: [10, 10], // point of the icon which will correspond to marker's location }) } }; // MVT layer url var trgovineUrl = "localhost:8080/geoserver/gwc/service/tms/1.0.0/volonteri:trgovinas@EPSG%3A3857@pbf/{z}/{x}/{-y}.pbf"; // MVT layer options var mapboxVectorTileOptions = { rendererFactory: L.svg.tile, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://www.mapbox.com/about/maps/">MapBox</a>', vectorTileLayerStyles: vectorTileStyling, }; var trgovine = L.vectorGrid.protobuf(trgovineUrl, mapboxVectorTileOptions); // Layer control + layers definition L.control.layers({ 'osm': osm.addTo(map), "google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', { attribution: 'google' }) }, { 'drawlayer': drawnItems , 'trgovine': trgovine.addTo(map)}).addTo(map);

What I want to do is to store features (geometry and attributes) to a variable when I click a point on map so I can make a popup that contains information about that point (from MVT layer).

This should be simple because data is already on client side (that is why I'm using MVT), but I'm new to Leaflet and JavaScript events.

Improve this question
4
  • 1
    did you find the solution to this ?! Commented Aug 16, 2018 at 15:20
  • 1
    Yes, but it was long time ago so I don't remember exactly how. I used this example (it doesn't work anymore, but it was working before): leaflet.github.io/Leaflet.VectorGrid/demo-points.html Hit ctrl+U in chrome to see source. Commented Aug 29, 2018 at 13:30
  • Thank you anyway, I developed a method toGeoJson that transforms the pixels to coordinates. Commented Aug 30, 2018 at 7:50
  • @Zak can you share that method? Commented Aug 25, 2021 at 0:59

1 Answer 1

Reset to default
4

For anyone new coming to this:

You can add the following code after setting up the vectortiles layer. This will create a popup using the attribute 'name'. 

var trgovine = L.vectorGrid.protobuf(trgovineUrl, mapboxVectorTileOptions).on('click', function(e) { // The .on method attaches an event handler L.popup() .setContent(e.layer.properties.name) // .setContent(JSON.stringify(e.layer)) .setLatLng(e.latlng) .openOn(map)}).addTo(map);
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.