leaflet-geojson.html

<link rel="import"
      href="../polymer/polymer.html">
<link rel="import"
      href="leaflet-import.html">
<link rel="import"
      href="leaflet-layer.html">
<!--
A GeoJson layer (<a href="http://leafletjs.com/reference.html#geojson">Leaflet Reference</a>).

##### Example

    <leaflet-map longitude="-104.99404" latitude="39.75621" zoom="12">
        <leaflet-geojson
            data="{{ {'type': 'Feature', 'properties': {'name': 'Coors Field','popupContent': 'Yo popup'},'geometry': {'type': 'Point','coordinates': [-104.99404, 39.75621]}}}}">
        </leaflet-geojson>
    </leaflet-map>



@element leaflet-geojson
@blurb an element which represents a geojson layer
@status beta
@homepage https://leaflet-extras.github.io/leaflet-map/
-->

<dom-element name="leaflet-geojson">
	<template>
		<style>
			:host {
				display: none;
			}
		</style>
	</template>
	<script>
		'use strict';

		class LeafletGeojson extends leafletMap.Mixins.LeafletILayer(Polymer.Element) {
			static get is() { return 'leaflet-geojson'; }

			static get properties() {
				return {
					/**
				 * data as geojson object
				 *
				 * @property data
				 * @type Object
				 */
					data: {
						type: Object,
						observer: '_dataChanged'
					},

					container: {
						type: Object,
						observer: '_containerChanged'
					},
					/**
		
						/**
						 * 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
					}
				};

			}

			_containerChanged() {
				if (this.container && this.data) {
					this._dataChanged();
				}
			}

			_dataChanged() {
				if (this.container && this.data) {
					if (this.feature) {
						this.container.removeLayer(this.feature);
					}
					this.feature = L.geoJson(this.data);

					this.feature.addTo(this.container)
						.setStyle({
							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
						});
				}
			}

			disconnectedCallback() {
				if (this.container && this.feature) {
					this.container.removeLayer(this.feature);
				}
			}
		}
	</script>
</dom-element>