mapbox-gl-layers
[![Circle CI](https://circleci.com/gh/developmentseed/mapbox-gl-layers.svg?style=svg)](https://circleci.com/gh/developmentseed/mapbox-gl-layers)
Last updated 5 years ago by anandthakker .
MIT · Original npm · Tarball · package.json
$ cnpm install mapbox-gl-layers 
SYNC missed versions from official npm registry.

Circle CI

mapbox-gl-layers

Layer toggle for Mapbox GL JS

Install

npm install mapbox-gl-layers

(Note the peer dependency on mapbox-gl!)

Use

CommonJS

var Layers = require('mapbox-gl-layers')

new Layers({
  layers: {
    'ALL PARKS': ['national_park', 'parks'],
    'National Parks': 'national_park',
    'Other Parks': 'parks'
  }
}).addTo(map) // map is the mapbox gl map instance

Standalone script

Add to <head>:

<script src='dist/mapbox-gl-layers.js'></script>
<link href='dist/mapbox-gl-layers.css' rel='stylesheet' />

And then:

<script>
map.on('style.load', function () {
  new MapboxGLLayers({
    layers: {
      'ALL PARKS': ['national_park', 'parks'],
      'National Parks': 'national_park',
      'Other Parks': 'parks'
    }
  }).addTo(map) // map is the mapbox gl map instance
})
</script>

API

Layers

Creates a layer toggle control

Parameters

  • options Object=
    • options.type string= Selection type: multiple to allow independently toggling each layer/group, single to only choose one at a time. (optional, default 'multiple')
    • options.layers Object= An object determining which layers to include. Each key is a display name (what's shown in the UI), and each value is the corresponding layer id in the map style (or an array of layer ids).
    • options.position string= A string indicating position on the map. Options are top-right, top-left, bottom-right, bottom-left. (optional, default 'top-right')
    • options.onChange function= Optional callback called with {name: dispayName, layerIds: [...], active: true|false } for the clicked layer

Examples

(new Layers({ 'National Parks': 'national_park', 'Other Parks': 'parks' }))
.addTo(map)

Contributing

This is an OPEN open source project. Contributions are welcome!

Steps:

  1. Clone the repo and run npm install.
  2. Start test server with npm start, open http://localhost:9966/example.html, and start make changes to index.js and friends.

Current Tags

  • 1.2.0                                ...           latest (5 years ago)

6 Versions

  • 1.2.0                                ...           5 years ago
  • 1.1.3                                ...           5 years ago
  • 1.1.2                                ...           5 years ago
  • 1.1.1                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |