web-map.html

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="map-layer.html">
<link rel="import" href="map-area.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="web-map">
  <!-- 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: inline-block;
     position: relative;
   }

   #map:focus {
     outline: 2px  double lightskyblue;
   }
     

  </style>
  <link rel="stylesheet" href="scripts/lib/leaflet.css" />

<template>
  <!-- giving the map div a tabindex allows the map to display its focus. -->
  <!-- see the #map:focus selector in styles, above. -->
  <div id="map" tabindex="0"></div>
  <content></content>
</template>
<script>
  
WebMap = Polymer({
    is: "web-map",
    factoryImpl: function(width, height, lat, lon, zoom, projection, controls) {
      this.width = width;
      this.height = height;
      this.lat = lat||this.lat;
      this.lon = lon||this.lon;
      this.zoom = zoom||this.zoom;
      this.projection = projection||'OSMTILE';
      this.controls = controls||this.controls;
    },
    properties: {
      lat : {
        type: Number,
        value: 0,
        reflectToAttribute: true
      },
      lon : {
        type: Number,
        value: 0,
        reflectToAttribute: true
      },
      zoom : {
        type: Number,
        value: 0,
        reflectToAttribute: true
      },
      projection: {
        type: String,
        value: "OSMTILE",
        reflectToAttribute: false
      },
      width: {
        type: Number,
        value: null,
        reflectToAttribute: true
      },
      height: {
        type: Number,
        value: null,
        reflectToAttribute: true
      },
      layers: {
        type: Object,
        value: function () {
          return this.getElementsByTagName('map-layer');
        }
      },
      areas: {
        type: Object,
        value: function () {
          return this.getElementsByTagName('map-area');
        }
      },
      controls: {
        type: Boolean,
        reflectToAttribute: true
      }
    },
    observers: [
      '_widthChanged(width)','_heightChanged(height)','_toggleControls(controls)'
    ],
    _toggleControls(controls) {
      if (this._map) {
        if (controls) {
          this._zoomControl = L.control.zoom().addTo(this._map);
          this._layerControl = M.mapMlLayerControl().addTo(this._map);
          for (var i=0;i<this.layers.length;i++) {
            if (!this.layers[i].hidden) {
              this._layerControl.addOverlay(this.layers[i]._layer, this.layers[i].label);
              this._map.on('moveend', this.layers[i]._onMapMoveEnd,  this.layers[i]);
              // update the layer control
              this._map.fire('moveend');
              this.layers[i]._layerControl = this._layerControl;
            }
          }
        } else {
          this._map.removeControl(this._layerControl);
          this._map.removeControl(this._zoomControl);
        }
      }
    },
    _widthChanged: function(width) {
        this.style.width = width+"px";
        this.$.map.style.width = width+"px";
        if (this._map) {
            this._map.invalidateSize(false);
        }
    },
    _heightChanged: function(height) {
        this.style.height = height+"px";
        this.$.map.style.height = height+"px";
        if (this._map) {
            this._map.invalidateSize(false);
        }
    },
    zoomTo: function(lat, lon, zoom) {
        zoom = zoom||this.zoom;
        var location = new L.LatLng(lat,lon);
        this._map.setView(location, zoom);
        this.zoom = zoom;
        this.lat = location.lat;
        this.lon = location.lng;
    },
    _onMapMoveEnd: function() {
        // remember to tell Leaflet event handler that 'this' refers to something other than the map
        // in this case the custom polymer element
        this.lat = this._map.getCenter().lat;
        this.lon = this._map.getCenter().lng;
        this.zoom = this._map.getZoom();
    },
    _getLegendLayers: function() {
      // leaflet's layer control needs an associative array of leaflet layers 
      // with the key values set to the label to be used in the layer control.  
      // This method iterates over the layer (element) children of the map element, 
      // and returns such an array. It also sets the zIndex and opacity options
      // of the leaflet layers to calculated values
        for (var i = 0,legendLayers = {};i < this.layers.length;i++) {
          if (!this.layers[i].hidden) {
            legendLayers[this.layers[i].label] = this.layers[i]._layer;
          }
        }
        return legendLayers;
    },
    attached: function() {
      this.async( function () {
        console.log(this.localName + '#' + this.id + ' was attached');
        
        // the dimension attributes win, if they're there. A map does not
        // have an intrinsic size, unlike an image or video, and so must 
        // have a defined width and height.
        var s = window.getComputedStyle(this),
        w = s.width, h=s.height;
        
        if (!this.width) {
          this.$.map.style.width = w;
          this.width = parseInt(w.replace('px',''));
        } else {
          this.$.map.style.width = this.width+"px";
        }
        
        if (!this.height) {
          this.$.map.style.height = h;
          this.height = parseInt(h.replace('px',''));
        } else {
          this.$.map.style.height = this.height+"px";
        }
        
        // create the Leaflet map
        this._map = L.map(this.$.map, {
          center: new L.LatLng(this.lat, this.lon),
          projection: this.projection,
          crs: M[this.projection],
          zoom: this.zoom,
          zoomControl: false,
          // because the M.MapMLLayer invokes _tileLayer._onMoveEnd when
          // the mapml response is received the screen tends to flash.  I'm sure
          // there is a better configuration than that, but at this moment
          // I'm not sure how to approach that issue.  
          // See https://github.com/Maps4HTML/MapML-Leaflet-Client/issues/24 
          fadeAnimation: false
        });
        
        // reflect user or script-initiated map movements to lat, lon, zoom attributes
        this._map.on('moveend', this._onMapMoveEnd, this);
        
        // optionally add controls to the map
        if (this.controls) {
          this._layerControl = M.mapMlLayerControl().addTo(this._map);
          this._zoomControl = L.control.zoom().addTo(this._map);
        }
        // the attribution control is not optional
        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
        
        // make sure the layer knows about the map it belongs to.
        for (var i = 0;i < this.layers.length;i++) {
          this.layers[i]._attachedToMap();
        }
        
        // the area elements need the map to convert their coordinates to LatLng
        for (var i = 0; i < this.areas.length;i++) {
          this.areas[i]._attachedToMap();
        }
        
        // log map dimensions.  If things go wrong with setup, this may be useful
        console.log("map center: "+this._map.getCenter());
        var west = this._map.getBounds().getWest(),
            south = this._map.getBounds().getSouth(),
            east = this._map.getBounds().getEast(),
            north = this._map.getBounds().getNorth();

        if (west === east || south === north) {
          console.log('ERROR: BAD EXTENT');
        }
        console.log("map bounds bbox=" + this._map.getBounds().toBBoxString());
      },10);
    }
});
</script>
</dom-module>