How to get geometry (points) from existing Tileset on MapBox with Leaflet?

Question

We have an existing Tileset(layer) for Roads on MapBox.

I know the attribute value (Road uniq number) of one line/feature from that tileset (layer).

How do I get the geometry of the points for that line from MapBox with Leaflet 0.7.x.?

It would be very helpful to serve an fiddle, then i can test, and then there is no need to create an mapbox account. You mean the points of the start and the end of the line ? Did you try: map.getLayer("LayerID").feature.geometry.coordinates ? That could work if the mapbox tileset is represented the same as the geoJSON layer — Manuel
Thanks @Manuel. The question is to get all points that creates path - start, middle points, end point. I understand that for different zoom we have different number of points. It is ok. I am searching the way (API) to filter by attribute. To get one feature all points. How I know LayerID? — mik1971
Ideally, I would like to have method of the map object that takes parameters: layer object/name (Roads), zoom level, filter attribute name, filter attribute value. And returns feature/s with geometry (all points of the line at given zoom). Please help! — mik1971

Manuel Manuel · Accepted Answer · 2016-10-15T13:43:42

Sadly i have to say that I found no solution to access the features of a tileset directly with plain leaflet. Fortunately there is another simple solution using Mapbox GL JS. With this library you are able to easily access features and their properties of a tileset. To show you how it's done I created an example:

Let's say we have an road layer, which I downloaded from this page and added to MapBox as a tileset. Then you need to create a custom style for later access. Then you need to create a new map object with mapboxgl.Map() e.g:

mapboxgl.accessToken = '{your-access-token}';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/{name}/{style-id}',
    center: [14.5, 47],
    zoom: 6
});

After this you just need to query the rendered Tiles with map.queryRenderedFeatures() e.g:

var features = map.queryRenderedFeatures({
layers:['roads-bm6ga5'], # Here you may add your layer name to query
filter: ["==", "id", 2] # Here you may add your query condition

The result will return an object depending on your layername and condition you set. From this object you can access all the properties from your vectordataset inculding the geometry with it's coordinates. With features[0].geometry.coordinates you will receive all points along the LineString( e.g. roads).

mapboxgl.accessToken = 'pk.eyJ1IjoicHJheWVyIiwiYSI6ImI3OGRjZjcyY2JiZTUzODMwZWUxZDdiNjRiMWE4NjI5In0.zETX-x6-XPpAv3zt4MiFwg';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/prayer/ciub6rm2j004v2iodiej359ox',
    center: [14.5, 47],
    zoom: 6
});



map.on('click', function (e) {
    var features = map.queryRenderedFeatures({
    layers:['roads-bm6ga5'],
    filter: ["==", "id", 1]
});

    document.getElementById('features').innerHTML = '<b>Road with ID</b> ' + features[0].properties.id + ' has the coordinates:' +   
                                                    '<br>' +JSON.stringify(features[0].geometry.coordinates, null, 2);
});

map.on('load', function (e) {
    alert("Click in the map to show coordinates of road with ID 1")
});

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

#features {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }
    #map canvas {
        cursor: crosshair;
    }

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js"></script>

<div id='map'></div>
<pre id='features'></pre>

How to get geometry (points) from existing Tileset on MapBox with Leaflet?

1 Answers