1

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.

  • 1
    did you find the solution to this ?! – Zak Aug 16 '18 at 15:20
  • 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. – Marin Leontenko Aug 29 '18 at 13:30
  • Thank you anyway, I developed a method toGeoJson that transforms the pixels to coordinates. – Zak Aug 30 '18 at 7:50

Your Answer

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

Browse other questions tagged or ask your own question.