leaflet-draw.html

<link rel="import" href="leaflet-core.html">
<link rel="import" href="leaflet-popup.html">

<!--
element which defines am abstract leaflet path (<a href="http://leafletjs.com/reference.html#path">Leaflet Reference</a>).

Do not use this element directly.

@element leaflet-path
@blurb element which defines am abstract leaflet path. Do not use directly. Most options are supported as attributes. 
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
@homepage https://leaflet-extras.github.io/leaflet-map/
-->
<script>

	window.leafletMap = window.leafletMap || {};
	window.leafletMap.Mixins = window.leafletMap.Mixins || {};

  /**
   * @polymer
   * @mixinFunction
	 *    */
	leafletMap.Mixins.LeafletPath = Polymer.dedupingMixin((baseClass) => class extends baseClass	{
		/**
		 * Fired when the user clicks (or taps) the object.
		 *
		 * @event click
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the user double-clicks (or double-taps) the object.
		 *
		 * @event dblclick
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the user pushes the mouse button on the object.
		 *
		 * @event mousedown
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the mouse enters the object.
		 *
		 * @event mouseover
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */
	
		/**
		 * Fired when the mouse leaves the object.
		 *
		 * @event mouseout
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */
	
		/**
		 * Fired when the user right-clicks on the object.
		 *
		 * @event contextmenu
		 * @type MouseEvent
		 */

		/**
		 * Fired when the object is added to the map.
		 *
		 * @event add
		 * @type
		 */

		/**
		 * Fired when the object is removed from the map.
		 *
		 * @event remove
		 */

		/**
		 * Fired when a popup bound to the object is open.
		 *
		 * @event popupopen
		 * @type PopupEvent
		 * @param {Popup} popup The popup that was opened or closed.
		 */

		/**
		 * Fired when a popup bound to the object is closed.
		 *
		 * @event popupclose
		 * @type PopupEvent
		 * @param {Popup} popup The popup that was opened or closed.
		 */

		static get properties() {
			return {
				/**
			 * The attribute `stroke` sets whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.
			 *
			 * @attribute stroke
			 * @type boolean
			 */
				noStroke: {
					type: Boolean,
					value: false
				},

				/**
				 * The attribute `color` sets the stroke color.
				 *
				 * @attribute color
				 * @type string
				 */
				color: {
					type: String,
					value: '#03f'
				},

				/**
				 * The attribute `weight` sets the stroke width in pixels.
				 *
				 * @attribute weight
				 * @type number
				 */
				weight: {
					type: Number,
					value: 5
				},

				/**
				 * The attribute `opacity` sets the stroke opacity.
				 *
				 * @attribute opacity
				 * @type number
				 */
				opacity: {
					type: Number,
					value: 0.5
				},

				/**
				 * The attribute `fill` sets the whether to fill the path with color. Set it to false to disable filling on polygons or circles.
				 *
				 * @attribute fill
				 * @type boolean
				 */
				fill: {
					type: Boolean,
					value: null
				},

				/**
				 * The attribute `fill-color` sets the fill color.
				 *
				 * @attribute fill-color
				 * @type string
				 */
				fillColor: {
					type: String,
					value: null
				},

				/**
				 * The attribute `fill-opacity` sets the fill opacity.
				 *
				 * @attribute fill-opacity
				 * @type number
				 */
				fillOpacity: {
					type: Number,
					value: 0.2
				},

				/**
				 * The attribute `dash-array` sets a string that defines the stroke dash pattern. Doesn't work on canvas-powered layers (e.g. Android 2).
				 *
				 * @attribute dash-array
				 * @type string
				 */
				dashArray: {
					type: String,
					value: null
				},

				/**
				 * The attribute `line-cap` defines the shape to be used at the end of the stroke.
				 *
				 * @attribute line-cap
				 * @type string
				 */
				lineCap: {
					type: String,
					value: null
				},

				/**
				 * The attribute `line-join` sets the string that defines shape to be used at the corners of the stroke.
				 *
				 * @attribute line-join
				 * @type string
				 */
				lineJoin: {
					type: String,
					value: null
				},

				/**
				 * The attribute `clickable` sets whether the vector will emit mouse events or will act as a part of the underlying map.
				 *
				 * @attribute clickable
				 * @type boolean
				 */
				noClickable: {
					type: Boolean,
					value: false
				},

				/**
				 * The attribute `pointer-events` sets the pointer-events attribute on the path if SVG backend is used.
				 *
				 * @attribute pointer-events
				 * @type string
				 */
				pointerEvents: {
					type: String,
					value: null
				},

				/**
				 * The attribute `class-name` sets the custom class name set on an element.
				 *
				 * @attribute class-name
				 * @type string
				 */
				className: {
					type: String,
					value: ''
				}
			};
		}

		getPathOptions() {
			return {
				stroke: !this.noStroke,
				color: this.color,
				weight: this.weight,
				opacity: this.opacity,
				fill: this.fill,
				fillColor: this.fillColor,
				fillOpacity: this.fillOpacity,
				dashArray: this.dashArray,
				lineCap: this.lineCap,
				lineJoin: this.lineJoin,
				clickable: !this.noClickable,
				pointerEvents: this.pointerEvents,
				className: this.className
			};
		}
	});

	leafletMap.Mixins.LeafletPointContent = Polymer.dedupingMixin((baseClass) => class extends baseClass {
		connectedCallback() {
			if (MutationObserver && !this.observer_) {
				this.observer_ = new MutationObserver(this.updatePointContent.bind(this));
				this.observer_.observe(this, { childList: true, characterData: true, attributes: true, subtree: true });
			}
		}

		updatePointContent() {
			if (!this.feature) {
				return;
			}
			var temp = [];
			var i;
			var nodes = this.children;
			for (i = 0; i < nodes.length; i++) {
				if (nodes[i].localName == 'leaflet-point') {
					temp.push(L.latLng(
						nodes[i].getAttribute('latitude'),
						nodes[i].getAttribute('longitude')
					));
				}
			}
			this.feature.setLatLngs(temp);
		}
	
		disconnectedCallback() {
			if (this.observer_) {
				this.observer_.disconnect();
			}
		}
	});
