Find interesting features is in your map using Mapbox Vector Tiles data
JavaScript HTML Shell
Latest commit be7314a Oct 6, 2016 @perliedman committed on GitHub Remove Leaflet 1.0 compat badge for now

README.md

Leaflet Underneath

NPM version !

Check out the demo

With a normal tile layer, the user can't interact to find out more about a location, since it is a static image. With this plugin, you can find out what features are underneath the current mouse position, for example when the user clicks the map.

This is done using Mapbox Vector Tiles, that are queried for features in a way that is both fast and reasonably bandwidth efficient.

Using

Download the code. Include the pre-built Leaflet Underneath script in your project:

    <script src="leaflet-underneath/dist/leaflet-underneath.js"></script>

or, even better, use Browserify or similar and install from npm:

npm install --save leaflet-underneath
var L = require('leaflet');
require('leaflet-underneath');

// Leaflet Underneath will be available as L.tileLayer.underneath

For a complete example on how to use Leaflet Underneath, see basic Leaflet Underneath example.

API

L.TileLayer.Underneath

Leaflet Underneath uses a tilelayer that can be queried for features from a location. The layer extends L.TileLayer.

Creation

Factory Description
L.tileLayer.underneath(<String> tileUrl, <UnderneathOptions`> options?) Instantiates a new Leaflet Underneath layer

Options

In addition to Leaflet's built-in TileLayer options, Leaflet Underneath has these options:

Option Type Default Description
layers String[] [] Names of layers to include in search
defaultRadius Number 20 Default number of pixels search radius
featureId Function Function that returns a unique feature id; used to filter out duplicates. Default returns a features osm_idproperty
lazy Boolean true If lazy, only tiles that are queried will be loaded. Otherwise, all tiles will be loaded, like a normal tile layer.
zoomIn Number 0 Zoom in relative to the map's current zoom level when making a query; used to get more or less detailed results than current zoom would give
joinFeatures Boolean false For features with same id, should geometries be joined (true), or should they be ignored (false)

Methods

Method Returns Description
query(<L.LatLng> latLng, <Function> callback, <Object> context, <QueryOptions> options?)|this| Asynchronously queries for features nearlatLng;callbackwill be called with features withinradius` pixels of the coordinate

QueryOptions

Option Type Default Description
radius Number Take from layer options Number of pixels search radius
onlyInside Boolean false Only return features (polygons) that the queried location is inside