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
    '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.

  • 1
    did you find the solution to this ?!
    – Zak
    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. Aug 29, 2018 at 13:30
  • Thank you anyway, I developed a method toGeoJson that transforms the pixels to coordinates.
    – Zak
    Aug 30, 2018 at 7:50
  • @Zak can you share that method?
    – ziggy
    Aug 25, 2021 at 0:59

1 Answer 1


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
//                  .setContent(JSON.stringify(e.layer))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.