leaflet-map-component.html

<!--
The `leaflet-map` element renders a [Leaflet](http://leafletjs.com/) map.

##### Example
    <style>
      leaflet-map {
        height: 100%;
      }
    </style>
    <leaflet-map longitude="77.2" latitude="28.4" zoom="12"></leaflet-map>

##### Example: Add markers & circles
    <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
      <leaflet-marker longitude="77.2" latitude="28.4">
        Marker
      </leaflet-marker>
      <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
        Circle
      </leaflet-circle>
    </leaflet-map>


@element leaflet-map
@blurb Element for rendering a leaflet map
@status alpha
@homepage http://prtksxna.github.io/leaflet-map-component/components/leaflet-map-component/
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="leaflet-import.html">
<link rel="import" href="leaflet-marker-component.html">
<link rel="import" href="leaflet-circle-component.html">
<link rel="import" href="leaflet-rectangle-component.html">
<link rel="import" href="leaflet-polyline-component.html">
<link rel="import" href="leaflet-polygon-component.html">

<polymer-element name="leaflet-map" attributes="tileServer latitude longitude zoom fitToMarkers options">
  <template>
    <style>
     :host {
       display: block;
       position: relative;
     }

     #map {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
     }
    </style>
    <link rel="stylesheet" href="../leaflet/dist/leaflet.css">
    <div id="map"></div>
    <content id="features" select="leaflet-marker, leaflet-circle, leaflet-rectangle, leaflet-polyline, leaflet-polygon"></content>
  </template>
  <script>
   Polymer( 'leaflet-map', {
     publish: {
       /**
        * The map's latitude coordinate.
        *
        * @attribute latitude
        * @type number
        * @default 0
        */
       latitude: { value: 0, reflect: true },

       /**
        * The map's longitude coordinate.
        *
        * @attribute longitude
        * @type number
        * @default 0
        */
       longitude: { value: 0, reflect: true },

       /**
        * The map's zoom level
        *
        * @attribute zoom
        * @type number
        * @default 10
        */
       zoom: { value: 10, reflect: true }
     },

     /**
      * The map's tile server URL
      *
      * @attribute tileServer
      * @type string
      * @default http://{s}.tile.osm.org/{z}/{x}/{y}.png
      */
     tileServer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',

     /**
      * If set, the map is zoomed such that all elements in it are visible
      *
      * @attribute fitToMarkers
      * @type boolean
      * @default false
      */
     fitToMarkers: false,
     
     /**
      * Pass extra configurations to the Map constructor
      *
      * @attribute options
      * @type object
      * @default {}
      */
     options: {},

     observe: {
       latitude: 'updateCenter',
       longitude: 'updateCenter'
     },

     attached: function () {
       var baseLayer = L.tileLayer( this.tileServer );
       var lat = this.latitude;
       var lon = this.longitude;
       var zoom = this.zoom;
       var opts = {
         center: new L.LatLng( this.latitude, this.longitude ),
         zoom: this.zoom,
         layers: [baseLayer]
       };
       
       if (typeof this.options === 'object')
         Polymer.extend(opts, this.options);       

       this.map = new L.Map( this.$.map , opts);

       this.map.on( 'zoomend', function ( event ) {
         this.zoom = event.target.getZoom();

         /**
          * Fired when the map has stopped [zooming](http://leafletjs.com/reference.html#map-zoomend)
          *
          * @event zoomened
          */
         this.fire( 'zoomend' );
       }.bind( this ) );

       this.map.on( 'moveend', function ( event ) {
         var center = event.target.getCenter();
         this.latitude = center.lat;
         this.longitude = center.lng;

         /**
          * Fired when the map has stopped [moving](http://leafletjs.com/reference.html#map-moveend)
          *
          * @event moveend
          */
         this.fire( 'moveend' );
       }.bind( this ) );

       this.updateFeatures();
     },

     zoomChanged: function () {
       if ( this.map ) {
         this.map.setZoom( this.zoom );
       }
     },

     updateCenter: function () {
       if ( this.map && this.latitude && this.longitude ) {
         this.map.panTo( L.latLng( this.latitude, this.longitude ), { animate: true } );
       }
     },

     updateFeatures: function () {
       this.features = Array.prototype.slice.call( this.$.features.getDistributedNodes() );

       this.onMutation( this, this.updateFeatures );

       if ( this.features.length && this.map ) {
         for ( var i = 0, f; f = this.features[i]; i++ ) {
           f.map = this.map;
         }
       }
     },

     fitToMarkersChanged: function () {
       if ( this.map && this.fitToMarkers) {
         var bounds = [];
         for( var i = 0, f; f = this.features[i]; i++ ) {
           if ( f.latitude && f.longitude ) {
             bounds.push( [ f.latitude, f.longitude ] );
           } else if ( f.topleft && f.bottomright ) { // If it s a rectangle
             bounds.push( f.topleft );
             bounds.push( f.bottomright );
           }
         }
         if ( bounds.length > 0 ) {
           this.map.fitBounds( bounds );
           this.map.invalidateSize();
         }
       }
     },

     /**
      * Clears all elements from the map
      *
      * @method clear
      */
     clear: function () {
       for( var i = 0, f; f = this.features[i]; i++ ) {
         this.map.removeLayer( f.feature );
         f.map = null;
       }
     },

     /**
      * Returns a GeoJSON including all the features of the map
      *
      * @method toGeoJSON
      */
     toGeoJSON: function () {
       var geoJSON = {
         "type": "FeatureCollection",
         "features": []
       };

       for( var i = 0, f; f = this.features[i]; i++ ) {
         geoJSON.features.push( f.feature.toGeoJSON() );
       }

       return geoJSON;
     }
   } );
  </script>
</polymer-element>