Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including leaflet-underneath with all npm packages installed. Try it out:

var leafletUnderneath = require("leaflet-underneath")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

leaflet-underneath v3.0.0

Find features from a point using Mapbox Vector Tiles data

Leaflet Underneath

NPM version Leaflet 1.0 compatible!

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.

Leaflet 1.0 compatibility

Version 3.0 and up of Leaflet Underneath is only compatible with Leaflet 1.0; earlier versions only work with Leaflet 0.7.

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

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

API

L.Underneath

Leaflet Underneath can be queried for features from a location.

Creation

FactoryDescription
L.underneath(<String> tileUrl, <Map> map, <UnderneathOptions`> options?)Instantiates a new Leaflet Underneath layer

Options

OptionTypeDefaultDescription
minZoomNumber0Minimum zoom level in the tile set
maxZoomNumber22Maximum zoom level in the tile set
subdomainsArray['a', 'b', 'c']Available subdomains
layersString[][]Names of layers to include in search
defaultRadiusNumber20Default number of pixels search radius
featureIdFunctionFunction that returns a unique feature id; used to filter out duplicates. Default returns a features osm_idproperty
zoomInNumber0Zoom 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
joinFeaturesBooleanfalseFor features with same id, should geometries be joined (true), or should they be ignored (false)

Methods

MethodReturnsDescription
query(<L.LatLng> latLng, <Function> callback, <Object> context, <QueryOptions> options?)`thisAsynchronously queries for features near latLng; callback will be called with features within radius pixels of the coordinate

QueryOptions

OptionTypeDefaultDescription
radiusNumberTake from layer optionsNumber of pixels search radius
onlyInsideBooleanfalseOnly return features (polygons) that the queried location is inside

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free