Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/perliedman/leaflet-underneath
Find interesting features is in your map using Mapbox Vector Tiles data
https://github.com/perliedman/leaflet-underneath
Last synced: 6 days ago
JSON representation
Find interesting features is in your map using Mapbox Vector Tiles data
- Host: GitHub
- URL: https://github.com/perliedman/leaflet-underneath
- Owner: perliedman
- License: isc
- Created: 2016-02-05T15:39:39.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-21T12:27:22.000Z (about 5 years ago)
- Last Synced: 2024-10-31T23:51:27.208Z (13 days ago)
- Language: JavaScript
- Size: 74.2 KB
- Stars: 31
- Watchers: 6
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Leaflet Underneath
[](https://www.npmjs.com/package/leaflet-underneath) 
[Check out the demo](http://www.liedman.net/leaflet-underneath/)
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](https://www.mapbox.com/developers/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](https://github.com/perliedman/leaflet-underneath/releases) the code. Include the pre-built Leaflet Underneath script in your project:
```html
```
or, even better, use Browserify or similar and install from npm:
```
npm install --save leaflet-underneath
```
```javascript
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](https://github.com/perliedman/leaflet-underneath/blob/master/example/index.js).
## API
### L.Underneath
Leaflet Underneath can be queried for features from a location.
#### Creation
Factory | Description
---------------------|-----------------------------
`L.underneath( tileUrl, map, <`[`UnderneathOptions`](#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_id`property
`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`](http://leafletjs.com/reference.html#latlng)`> latLng, callback, context, <`[`QueryOptions`](#queryoptions)> options?)` | `this` | Asynchronously queries for features near `latLng`; `callback` will be called with features within `radius` 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