--> TEXT)
649 | if (morphedNodeType === 1) {
650 | if (toNodeType === 1) {
651 | if (fromNode.tagName !== toNode.tagName) {
652 | onNodeDiscarded(fromNode);
653 | morphedNode = moveChildren(fromNode, document.createElement(toNode.tagName));
654 | }
655 | } else {
656 | // Going from an element node to a text node
657 | morphedNode = toNode;
658 | }
659 | } else if (morphedNodeType === 3) { // Text node
660 | if (toNodeType === 3) {
661 | morphedNode.nodeValue = toNode.nodeValue;
662 | return morphedNode;
663 | } else {
664 | // Text node to something else
665 | morphedNode = toNode;
666 | }
667 | }
668 | }
669 |
670 | if (morphedNode === toNode) {
671 | // The "to node" was not compatible with the "from node"
672 | // so we had to toss out the "from node" and use the "to node"
673 | onNodeDiscarded(fromNode);
674 | } else {
675 | morphEl(morphedNode, toNode, false, childrenOnly);
676 |
677 | /**
678 | * What we will do here is walk the tree for the DOM element
679 | * that was moved from the target DOM tree to the original
680 | * DOM tree and we will look for keyed elements that could
681 | * be matched to keyed elements that were earlier discarded.
682 | * If we find a match then we will move the saved element
683 | * into the final DOM tree
684 | */
685 | var handleMovedEl = function(el) {
686 | var curChild = el.firstChild;
687 | while(curChild) {
688 | var nextSibling = curChild.nextSibling;
689 |
690 | var key = getNodeKey(curChild);
691 | if (key) {
692 | var savedEl = savedEls[key];
693 | if (savedEl && (curChild.tagName === savedEl.tagName)) {
694 | curChild.parentNode.replaceChild(savedEl, curChild);
695 | morphEl(savedEl, curChild, true /* already visited the saved el tree */);
696 | curChild = nextSibling;
697 | if (empty(savedEls)) {
698 | return false;
699 | }
700 | continue;
701 | }
702 | }
703 |
704 | if (curChild.nodeType === 1) {
705 | handleMovedEl(curChild);
706 | }
707 |
708 | curChild = nextSibling;
709 | }
710 | };
711 |
712 | // The loop below is used to possibly match up any discarded
713 | // elements in the original DOM tree with elemenets from the
714 | // target tree that were moved over without visiting their
715 | // children
716 | if (!empty(savedEls)) {
717 | handleMovedElsLoop:
718 | while (movedEls.length) {
719 | var movedElsTemp = movedEls;
720 | movedEls = [];
721 | for (var i=0; i
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var yo = require('yo-yo')
2 | var Control = require('mapbox-gl/js/ui/control/control')
3 |
4 | module.exports = Layers
5 |
6 | /**
7 | * Creates a layer toggle control
8 | * @param {Object} [options]
9 | * @param {string} [options.type='multiple'] Selection type: `multiple` to allow independently toggling each layer/group, `single` to only choose one at a time.
10 | * @param {Object} [options.layers] 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).
11 | * @param {string} [options.position='top-right'] A string indicating position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left`.
12 | * @param {function} [options.onChange] Optional callback called with `{name: dispayName, layerIds: [...], active: true|false }` for the clicked layer
13 | * @example
14 | * (new Layers({ 'National Parks': 'national_park', 'Other Parks': 'parks' }))
15 | * .addTo(map)
16 | */
17 | function Layers (options) {
18 | this.options = Object.assign({}, this.options, options)
19 | if (options.layers) {
20 | // normalize layers to arrays
21 | var layers = {}
22 | for (var k in this.options.layers) {
23 | layers[k] = Array.isArray(this.options.layers[k])
24 | ? this.options.layers[k] : [this.options.layers[k]]
25 | }
26 | this.options.layers = layers
27 | }
28 |
29 | this._onClick = this._onClick.bind(this)
30 | this._isActive = this._isActive.bind(this)
31 | this._layerExists = this._layerExists.bind(this)
32 | this._update = this._update.bind(this)
33 | }
34 |
35 | Layers.prototype = Object.create(Control.prototype)
36 | Layers.prototype.constructor = Layers
37 | Layers.prototype.options = { position: 'top-right', type: 'multiple' }
38 | Layers.prototype.onAdd = function onAdd (map) {
39 | this._map = map
40 | var style = map.getStyle()
41 | this._allLayers = style.layers.map((layer) => layer.id)
42 | if (!this.options.layers) {
43 | this.options.layers = {}
44 |
45 | // if there's Mapbox Studio metadata available, use any groups we can find
46 | var groups = {}
47 | if (style.metadata && style.metadata['mapbox:groups']) {
48 | groups = style.metadata['mapbox:groups']
49 | Object.keys(groups).forEach((g) => { this.options.layers[groups[g].name] = [] })
50 | }
51 |
52 | style.layers.forEach((layer) => {
53 | var group = layer.metadata ? groups[layer.metadata['mapbox:group']] : null
54 | if (layer.metadata && group) {
55 | this.options.layers[group.name].push(layer.id)
56 | } else {
57 | this.options.layers[layer.id] = [layer.id]
58 | }
59 | })
60 | }
61 | this._map.on('style.change', this._update)
62 | this._map.style.on('layer.remove', this._update)
63 | this._map.style.on('layer.add', this._update)
64 | return this._render()
65 | }
66 |
67 | Layers.prototype.onRemove = function onRemove () {
68 | this._map.off('style.change', this._update)
69 | this._map.style.off('layer.remove', this._update)
70 | this._map.style.off('layer.add', this._update)
71 | }
72 |
73 | Layers.prototype._update = function _update () {
74 | this._allLayers = this._map.getStyle().layers.map((layer) => layer.id)
75 | yo.update(this._container, this._render())
76 | }
77 | Layers.prototype._render = function _render () {
78 | var layers = this.options.layers
79 | var className = 'mapboxgl-ctrl mapboxgl-layers'
80 | return yo`
81 |
82 |
83 | ${Object.keys(layers)
84 | .filter((name) => layers[name].some(this._layerExists))
85 | .map((name) => {
86 | var ids = layers[name].filter(this._layerExists)
87 | var className = ids.every(this._isActive) ? 'active'
88 | : ids.some(this._isActive) ? 'active partially-active'
89 | : ''
90 | return yo`
91 | -
92 | ${name}
93 |
`
94 | })}
95 |
96 |