osm-poly.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="osm-point.html">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>

<!--
The `osm-poly` element provides a possibility to draw on the `osm-map`element.

Example:

    <osm-poly fill fill-color="rgba(0,10,150,0.4)">
        <template is="dom-repeat" items="{{ points }}">
          <osm-point longitude$="{{ item.longitude }}" latitude$="{{ item.latitude }}"></osm-point>
        </template>
    </osm-poly> 

@demo demo/index.html
-->

<dom-module id="osm-poly">
  <script>
    Polymer({
      is: 'osm-poly',
      properties: {
        /**
         * The stroke color.
         */ 
        strokeColor: {
          type: String,
          value: '#0091ea',
          notify: true
        },

        /**
         * A stroke width.
         */
        width: {
          type: Number,
          value: 4,
          notify: true
        },

        /**
         * If true the polygon will be filled and connect the last with the first node.
         */
        closed: {
          type: Boolean,
          value: false,
          notify: true
        },

        /**
         * Defines a fill color for the polygon. Requires fill = true. 
         */
        fillColor: {
          type: String,
          value: 'rgba(0,150,10,0.4)',
          notify: true
        },

        /**
         * The polygon interior transparency  
         */
        fillOpacity: {
          type: Number,
          value: 0,
          notify: true
        }
      },

      attached: function (argument) {
        this._observer = Polymer.dom(this).observeNodes( function(info) {
          this.fire('update-layers');
        });
      },

      _computeColor: function() {
        if (this.fillColor.charAt(0) == "#") {
          var h = "0123456789abcdef";
          var hex = this.fillColor.toLowerCase();
          var r = h.indexOf(hex[1])*16+h.indexOf(hex[2]);
          var g = h.indexOf(hex[3])*16+h.indexOf(hex[4]);
          var b = h.indexOf(hex[5])*16+h.indexOf(hex[6]);
          return "rgba("+r+", "+g+", "+b+", "+fillOpacity+")";
        }
        else if (this.fillColor.substring(0, 4).toLowerCase() == "rgba") {
          console.warn('Polygon fill-color is an rgba value so fill-opacity will be overwritten!' 
          + ' You shout better use an rgb or hex value combined with fill-opacity attribute.');
          return this.fillColor;
        }
        else if (this.fillColor.substring(0, 4).toLowerCase() == "rgb(") {
          return "rgba"+this.fillColor.slice(3,-1)+","+this.fillOpacity+")";
        }
        else { // assume this.fillColor must be a name like blue, white, black
          dummy = document.createElement("div");
          dummy.style.color = this.fillColor;
          document.body.appendChild(dummy);
          var rgbColor = window.getComputedStyle(dummy).color;
          document.body.removeChild(dummy);
          return "rgba"+rgbColor.slice(3,-1)+","+this.fillOpacity+")";
        };
      },

      polygon: function() {
        var points = [];
        $.each(this.queryAllEffectiveChildren('osm-point'), function(index, point) {
          points.push(point.position());
        });

        var features;
        if(this.closed) {
          features = new ol.Feature({
              geometry: new ol.geom.Polygon([points])
          });
          features.getGeometry().transform('EPSG:4326', 'EPSG:3857');
        }
        else {
          var geometry = new ol.geom.LineString(points, 'XY');
          geometry.transform('EPSG:4326', 'EPSG:3857')
          features = new ol.Feature({ geometry: geometry });     
        }

        return new ol.layer.Vector({
          source: new ol.source.Vector({
              features: [features]
          }),
          style: new ol.style.Style({
              stroke: new ol.style.Stroke({ color: this.strokeColor, width: this.width }),
              fill: new ol.style.Fill({
                color: this.closed ? this._computeColor() : 'rgba(0,0,0,0)'
              })
          }),
          name: 'routeLayer'
        });
      }
    });
  </script>
</dom-module>