gn-map.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-map/google-map.html">
<link rel="import" href="../google-map/google-map-poly.html">
<link rel="import" href="../google-map/google-map-point.html">
<link rel="import" href="../google-map/google-map-marker.html">
<link rel="import" href="../osm-map/osm-map.html">
<link rel="import" href="../osm-map/osm-poly.html">
<link rel="import" href="../osm-map/osm-point.html">
<link rel="import" href="../osm-map/osm-marker.html">
<!--
    
The `gn-map` element provides a wrapper for different map types.
If attribute map-type change, the changes will apply to all child elements.
At this time `gn-map` supports `google-map` and `osm-map` and all
children like polygons, points and markers.

Examples:

    <gn-map
      longitude="9.45"
      latitude="38.24"
      zoom="13"
      map-type="GoogleMap">
    </gn-map>

    <gn-map
      longitude="9.45"
      latitude="38.24"
      zoom="13"
      map-type="OpenStreetMap">
    </gn-map>

By default `map-type="GoogleMap"`

@demo
-->

<dom-module id="gn-map">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        height: 100%;
      }
    </style>

    <template id="osmMap" is="dom-if" if="{{_typeIsOpenStreetMap(mapType)}}">
      <osm-map longitude="{{longitude}}" latitude="{{latitude}}" zoom="{{zoom}}">
        <template is="dom-repeat" items="{{polygons}}">
          <osm-poly fill-opacity="{{item.fillOpacity}}" stroke-color$="{{item.strokeColor}}" width$="{{item.width}}" closed$="{{item.closed}}" fill-color$="{{item.fillColor}}">
            <template is="dom-repeat" items="{{item.points}}">
              <osm-point longitude$="{{item.longitude}}" latitude$="{{item.latitude}}"></osm-point>
            </template>
          </osm-poly>
        </template>
        <template is="dom-repeat" items="{{markers}}">
          <osm-marker longitude$="{{item.longitude}}" latitude$="{{item.latitude}}"></osm-marker>
        </template>
      </osm-map>
    </template>

    <template id="googleMap" is="dom-if" if="{{_typeIsGoogleMap(mapType)}}">
      <google-map longitude="{{longitude}}" latitude="{{latitude}}" zoom="{{zoom}}">
        <template is="dom-repeat" items="{{polygons}}">
          <google-map-poly fill-opacity="{{item.fillOpacity}}" stroke-color$="{{item.strokeColor}}" width$="{{item.width}}" closed$="{{item.closed}}" fill-color$="{{item.fillColor}}">
            <template is="dom-repeat" items="{{item.points}}">
              <google-map-point longitude$="{{item.longitude}}" latitude$="{{item.latitude}}"></google-map-point>
            </template>
          </google-map-poly>
        </template>
        <template is="dom-repeat" items="{{markers}}">
          <google-map-marker longitude$="{{item.longitude}}" latitude$="{{item.latitude}}"></google-map-marker>
        </template>  
      </google-map>
    </template>

    <content></content>
  </template>
<script>
  Polymer({
    is: 'gn-map',

    properties: {
      /**
       * A latitude to center the map on.
       */
      latitude: {
        type: Number,
        notify: true,
        value: 53.834089,
        reflectToAttribute: true
      },

      /**
       * A longitude to center the map on.
       */
      longitude: {
        type: Number,
        notify: true,
        value: 10.703718,
        reflectToAttribute: true
      },

      /**
       * A zoom level which will be applied to the map.
       */
      zoom: {
        type: Number,
        value: 11,
        notify: true,
        reflectToAttribute: true
      },

      /**
       * The map-type is bind by dom-if template to include different type of maps
       * Possible values are "GoogleMap" or "OpenStreetMap".
       */
      mapType: {
        type: String,
        value:"GoogleMap",
        notify: true
      },

      /**
       * Holds the map object and allows to modify values during runtime
       */
      map: {
        type: Object
      },

      /**
       * Array of polygon objects
       */
      polygons: {
          type: Array,
          notify: true,
          value: function () {
            return [];
          }
      },

      /**
       * Array of Marker objects
       */
      markers: {
          type: Array,
          notify: true,
          value: function () {
            return [];
          }
      },

      /**
       * Array of user created Polygons
       */
      _userPolygons: {
        type: Array,
        notify: true,
        value: function () {
          return [];
        }
      },

      /**
       * Array of user created Markers
       */
      _userMarkers: {
        type: Array,
        notify: true,
        value: function () {
          return [];
        }
      }
    },

    attached: function () {
      var self = this;
      this.addEventListener('update-gn-map', function () {
          self.splice('polygons', -1);
          self.splice('markers', -1);

          self.queryAllEffectiveChildren('gn-poly').forEach(function (polygon) {
            self.push('polygons', polygon.asObject());
          });
          self._userPolygons.forEach(function (polygon) {
            self.push('polygons', polygon);
          });

          self.queryAllEffectiveChildren('gn-marker').forEach(function (marker) {
            self.push('markers', marker.asObject());
          });
          self._userMarkers.forEach(function (marker) {
            self.push('markers', marker);
          });
      });    
    },

    addPolygon: function (points, strokeColor, width, closed, fillColor, fillOpacity) {
      points = (typeof points === 'undefined') ? [] : points;
      strokeColor = (typeof strokeColor === 'undefined') ? '#0091ea' : strokeColor;
      width = (typeof width === 'undefined') ? 4 : width;
      closed = (typeof closed === 'undefined') ? false : closed;
      fillColor = (typeof fillColor === 'undefined') ? '#00960a' : fillColor;
      fillOpacity = (typeof fillOpacity === 'undefined') ? '0.5' : fillOpacity;

      polygon = {
        strokeColor: strokeColor,
        width: width,
        closed: closed,
        fillColor: fillColor,
        points : points,
        fillOpacity : fillOpacity
      }

      this.push('_userPolygons', polygon);
      this.fire('update-gn-map');
    },

    addMarker: function (latitude, longitude) {
      this.push('_userMarkers', {
        longitude: Number(longitude),
        latitude: Number(latitude)
      });
      this.fire('update-gn-map');
    },

    _typeIsOpenStreetMap: function (mapType) {
        return mapType === 'OpenStreetMap';
    },

    _typeIsGoogleMap: function (mapType) {      
        return mapType === 'GoogleMap';
    }
  });
</script>

</dom-module>