Wondering what’s next for npm?Check out our public roadmap! »

    leaflet-underneath

    3.0.0 • Public • Published

    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

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

    Options

    Option Type Default Description
    minZoom Number 0 Minimum zoom level in the tile set
    maxZoom Number 22 Maximum zoom level in the tile set
    subdomains Array ['a', 'b', 'c'] Available subdomains
    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
    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

    Install

    npm i leaflet-underneath

    DownloadsWeekly Downloads

    11

    Version

    3.0.0

    License

    ISC

    Last publish

    Collaborators

    • avatar