gn-map.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-map/google-map.html">
<link rel="import" href="../osm-map/osm-map.html">
<!--
    
Maps are canvases on which the geographical maps get displayed via any given source.
Features like markers, polygons or polylines can be attached to the map.

@demo
-->

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

    <template is="dom-if" if="_typeIsOpenStreetMap(mapType)">
      <osm-map><content></content></osm-map>
    </template>

    <template is="dom-if" if="_typeIsGoogleMap(mapType)">
      <google-map><content></content></google-map>
    </template>

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

    properties: {
      mapType: {
        type: String,
        value:"GooleMap",
        notify: true
      },

      map: Object,
      center: {
        type: Object,
        observer: "setCenter"
      },
    },

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

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

</dom-module>