map-layer.html

<link rel="import" href="./bower_components/polymer/polymer.html">

<script src="scripts/lib/leaflet-src.js"></script>
<script src="scripts/lib/proj4-compressed.js"></script>
<script src="scripts/lib/proj4leaflet.js"></script>
<script src="scripts/mapml.js"></script>
<script src="scripts/URI.js"></script>

<dom-module id="map-layer">
  <!-- in polymer 1.0.x, styles must be outside of the <template> element
       https://www.polymer-project.org/1.0/docs/migration.html#local-dom-template -->
  <style>
   :host {
     display: none;
   }
  </style>

<script>
MapLayer = Polymer({
    is: "map-layer",
    properties: {
      src : {
        type: String,
        reflectToAttribute: true,
        observer: '_srcChanged'
      },
      label : {
        type: String,
        value: 'Layer',
        reflectToAttribute: true,
        observer: '_labelChanged'
      },
      // changing checked turns the layer on or off, and reflects that in the
      // user interface/ layer control.
      checked: {
        type: Boolean,
        reflectToAttribute: true,
        observer: '_toggleChecked'
      },
      // changing disabled does nothing; it is supposed to be read-only to the api,
      // and indicates if the layer is visible, i.e. if turned on it would be in
      // the map extent / zoom bounds of the map and will be updated on zoom/pan
      // by the map.  If a layer is disabled, it is 'greyed out' in the layer control
      // and can't be clicked on, although it can still be checked/unchecked via the api.
      disabled: {
        type: Boolean,
        reflectToAttribute: true
      },
      // hidden allows a layer to be added to the map but not displayed in the
      // layer control.  Changing hidden removes/adds it to the layer control,
      // but does not change the status of the layer on the map. It is 'hidden'
      // from the user interface.
      hidden: {
        type: Boolean,
        reflectToAttribute: true,
        observer: '_toggleHidden'
      }
    },
    _srcChanged: function() {
      // this should only be invoked after the ready callback
      if (this._layer) {
        this._layer.initialize(this.src);
      }
    },
    _labelChanged: function() {
        var map = this.parentElement && this.parentElement._map;
        if (map) {
          this._toggleHidden(false);
        }
    },
    _apiToggleChecked: true,
    _toggleChecked: function() {
        var map = this.parentElement && this.parentElement._map;
        if (map) {
          if (this._apiToggleChecked) {
            if (map.hasLayer(this._layer)) {
              map.removeLayer(this._layer);
            } else {
              map.addLayer(this._layer);
            }
            map.fire('moveend');
          }
          this._apiToggleChecked = true;
        }
    },
    _onMapMoveEnd: function () {
        var layer = this._layer, map = layer._map;
        if (map) {
            var zoomBounds = layer.getZoomBounds(), zoom = map.getZoom(), 
            withinZoomBounds = (zoomBounds && zoomBounds.min <= zoom && zoom <= zoomBounds.max),
            projectionMatches = layer._projectionMatches(map),
            visible = projectionMatches && withinZoomBounds && map.getPixelBounds().intersects(layer.getLayerExtentBounds(map));
            this.disabled = !visible;
        }
    },
    _onLayerChange: function() {
       if (this._layer._map) {
          // can't disable observers, have to set a flag telling it where
          // the 'event' comes from: either the api or a user click/tap
          this._apiToggleChecked = false;
          this.checked = this._layer._map.hasLayer(this._layer);
       }
    },
    _toggleHidden: function(hide) {
        var map = this.parentElement && this.parentElement._map;
        if (map && this.parentElement.controls) {
            if (hide) {
                this.parentElement._layerControl.removeLayer(this._layer);
            } else {
                this._layerControl = this.parentElement._layerControl;
                this._layerControl.addOverlay(this._layer,this.label);
            }
            map.fire('moveend');
        }
    },
    detached: function() {
        // if the map-layer node is removed from the dom, the layer should be
        // removed from the map and the layer control 
        
        if (this._layer._map) {
          this._layer._map.removeLayer(this._layer);
        }
        
        if (this._layerControl && !this.hidden) {
          this._layerControl.removeLayer(this._layer);
        }
    },
    ready: function() {
        console.log(this.localName + '#' + this.id + ' is ready');
        this._layer = M.mapMLLayer(this.src);
    },
    _attachedToMap: function() {
        var i = 0;
        for (var nodes = this.parentNode.children;i < nodes.length;i++) {
            if (this.parentNode.children[i] === this) {
              break;
            }
        }
        L.setOptions(this._layer, {zIndex: i+1, opacity: window.getComputedStyle(this).opacity});
        // make sure the Leaflet layer knows about the map its on
        this._layer._map = this.parentElement._map;
        this._layer.on('add remove', this._onLayerChange,  this);
        if (this.checked) {
            this._layer.addTo(this._layer._map);
        }
        // if controls option is enabled, insert the layer into the overlays array
        if (this.parentElement.controls && !this.hidden) {
          this._layerControl = this.parentElement._layerControl;
          this._layerControl.addOverlay(this._layer, this.label);
        }
        // toggle the this.disabled attribute depending on whether the layer
        // is: same prj as map, within view/zoom of map
        this._layer._map.on('moveend', this._onMapMoveEnd,  this);
        // update the layer control
        this._layer._map.fire('moveend');
    },
    attached: function() {
        console.log(this.localName + '#' + this.id + ' is attached');
        if (this.parentElement.nodeName !== 'WEB-MAP') {
            console.log('ERROR: '+ this.localName + '#' + this.id + ' must be a child of a web-map element');
            return;
        }
        // if the map has been attached, set this layer up wrt Leaflet map
        if (this.parentElement._map) {
            this._attachedToMap();
        }
    }
});
</script>
</dom-module>