</script>





<!--
The `leaflet-circle` element represents a circle on the map and is used as
a child element of the `leaflet-map` element.


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

@element leaflet-circle
@blurb Element for putting a circle on the map
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
@homepage https://leaflet-extras.github.io/leaflet-map/
-->
<dom-module id="leaflet-circle">
	<style>
		:host {
			display: none;
		}
	</style>
	<template>
	</template>
	<script>
		'use strict';
    const circleMixins = leafletMap.Mixins.LeafletPointContent(
			leafletMap.Mixins.LeafletPath(Polymer.Element)
		);

		class LeafletCircle extends circleMixins {
			static get is() {
				return 'leaflet-circle';
			}
		

			static get properties() {
				return {
					/**
				 * The circle's longitude coordinate
				 *
				 * @attribute longitude
				 * @type number
				 * @default null
				 */
				longitude: {
					type: Number,
					observer: '_updatePosition'
				},

				/**
			 * A Leaflet circle object
			 *
			 * @property feature
			 * @type L.circle
			 * @default null
			 */
			 feature: {
				 type: Object,
				 value: null
			 },

				/**
				 * The circle's latitude coordinate
				 *
				 * @attribute latitude
				 * @type number
				 * @default null
				 */
				latitude: {
					type: Number,
					observer: '_updatePosition'
				},

				/**
				 * The circle's radius is metres
				 *
				 * @attribute radius
				 * @type number
				 * @default 100
				 */
				radius: {
					type: Number,
					value: 100,
					observer: '_updateRadius'
				},

				container: {
					type: Object,
					observer: '_containerChanged'
				}
			};
			}


			_containerChanged() {
				if (this.latitude && this.longitude && this.container) {
					this.feature = L.circle([this.latitude, this.longitude], this.radius, this.getPathOptions());
					this.feature.addTo(this.container);
					this.updatePopupContent();

					// forward events
					this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
						this.dispatchEvent(new CustomEvent(e.type, e));
					}, this);
				}
			}

			_updatePosition() {
				if (this.feature && this.latitude != null && this.longitude != null) {
					this.feature.setLatLng(L.latLng(this.latitude, this.longitude));
				}
			}

			_updateRadius() {
				if (this.feature && this.radius != null) {
					this.feature.setRadius(this.radius);
				}
			}

			disconnectedCallback() {
				if (this.container && this.feature) {
					this.container.removeLayer(this.feature);
				}
			}
		}
		window.customElements.define(LeafletCircle.is, LeafletCircle);

	</script>
</dom-module>




<!--
The `leaflet-point` element represents one point in an polyline on the map and is used as
a child element of the `leaflet-polyline` element.

##### Example: Add polylines
    <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
        <leaflet-polyline>
            <leaflet-point longitude="77.22" latitude="28.44"></leaflet-point>
            <leaflet-point longitude="77.44" latitude="28.66"></leaflet-point>
        </leaflet-polyline>
    </leaflet-map>

@element leaflet-point
@blurb Element for adding a point to a polyline
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
@homepage https://leaflet-extras.github.io/leaflet-map/
-->
<dom-module id="leaflet-point">
	<script>
		class LeafletPoint extends Polymer.Element {
			static get is() { return 'leaflet-point'; }

			static get properties() {
				return {
					latitude: {
						type: Number,
						value: 0,
						reflectToAttribute: true
					},
					longitude: {
						type: Number,
						value: 0,
						reflectToAttribute: true
					}
				};
			}
		}
		window.customElements.define(LeafletPoint.is, LeafletPoint);

	</script>
</dom-module>



<!--
The `leaflet-polyline` element represents a polyline on the map and is used as
a child element of the `leaflet-map` element. To compose the line one needs to
add `leaflet-point` elements inside it.


##### Example: Add polylines
    <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
        <leaflet-polyline>
            <leaflet-point longitude="77.22" latitude="28.44"></leaflet-point>
            <leaflet-point longitude="77.44" latitude="28.66"></leaflet-point>
        </leaflet-polyline>
    </leaflet-map>

@element leaflet-polyline
@blurb Element for putting a polyline on the map
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
@homepage https://leaflet-extras.github.io/leaflet-map/
-->

<dom-module id="leaflet-polyline">
	<style>
		:host{ display: none; }
	</style>
	<template>
		<content id="points" select="leaflet-point"></content>
	</template>

<script>
	'use strict';
  const polylineMixin = leafletMap.Mixins.LeafletPath(
		leafletMap.Mixins.LeafletPointContent(
			leafletMap.Mixins.LeafletPopupContent(Polymer.Element)
		)
	);
	class LeafletPolyline extends polylineMixin {
		static get is() {return 'leaflet-polyline';}
	

		static get properties() {
		return {
				/**
		 * A Leaflet [Polyline](http://leafletjs.com/reference.html#polyline) object
		 *
		 * @property feature
		 * @type L.polyline
		 * @default null
		 */
		feature: null,
			container: {
				type: Object,
				observer: '_containerChanged'
			} };
		}

		_containerChanged() {
			if (this.container) {
				this.feature = L.polyline([], this.getPathOptions());
				this.feature.addTo( this.container );
				this.updatePointContent();
				this.updatePopupContent();

				// forward events
				this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
					this.dispatchEvent(new CustomEvent(e.type, e));
				}, this);
			}
		}

		disconnectedCallback() {
			if (this.container && this.feature) {
				this.container.removeLayer(this.feature);
			}
		}
	}
	window.customElements.define(LeafletPolyline.is, LeafletPolyline);

</script>
</dom-module>


<!--
The `leaflet-polygon` element represents a polygon on the map and is used as
a child element of the `leaflet-map` element. To compose the line one needs to
add `leaflet-point` elements inside it.


##### Example: Add polygona
    <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
        <leaflet-polygon>
            <leaflet-point longitude="77.1000" latitude="13.3400"></leaflet-point>
            <leaflet-point longitude="77.5000" latitude="13.5500"></leaflet-point>
            <leaflet-point longitude="77.7200" latitude="12.7200"></leaflet-point>
        </leaflet-polygon>
    </leaflet-map>

@element leaflet-polygon
@blurb Element for putting a polygon on the map
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
@homepage https://leaflet-extras.github.io/leaflet-map/
-->

<dom-module id="leaflet-polygon">
	<style>
		:host {
			display: none;
		}
	</style>
	<template>
		<content id="points"
		         select="leaflet-point"></content>
	</template>

	<script>
		'use strict';
		const polygonMixin = leafletMap.Mixins.LeafletPath(
			leafletMap.Mixins.LeafletPointContent(
				leafletMap.Mixins.LeafletPopupContent(Polymer.Element)
			)
		);
		class LeafletPolygon extends polygonMixin {
			static get is() { return 'leaflet-polygon'; }

			static get properties() {
				return {
					container: {
						type: Object,
						observer: '_containerChanged'
					},
					/**
				 * A Leaflet [Polygon](http://leafletjs.com/reference.html#polygon) object
				 *
				 * @property feature
				 * @type L.polygon
				 * @default null
				 */
					feature: null
				};
			}


	_containerChanged() {
		if (this.container) {
			var opt = this.getPathOptions();
			if (typeof opt.fill === 'undefined' || opt.fill === null) {
				opt.fill = true;
			}
			this.feature = L.polygon([], opt);
			this.feature.addTo(this.container);
			this.updatePointContent();
			this.updatePopupContent();

			// forward events
			this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
				this.dispatchEvent(new CustomEvent(e.type, e));
			}, this);
		}
	}

	disconnectedCallback() {
		if (this.container && this.feature) {
			this.container.removeLayer(this.feature);
		}
	}
}
window.customElements.define(LeafletPolygon.is, LeafletPolygon);

</script>
</dom-module>