diff --git a/.bower.json b/.bower.json
new file mode 100644
index 0000000..04a36a3
--- /dev/null
+++ b/.bower.json
@@ -0,0 +1,40 @@
+{
+  "name": "leaflet-map",
+  "version": "1.2.0",
+  "authors": [
+    "Hendrik Brummermann <nhnb@users.sourceforge.net>",
+    "Prateek Saxena <prtksxna@gmail.com>"
+  ],
+  "description": "Leaflet map as web-component based on polymer",
+  "main": "leaflet-map.html",
+  "homepage": "https://leaflet-extras.github.io/leaflet-map/",
+  "keywords": [
+    "polymer",
+    "web-components",
+    "leaflet",
+    "leafletjs",
+    "map"
+  ],
+  "license": "BSD 2-Clause",
+  "ignore": [
+    "**/.*",
+    "demo.html",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "^1.0.0",
+    "leaflet": "^0.7.3"
+  },
+  "_release": "1.2.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.2.0",
+    "commit": "d90a2f6d83c150c71a2461b9eb662e3a5aa96622"
+  },
+  "_source": "https://github.com/leaflet-extras/leaflet-map.git",
+  "_target": "^1.2.0",
+  "_originalSource": "leaflet-map"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 8769538..6f43671 100644
--- a/README.md
+++ b/README.md
@@ -102,7 +102,7 @@ especially the api documentation, have been copied into leaflet-map files.
 * [Polymer](https://github.com/polymer/polymer/blob/master/LICENSE.txt)
 
 
-Copyright (c) 2014-2016
+Copyright (c) 2014-2015
 Hendrik Brummermann, Prateek Saxena
 
 All rights reserved.
diff --git a/leaflet-control.html b/leaflet-control.html
index 6875c1e..40e35a6 100644
--- a/leaflet-control.html
+++ b/leaflet-control.html
@@ -18,100 +18,105 @@
 @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 -->
 
-<dom-module id="leaflet-scale-control">
-	<style>
-		:host {display: none;}
-	</style>
-	<template>
-	</template>
-	<script>
-	"use strict";
+<dom-module id="leaflet-scale-control"><style>
+	:host {
+		display: none;
+	}
+</style>
+<template>
+</template>
+<script>
+	'use strict';
 
-	Polymer({
-		is: 'leaflet-scale-control',
+	class LeafletScaleControl extends Polymer.Element {
+		static get is() { return 'leaflet-scale-control'; }
 
-		properties: {
+		static get properties() {
 
-			/**
+			return {
+				/**
 			 * The `position` attribute sets the position of the control (one of the map corners). See control positions.
-			 * 
+			 *
 			 * @attribute position
 			 * @type string
 			 */
-			position: {
-				type: String,
-				value: "bottomleft"
-			},
-	
-			/**
-			 * The `max-width` attribute sets the maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500).
-			 * 
-			 * @attribute max-width
-			 * @type number
-			 */
-			maxWidth: {
-				type: Number,
-				value: 100
-			},
-	
-			/**
-			 * The `metric` attribute sets whether to show the metric scale line (m/km).
-			 * 
-			 * @attribute metric
-			 * @type boolean
-			 */
-			metric: {
-				type: Boolean,
-				value: false
-			},
-	
-			/**
-			 * The `imperial` attribute sets whether to show the imperial scale line (mi/ft).
-			 * 
-			 * @attribute imperial 
-			 * @type boolean
-			 */
-			imperial: {
-				type: Boolean,
-				value: false
-			},
-	
-			/**
-			 * The `update-when-idle` attribute sets whether the control is updated on moveend, otherwise it's always up-to-date (updated on move).
-			 * 
-			 * @attribute update-when-idle
-			 * @type boolean
-			 */
-			updateWhenIdle: {
-				type: Boolean,
-				value: false
-			},
-
-			container: {
-				type: Object,
-				observer: '_containerChanged'
-			}
-		},
+				position: {
+					type: String,
+					value: 'bottomleft'
+				},
 
-		_containerChanged: function() {
+				/**
+				 * The `max-width` attribute sets the maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500).
+				 *
+				 * @attribute max-width
+				 * @type number
+				 */
+				maxWidth: {
+					type: Number,
+					value: 100
+				},
+
+				/**
+				 * The `metric` attribute sets whether to show the metric scale line (m/km).
+				 *
+				 * @attribute metric
+				 * @type boolean
+				 */
+				metric: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `imperial` attribute sets whether to show the imperial scale line (mi/ft).
+				 *
+				 * @attribute imperial
+				 * @type boolean
+				 */
+				imperial: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `update-when-idle` attribute sets whether the control is updated on moveend, otherwise it's always up-to-date (updated on move).
+				 *
+				 * @attribute update-when-idle
+				 * @type boolean
+				 */
+				updateWhenIdle: {
+					type: Boolean,
+					value: false
+				},
+
+				container: {
+					type: Object,
+					observer: '_containerChanged'
+				}
+			};
+		}
+
+		_containerChanged() {
 			if (this.container) {
 				var control = L.control.scale({
-					 position: this.position,
-					 maxWidth: this.maxWidth,
-					 metric: this.metric || !this.imperial,
-					 imperial: this.imperial || !this.metric,
-					 updateWhenIdle: this.updateWhenIdle,
+					position: this.position,
+					maxWidth: this.maxWidth,
+					metric: this.metric || !this.imperial,
+					imperial: this.imperial || !this.metric,
+					updateWhenIdle: this.updateWhenIdle
 				});
 				this.control = control;
 				this.control.addTo(this.container);
 			}
-		},
+		}
 
-		detached: function() {
+		disconnectedCallback() {
 			if (this.container && this.control) {
 				this.container.removeControl(this.control);
 			}
 		}
-	});
-	</script>
+	}
+
+	window.customElements.define(LeafletScaleControl.is, LeafletScaleControl);
+</script>
 </dom-module>
diff --git a/leaflet-core.html b/leaflet-core.html
index 630a9b8..1df5ac2 100644
--- a/leaflet-core.html
+++ b/leaflet-core.html
@@ -1,11 +1,11 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="leaflet-import.html">
 
 <!--
 element which defines a leaflet map (<a href="http://leafletjs.com/reference.html#map">Leaflet Reference</a>).
 
 ##### Example
-
+ 
     <leaflet-map> </leaflet-map>
 
 This simple example will show a map of the world. It is pan and zoomable.
@@ -40,24 +40,28 @@
 @homepage https://leaflet-extras.github.io/leaflet-map/
 @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 -->
+<link rel="import" href="styles/leaflet-styles.html">
 <dom-module id="leaflet-map">
-	<style>
-		:host { display: block; }
-		:host #map {height:100%; width:100%}
-	</style>
-	<!-- include stylesheet for shady dom and shadow dom -->
-	<link rel="stylesheet" href="../leaflet/dist/leaflet.css" />
-	<link rel="import" type="css" href="../leaflet/dist/leaflet.css" />
 	<template>
+
+		<style include="leaflet-styles">
+			:host {
+				display: block;
+			}
+			:host #map {
+				height: 100%;
+				width: 100%
+			}
+		</style>
 		<div id="map"></div>
-		<content id="markers" select="*"></content>
-  	</template>
-</dom-module>
-<script>
-	"use strict";
+		<slot name="markers" id="markers"></slot>
+	</template>
+	<script>
+		'use strict';
+
+	class LeafletMap extends Polymer.Element {
+		static get is() { return 'leaflet-map'; }
 
-	Polymer({
-		is: 'leaflet-map',
 
 		/**
 		 * Fired when the user clicks (or taps) the marker.
@@ -318,320 +322,329 @@
 		 */
 
 
-		properties: {
+		static get properties() {
 
-			/**
+			return {
+				/**
 			 * The `latitude` attribute sets the map center.
 			 *
 			 * @attribute latitude
 			 * @type number
 			 */
-			latitude: {
-				type: Number,
-				value: 51,
-				reflectToAttribute: true,
-				notify: true,
-				observer: '_viewChanged'
-			},
-
-			/**
-			 * The `longitude` attribute sets the map center.
-			 *
-			 * @attribute longitude
-			 * @type number
-			 */
-			longitude: {
-				type: Number,
-				value: 0,
-				reflectToAttribute: true,
-				notify: true,
-				observer: '_viewChanged'
-			},
-
-			/**
-			 * The `zoom` attribute sets the map zoom.
-			 *
-			 * @attribute zoom
-			 * @type number
-			 */
-			zoom: {
-				type: Number,
-				value: -1,
-				reflectToAttribute: true,
-				notify: true,
-				observer: '_viewChanged'
-			},
-
-
-			/**
-			 * The `min-zoom` attribute sets the minimum zoom level of the map. Overrides any minZoom set on map layers.
-			 *
-			 * @attribute min-zoom
-			 * @type number
-			 */
-			minZoom: {
-		    	 type: Number,
-		    	 value: 0
-			},
-
-			/**
-			 * The `maxZoom` attribute sets the maximum zoom level of the map. This overrides any maxZoom set on map layers.
-			 *
-			 * @attribute max-zoom
-			 * @type number
-			 */
-			maxZoom: {
-		    	 type: Number,
-		    	 value: 9007199254740992
-			},
-
-			/**
-			 * The `no-dragging` attribute disables whether the map is draggable with mouse/touch or not.
-			 *
-			 * @attribute no-dragging
-			 * @type bool
-			 */
-			noDragging: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-touch-zoom` attribute disables whether the map can be zoomed by touch-dragging with two fingers.
-			 *
-			 * @attribute no-touch-zoom
-			 * @type bool
-			 */
-			noTouchZoom: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-scroll-wheel-zoom` attribute disables whether the map can be zoomed by using the mouse wheel. If passed 'center', it will zoom to the center of the view regardless of where the mouse was.
-			 *
-			 * @attribute no-scroll-wheel-zoom
-			 * @type bool
-			 */
-			noScrollWheelZoom: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-double-click-zoom` attribute disables the whether the map can be zoomed in by double clicking on it and zoomed out by double clicking while holding shift. If passed 'center', double-click zoom will zoom to the center of the view regardless of where the mouse was.
-			 *
-			 * @attribute no-double-click-zoom
-			 * @type bool
-			 */
-			noDoubleClickZoom: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-box-zoom` attribute disable the whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing shift.
-			 *
-			 * @attribute no-box-zoom
-			 * @type bool
-			 */
-			noBoxZoom: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-tap` attribute disables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events).
-			 *
-			 * @attribute no-tap
-			 * @type bool
-			 */
-			noTap: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `tap-tolerance` attribute sets the max number of pixels a user can shift his finger during touch for it to be considered a valid tap.
-			 *
-			 * @attribute tap-tolerance
-			 * @type number
-			 */
-			tapTolerance: {
-		    	 type: Number,
-		    	 value: 15
-			},
-
-			/**
-			 * The `no-track-resize` attribute disables whether the map automatically handles browser window resize to update itself.
-			 *
-			 * @attribute no-track-resize
-			 * @type bool
-			 */
-			noTrackResize: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `world-copy-jump` attribute sets whether the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.
+				latitude: {
+					type: Number,
+					value: 51,
+					reflectToAttribute: true,
+					notify: true,
+					observer: '_viewChanged'
+				},
+
+				/**
+				 * The `longitude` attribute sets the map center.
+				 *
+				 * @attribute longitude
+				 * @type number
+				 */
+				longitude: {
+					type: Number,
+					value: 0,
+					reflectToAttribute: true,
+					notify: true,
+					observer: '_viewChanged'
+				},
+
+				/**
+				 * The `zoom` attribute sets the map zoom.
+				 *
+				 * @attribute zoom
+				 * @type number
+				 */
+				zoom: {
+					type: Number,
+					value: -1,
+					reflectToAttribute: true,
+					notify: true,
+					observer: '_viewChanged'
+				},
+
+
+				/**
+				 * The `min-zoom` attribute sets the minimum zoom level of the map. Overrides any minZoom set on map layers.
+				 *
+				 * @attribute min-zoom
+				 * @type number
+				 */
+				minZoom: {
+					type: Number,
+					value: 0
+				},
+
+				/**
+				 * The `maxZoom` attribute sets the maximum zoom level of the map. This overrides any maxZoom set on map layers.
+				 *
+				 * @attribute max-zoom
+				 * @type number
+				 */
+				maxZoom: {
+					type: Number,
+					value: 9007199254740992
+				},
+
+				/**
+				 * The `no-dragging` attribute disables whether the map is draggable with mouse/touch or not.
+				 *
+				 * @attribute no-dragging
+				 * @type bool
+				 */
+				noDragging: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-touch-zoom` attribute disables whether the map can be zoomed by touch-dragging with two fingers.
+				 *
+				 * @attribute no-touch-zoom
+				 * @type bool
+				 */
+				noTouchZoom: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-scroll-wheel-zoom` attribute disables whether the map can be zoomed by using the mouse wheel. If passed 'center', it will zoom to the center of the view regardless of where the mouse was.
+				 *
+				 * @attribute no-scroll-wheel-zoom
+				 * @type bool
+				 */
+				noScrollWheelZoom: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-double-click-zoom` attribute disables the whether the map can be zoomed in by double clicking on it and zoomed out by double clicking while holding shift. If passed 'center', double-click zoom will zoom to the center of the view regardless of where the mouse was.
+				 *
+				 * @attribute no-double-click-zoom
+				 * @type bool
+				 */
+				noDoubleClickZoom: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-box-zoom` attribute disable the whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing shift.
+				 *
+				 * @attribute no-box-zoom
+				 * @type bool
+				 */
+				noBoxZoom: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-tap` attribute disables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events).
+				 *
+				 * @attribute no-tap
+				 * @type bool
+				 */
+				noTap: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `tap-tolerance` attribute sets the max number of pixels a user can shift his finger during touch for it to be considered a valid tap.
+				 *
+				 * @attribute tap-tolerance
+				 * @type number
+				 */
+				tapTolerance: {
+					type: Number,
+					value: 15
+				},
+
+				/**
+				 * The `no-track-resize` attribute disables whether the map automatically handles browser window resize to update itself.
+				 *
+				 * @attribute no-track-resize
+				 * @type bool
+				 */
+				noTrackResize: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `world-copy-jump` attribute sets whether the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.
+				 *
+				 * @attribute world-copy-jump
+				 * @type bool
+				 */
+				worldCopyJump: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-close-popup-on-click` attribute disables whether popups are closed when user clicks the map.
+				 *
+				 * @attribute no-close-popup-on-click
+				 * @type bool
+				 */
+				noClosePopupOnClick: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-bounce-at-zoom-limits` attribute disables whether the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.
+				 *
+				 * @attribute no-bounce-at-zoom-limits
+				 * @type bool
+				 */
+				noBounceAtZoomLimits: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-keyboard` attribute disables whether the map is focusable and allows users to navigate the map with keyboard arrows and +/- keys.
+				 *
+				 * @attribute no-keyboard
+				 * @type bool
+				 */
+				noKeyboard: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `keyboard-pan-offset` attribute sets the amount of pixels to pan when pressing an arrow key.
+				 *
+				 * @attribute keyboard-pan-offset
+				 * @type number
+				 */
+				keyboardPanOffset: {
+					type: Number,
+					value: 80
+				},
+
+				/**
+				 * The `keyboard-zoom-offset` attribute sets the number of zoom levels to change when pressing + or - key.
+				 *
+				 * @attribute keyboard-zoom-offset
+				 * @type number
+				 */
+				keyboardZoomOffset: {
+					type: Number,
+					value: 1
+				},
+
+				/**
+				 * The `no-inertia` attribute disables panning of the map will have an inertia effect where the map builds momentum while dragging and continues moving in the same direction for some time. Feels especially nice on touch devices.
+				 *
+				 * @attribute no-inertia
+				 * @type
+				 */
+				noInertia: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `inertia-deceleration` attribute sets the rate with which the inertial movement slows down, in pixels/second2.
+				 *
+				 * @attribute inertia-deceleration
+				 * @type number
+				 */
+				inertiaDeceleration: {
+					type: Number,
+					value: 3000
+				},
+
+				/**
+				 * The `inertia-max-speed` attribute sets the max speed of the inertial movement, in pixels/second.
+				 *
+				 * @attribute inertia-max-speed
+				 * @type number
+				 */
+				inertiaMaxSpeed: {
+					type: Number,
+					value: 1500
+				},
+
+				/**
+				 * The `no-zoom-control` attribute disables the zoom control is added to the map by default.
+				 *
+				 * @attribute no-zoom-control
+				 * @type bool
+				 */
+				noZoomControl: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-attribution-control` attribute disable the attribution control is added to the map by default.
+				 *
+				 * @attribute no-attribution-control
+				 * @type bool
+				 */
+				noAttributionControl: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `zoom-animation-threshold` attribute sets the maximum number of zoom level differences that still use animation
+				 *
+				 * @attribute zoom-animation-threshold
+				 * @type number
+				 */
+				zoomAnimationThreshold: {
+					type: Number,
+					value: 4
+				},
+
+				/**
+						* If set, the map is zoomed such that all elements in it are visible
+						*
+						* @attribute fit-to-markers
+						* @type boolean
+						* @default false
+						*/
+				fitToMarkers: {
+					type: Boolean,
+					value: false,
+					observer: '_fitToMarkers'
+				},
+				/**
+			 * reference to the leaflet map
 			 *
-			 * @attribute world-copy-jump
-			 * @type bool
+			 * @property map
+			 * @type L.map
 			 */
-			worldCopyJump: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-close-popup-on-click` attribute disables whether popups are closed when user clicks the map.
-			 *
-			 * @attribute no-close-popup-on-click
-			 * @type bool
-			 */
-			noClosePopupOnClick: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-bounce-at-zoom-limits` attribute disables whether the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.
-			 *
-			 * @attribute no-bounce-at-zoom-limits
-			 * @type bool
-			 */
-			noBounceAtZoomLimits: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `no-keyboard` attribute disables whether the map is focusable and allows users to navigate the map with keyboard arrows and +/- keys.
-			 *
-			 * @attribute no-keyboard
-			 * @type bool
-			 */
-			noKeyboard: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `keyboard-pan-offset` attribute sets the amount of pixels to pan when pressing an arrow key.
-			 *
-			 * @attribute keyboard-pan-offset
-			 * @type number
-			 */
-			keyboardPanOffset: {
-		    	 type: Number,
-		    	 value: 80
-			},
-
-			/**
-			 * The `keyboard-zoom-offset` attribute sets the number of zoom levels to change when pressing + or - key.
-			 *
-			 * @attribute keyboard-zoom-offset
-			 * @type number
-			 */
-			keyboardZoomOffset: {
-		    	 type: Number,
-		    	 value: 1
-			},
-
-			/**
-			 * The `no-inertia` attribute disables panning of the map will have an inertia effect where the map builds momentum while dragging and continues moving in the same direction for some time. Feels especially nice on touch devices.
-			 *
-			 * @attribute no-inertia
-			 * @type
-			 */
-			noInertia: {
-		    	 type: Boolean,
-		    	 value: false
-			},
-
-			/**
-			 * The `inertia-deceleration` attribute sets the rate with which the inertial movement slows down, in pixels/second2.
-			 *
-			 * @attribute inertia-deceleration
-			 * @type number
-			 */
-			inertiaDeceleration: 3000,
-
-			/**
-			 * The `inertia-max-speed` attribute sets the max speed of the inertial movement, in pixels/second.
-			 *
-			 * @attribute inertia-max-speed
-			 * @type number
-			 */
-			inertiaMaxSpeed: {
-		    	 type: Number,
-		    	 value: 1500
-			},
-
-			/**
-			 * The `no-zoom-control` attribute disables the zoom control is added to the map by default.
-			 *
-			 * @attribute no-zoom-control
-			 * @type bool
-			 */
-			noZoomControl: {
-		    	 type: Boolean,
-		    	 value: false
-			},
+				map: {
+					type: Object
+				}
+			};
+		}
 
-			/**
-			 * The `no-attribution-control` attribute disable the attribution control is added to the map by default.
-			 *
-			 * @attribute no-attribution-control
-			 * @type bool
-			 */
-			noAttributionControl: {
-		    	 type: Boolean,
-		    	 value: false
-			},
 
-			/**
-			 * The `zoom-animation-threshold` attribute sets the maximum number of zoom level differences that still use animation
-			 *
-			 * @attribute zoom-animation-threshold
-			 * @type number
-			 */
-			zoomAnimationThreshold: {
-		    	 type: Number,
-		    	 value: 4
-			},
-
-			/**
-		      * If set, the map is zoomed such that all elements in it are visible
-		      *
-		      * @attribute fit-to-markers
-		      * @type boolean
-		      * @default false
-		      */
-		     fitToMarkers: {
-		    	 type: Boolean,
-		    	 value: false,
-		    	 observer: '_fitToMarkers'
-		     }
-		},
-
-		/**
-		 * reference to the leaflet map
-		 *
-		 * @property map
-		 * @type L.map
-		 */
-		map: undefined,
-
-		ready: function() {
+		ready() {
+			super.ready();
+			console.log('ready');
 			// TODO09: Workaround for removed domReady event
 			var me = this;
-			setTimeout(function() {me.domReady()}, 1);
-		},
+			setTimeout(function() {me.domReady();}, 1);
+		}
 
 
-		guessLeafletImagePath: function() {
+		guessLeafletImagePath() {
 			if (L.Icon.Default.imagePath) {
 				return;
 			}
@@ -650,9 +663,9 @@
 					L.Icon.Default.imagePath = (path ? path + '/' : '') + '../leaflet/dist/images';
 				}
 			}
-		},
+		}
 
-		domReady: function() {
+		domReady() {
 			this.guessLeafletImagePath();
 			var map = L.map(this.$.map, {
 				minZoom: this.minZoom,
@@ -680,13 +693,14 @@
 			});
 			this.map = map;
 
+			console.log('this map', map);
 			// fire an event for when this.map is defined and ready.
 			// (needed for components that talk to this.map directly)
-			this.fire('map-ready');
+			this.dispatchEvent(new CustomEvent('map-ready'));
 
 			// forward events
 			map.on('click dblclick mousedown mouseup mouseover mouseout mousemove contextmenu focus blur preclick load unload viewreset movestart move moveend dragstart drag dragend zoomstart zoomend zoomlevelschange resize autopanstart layeradd layerremove baselayerchange overlayadd overlayremove locationfound locationerror popupopen popupclose', function(e) {
-				this.fire(e.type, e);
+				this.dispatchEvent(new CustomEvent(e.type, e));
 			}, this);
 			// set map view after registering events so viewreset and load events can be caught
 			map.setView([this.latitude, this.longitude], this.zoom);
@@ -722,34 +736,34 @@
 
 			this.registerMapOnChildren();
 			this._mutationObserver = new MutationObserver(this.registerMapOnChildren.bind(this));
-			this._mutationObserver.observe(this, {childList: true});
-		},
+			this._mutationObserver.observe(this, { childList: true });
+		}
 
-		detached: function() {
+		disconnectedCallback() {
 			this._mutationObserver.disconnect();
-		},
+		}
 
-		_viewChanged: function(newValue, oldValue) {
+		_viewChanged(newValue, oldValue) {
 			if (this.map && !this._ignoreViewChange) {
 				setTimeout(function() {
 					this.map.setView(L.latLng(this.latitude, this.longitude), this.zoom);
 				}.bind(this), 1);
 			}
-		},
+		}
 
-		registerMapOnChildren: function() {
+		registerMapOnChildren() {
 			for (var i = 0; i < this.children.length; i++) {
 				this.children[i].container = this.map;
 			}
 			this._fitToMarkers();
-		},
+		}
 
-		_fitToMarkers: function () {
+		_fitToMarkers() {
 			if ( this.map && this.fitToMarkers) {
 				var bounds = [];
 				for( var i = 0, f; f = this.children[i]; i++ ) {
 					if ( f.latitude && f.longitude ) {
-						bounds.push( [ f.latitude, f.longitude ] );
+						bounds.push( [f.latitude, f.longitude] );
 					}
 				}
 				if ( bounds.length > 0 ) {
@@ -757,17 +771,17 @@
 					this.map.invalidateSize();
 				}
 			}
-		},
+		}
 
 		/**
 		 * Returns a GeoJSON including all the features of the map
 		 *
 		 * @method toGeoJSON
 		 */
-		toGeoJSON: function () {
+		toGeoJSON() {
 			var geoJSON = {
-				"type": "FeatureCollection",
-				"features": []
+				'type': 'FeatureCollection',
+				'features': []
 			};
 
 			for( var i = 0, f; f = this.features[i]; i++ ) {
@@ -775,5 +789,8 @@
 			}
 			return geoJSON;
 		}
-	});
+	}
+	window.customElements.define(LeafletMap.is, LeafletMap);
+
 </script>
+</dom-module>
diff --git a/leaflet-draw.html b/leaflet-draw.html
index 0f994c8..2e09374 100644
--- a/leaflet-draw.html
+++ b/leaflet-draw.html
@@ -12,14 +12,18 @@
 @homepage https://leaflet-extras.github.io/leaflet-map/
 -->
 <script>
-	"use strict";
 
-	var leafletMap = leafletMap || {};
+	window.leafletMap = window.leafletMap || {};
+	window.leafletMap.Mixins = window.leafletMap.Mixins || {};
 
-	window.leafletMap.LeafletPath = {
+  /**
+   * @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.
@@ -30,7 +34,7 @@
 
 		/**
 		 * 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.
@@ -41,7 +45,7 @@
 
 		/**
 		 * 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.
@@ -52,7 +56,7 @@
 
 		/**
 		 * Fired when the mouse enters the object.
-		 * 
+		 *
 		 * @event mouseover
 		 * @type MouseEvent
 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
@@ -60,10 +64,10 @@
 		 * @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.
@@ -71,30 +75,30 @@
 		 * @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 
+		 * @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.
@@ -102,158 +106,160 @@
 
 		/**
 		 * Fired when a popup bound to the object is closed.
-		 * 
+		 *
 		 * @event popupclose
 		 * @type PopupEvent
 		 * @param {Popup} popup The popup that was opened or closed.
 		 */
 
-		properties: {
-			/**
+		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
-			},
+				noStroke: {
+					type: Boolean,
+					value: false
+				},
 
-			/**
-			 * The attribute `color` sets the stroke color.
-			 *
-			 * @attribute color
-			 * @type string
-			 */
-			color: {
-				type: String,
-				value: "#03f"
-			},
+				/**
+				 * 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 `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 `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` 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-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 `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 `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-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 `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 `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 `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: ""
-			}
-		},
+				/**
+				 * The attribute `class-name` sets the custom class name set on an element.
+				 *
+				 * @attribute class-name
+				 * @type string
+				 */
+				className: {
+					type: String,
+					value: ''
+				}
+			};
+		}
 
-		getPathOptions: function() {
+		getPathOptions() {
 			return {
 				stroke: !this.noStroke,
 				color: this.color,
@@ -267,20 +273,20 @@
 				lineJoin: this.lineJoin,
 				clickable: !this.noClickable,
 				pointerEvents: this.pointerEvents,
-				className: this.className,
+				className: this.className
 			};
 		}
-	};
+	});
 
-	window.leafletMap.LeafletPointContent = {
-		attached: function() {
+	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});
+				this.observer_.observe(this, { childList: true, characterData: true, attributes: true, subtree: true });
 			}
-		},
+		}
 
-		updatePointContent: function() {
+		updatePointContent() {
 			if (!this.feature) {
 				return;
 			}
@@ -288,7 +294,7 @@
 			var i;
 			var nodes = this.children;
 			for (i = 0; i < nodes.length; i++) {
-				if (nodes[i].localName == "leaflet-point") {
+				if (nodes[i].localName == 'leaflet-point') {
 					temp.push(L.latLng(
 						nodes[i].getAttribute('latitude'),
 						nodes[i].getAttribute('longitude')
@@ -296,14 +302,14 @@
 				}
 			}
 			this.feature.setLatLngs(temp);
-		},
-		
-		detached: function() {
+		}
+	
+		disconnectedCallback() {
 			if (this.observer_) {
 				this.observer_.disconnect();
 			}
 		}
-	}
+	});
 </script>
 
 
@@ -329,104 +335,118 @@
 -->
 <dom-module id="leaflet-circle">
 	<style>
-		:host{ display: none; }
+		:host {
+			display: none;
+		}
 	</style>
 	<template>
 	</template>
-</dom-module>
-<script>
-	"use strict";
-	
-	Polymer({
-		is: 'leaflet-circle',
+	<script>
+		'use strict';
+    const circleMixins = leafletMap.Mixins.LeafletPointContent(
+			leafletMap.Mixins.LeafletPath(Polymer.Element)
+		);
+
+		class LeafletCircle extends circleMixins {
+			static get is() {
+				return 'leaflet-circle';
+			}
+		
 
-		/**
-		 * A Leaflet circle object
-		 *
-		 * @property feature
-		 * @type L.circle
-		 * @default null
-		 */
-		feature: null,
-		behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPopupContent],
+			static get properties() {
+				return {
+					/**
+				 * The circle's longitude coordinate
+				 *
+				 * @attribute longitude
+				 * @type number
+				 * @default null
+				 */
+				longitude: {
+					type: Number,
+					observer: '_updatePosition'
+				},
 
-		properties: {
-			/**
-			 * The circle's longitude coordinate
-			 *
-			 * @attribute longitude
-			 * @type number
-			 * @default null
-			 */
-			longitude: {
-				type: Number,
-				observer: '_updatePosition'
-			},
-	
-			/**
-			 * The circle's latitude coordinate
+				/**
+			 * A Leaflet circle object
 			 *
-			 * @attribute latitude
-			 * @type number
+			 * @property feature
+			 * @type L.circle
 			 * @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'
+			 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: function() {
-			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.fire(e.type, e);
-				}, this);
+
+			_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: function () {
-			if (this.feature && this.latitude != null && this.longitude != null) {
-				this.feature.setLatLng(L.latLng( this.latitude, this.longitude) );
+
+			_updatePosition() {
+				if (this.feature && this.latitude != null && this.longitude != null) {
+					this.feature.setLatLng(L.latLng(this.latitude, this.longitude));
+				}
 			}
-		},
-		
-		_updateRadius: function () {
-			if (this.feature && this.radius != null) {
-				this.feature.setRadius(this.radius);
+
+			_updateRadius() {
+				if (this.feature && this.radius != null) {
+					this.feature.setRadius(this.radius);
+				}
 			}
-		},
-		
-		detached: function() {
-			if (this.container && this.feature) {
-				this.container.removeLayer(this.feature);
+
+			disconnectedCallback() {
+				if (this.container && this.feature) {
+					this.container.removeLayer(this.feature);
+				}
 			}
 		}
-	});
-</script>
+		window.customElements.define(LeafletCircle.is, LeafletCircle);
+
+	</script>
+</dom-module>
 
 
 
@@ -450,21 +470,26 @@
 -->
 <dom-module id="leaflet-point">
 	<script>
-		Polymer({
-			is: "leaflet-point",
-			properties: {
-				latitude: {
-					type: Number,
-					value: 0,
-					reflectToAttribute:true
-				},
-				longitude: {
-					type: Number,
-					value: 0,
-					reflectToAttribute:true
-				}
+		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>
 
@@ -497,16 +522,21 @@
 	<template>
 		<content id="points" select="leaflet-point"></content>
 	</template>
-</dom-module>
 
 <script>
-	"use strict";
- 
-	Polymer({
-		is: 'leaflet-polyline',
-		behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPointContent, leafletMap.LeafletPopupContent],
+	'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
@@ -514,15 +544,13 @@
 		 * @default null
 		 */
 		feature: null,
-
-		properties: {
 			container: {
 				type: Object,
 				observer: '_containerChanged'
-			}
-		},
+			} };
+		}
 
-		_containerChanged: function() {
+		_containerChanged() {
 			if (this.container) {
 				this.feature = L.polyline([], this.getPathOptions());
 				this.feature.addTo( this.container );
@@ -531,18 +559,21 @@
 
 				// forward events
 				this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
-					this.fire(e.type, e);
+					this.dispatchEvent(new CustomEvent(e.type, e));
 				}, this);
 			}
-		},
+		}
 
-		detached: function() {
+		disconnectedCallback() {
 			if (this.container && this.feature) {
 				this.container.removeLayer(this.feature);
 			}
 		}
-	});
+	}
+	window.customElements.define(LeafletPolyline.is, LeafletPolyline);
+
 </script>
+</dom-module>
 
 
 <!--
@@ -568,39 +599,47 @@
 
 <dom-module id="leaflet-polygon">
 	<style>
-		:host {display: none;}
+		:host {
+			display: none;
+		}
 	</style>
 	<template>
-		<content id="points" select="leaflet-point"></content>
+		<content id="points"
+		         select="leaflet-point"></content>
 	</template>
-</dom-module>
 
-<script>
-"use strict";
-Polymer({
-	is: 'leaflet-polygon',
-	behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPointContent, leafletMap.LeafletPopupContent],
-
-	properties: {
-		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: function() {
+	<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) {
+			if (typeof opt.fill === 'undefined' || opt.fill === null) {
 				opt.fill = true;
 			}
 			this.feature = L.polygon([], opt);
@@ -610,15 +649,19 @@
 
 			// forward events
 			this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
-				this.fire(e.type, e);
+				this.dispatchEvent(new CustomEvent(e.type, e));
 			}, this);
 		}
-	},
+	}
 
-	detached: function() {
+	disconnectedCallback() {
 		if (this.container && this.feature) {
 			this.container.removeLayer(this.feature);
 		}
 	}
-});
+}
+window.customElements.define(LeafletPolygon.is, LeafletPolygon);
+
 </script>
+</dom-module>
+
diff --git a/leaflet-geojson.html b/leaflet-geojson.html
index b9607c6..ebc909e 100644
--- a/leaflet-geojson.html
+++ b/leaflet-geojson.html
@@ -1,6 +1,9 @@
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="leaflet-import.html">
-<link rel="import" href="leaflet-layer.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>).
 
@@ -23,168 +26,171 @@
 <dom-element name="leaflet-geojson">
 	<template>
 		<style>
-			:host { display: none; }
+			:host {
+				display: none;
+			}
 		</style>
 	</template>
-</dom-element>
-<script>
-"use strict";
-
-Polymer({
-	is: 'leaflet-geojson',
-	behaviors: [leafletMap.LeafletILayer],
-
-	properties: {
-		/**
-		 * 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
+	<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();
+				}
+			}
 
-	_containerChanged: function() {
-		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
+						});
+				}
+			}
 
-	_dataChanged: function() {
-		if (this.container && this.data) {
-			if (this.feature) {
-				this.container.removeLayer(this.feature);
+			disconnectedCallback() {
+				if (this.container && 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
-				});
-		}
-	},
-	
-	detached: function() {
-		if (this.container && this.feature) {
-			this.container.removeLayer(this.feature);
 		}
-	}
-});
-</script>
+	</script>
+</dom-element>
\ No newline at end of file
diff --git a/leaflet-geolocation.html b/leaflet-geolocation.html
index d9aea66..6743d19 100644
--- a/leaflet-geolocation.html
+++ b/leaflet-geolocation.html
@@ -14,252 +14,258 @@
 -->
 <dom-module id="leaflet-geolocation">
 	<style>
-		:host {display: none;}
+		:host {
+			display: none;
+		}
 	</style>
 	<template>
 	</template>
-</dom-module>
 
-<script>
-"use strict";
-  
-Polymer({
-	is: 'leaflet-geolocation',
-	
-	properties: {
+	<script>
+		'use strict';
 
-		/**
-		 * Fired when geolocation (using the locate method) went successfully.
-		 * 
-		 * @event locationfound
-		 * @type LocationEvent
-		 * @param {LatLng} latlng Detected geographical location of the user.
-		 * @param {LatLngBounds} bounds Geographical bounds of the area user is located in (with respect to the accuracy of location).
-		 * @param {Number} accuracy Accuracy of location in meters.
-		 * @param {Number} altitude Height of the position above the WGS84 ellipsoid in meters.
-		 * @param {Number} altitudeAccuracy Accuracy of altitude in meters.
-		 * @param {Number} heading The direction of travel in degrees counting clockwise from true North.
-		 * @param {Number} speed Current velocity in meters per second.
-		 * @param {Number} timestamp The time when the position was acquired.
-		 */
+		class LeafletGeolocation extends Polymer.Element {
+			static get is() { return 'leaflet-geolocation'; }
 
-		/**
-		 * Fired when geolocation (using the locate method) failed.
-		 * 
-		 * @event locationerror
-		 * @type ErrorEvent
-		 * @param {string} message Error message.
-		 * @param {number} code Error code (if applicable).
-		 */
+			static get properties() {
 
-		/**
-		 * The `watch` attribute sets wether location changes should be continous watching (instead of detecting it once) using W3C watchPosition method. You can later stop watching using map.stopLocate() method. 
-		 * 
-		 * @attribute watch
-		 * @type bool
-		 */
-		watch: {
-			type: Boolean,
-			value: false, 
-		},
+				return {
+					/**
+				 * Fired when geolocation (using the locate method) went successfully.
+				 *
+				 * @event locationfound
+				 * @type LocationEvent
+				 * @param {LatLng} latlng Detected geographical location of the user.
+				 * @param {LatLngBounds} bounds Geographical bounds of the area user is located in (with respect to the accuracy of location).
+				 * @param {Number} accuracy Accuracy of location in meters.
+				 * @param {Number} altitude Height of the position above the WGS84 ellipsoid in meters.
+				 * @param {Number} altitudeAccuracy Accuracy of altitude in meters.
+				 * @param {Number} heading The direction of travel in degrees counting clockwise from true North.
+				 * @param {Number} speed Current velocity in meters per second.
+				 * @param {Number} timestamp The time when the position was acquired.
+				 */
 
-		/**
-		 * The `set-view` attribute sets whether the map view to the user location with respect to detection accuracy, or to world view if geolocation failed.
-		 * 
-		 * @attribute set-view
-		 * @type bool
-		 */
-		setView: {
-			type: Boolean,
-			value: false
-		}, 
+					/**
+					 * Fired when geolocation (using the locate method) failed.
+					 *
+					 * @event locationerror
+					 * @type ErrorEvent
+					 * @param {string} message Error message.
+					 * @param {number} code Error code (if applicable).
+					 */
 
-		/**
-		 * The `max-zoom` attribute sets the maximum zoom for automatic view setting when using `setView` option. 
-		 * 
-		 * @attribute max-zoom
-		 * @type number
-		 */
-		maxZoom: {
-			type: Number,
-			value: Infinity
-		},
+					/**
+					 * The `watch` attribute sets wether location changes should be continous watching (instead of detecting it once) using W3C watchPosition method. You can later stop watching using map.stopLocate() method.
+					 *
+					 * @attribute watch
+					 * @type bool
+					 */
+					watch: {
+						type: Boolean,
+						value: false
+					},
 
-		/**
-		 * The `timeout` attribute sets the number of milliseconds to wait for a response from geolocation before firing a locationerror event. 
-		 * 
-		 * @attribute timeout
-		 * @type number
-		 */
-		timeout: {
-			type: Number,
-			value: 10000
-		},
+					/**
+					 * The `set-view` attribute sets whether the map view to the user location with respect to detection accuracy, or to world view if geolocation failed.
+					 *
+					 * @attribute set-view
+					 * @type bool
+					 */
+					setView: {
+						type: Boolean,
+						value: false
+					},
 
-		/**
-		 * The `maximum-age` attribute sets maximum age of detected location. If less than this amount of milliseconds passed since last geolocation response, locate will return a cached location. 
-		 * 
-		 * @attribute maximum-age
-		 * @type number
-		 */
-		maximumAge: {
-			type: Number,
-			value: 0
-		},
+					/**
+					 * The `max-zoom` attribute sets the maximum zoom for automatic view setting when using `setView` option.
+					 *
+					 * @attribute max-zoom
+					 * @type number
+					 */
+					maxZoom: {
+						type: Number,
+						value: Infinity
+					},
 
-		/**
-		 * The `enable-high-accuracy` attribute sets whether high accuracy is enabled, see description in the W3C spec.
-		 * 
-		 * @attribute enable-high-accuracy
-		 * @type bool
-		 */
-		enableHighAccuracy: {
-			type: Boolean,
-			value: false
-		},
+					/**
+					 * The `timeout` attribute sets the number of milliseconds to wait for a response from geolocation before firing a locationerror event.
+					 *
+					 * @attribute timeout
+					 * @type number
+					 */
+					timeout: {
+						type: Number,
+						value: 10000
+					},
 
-		/**
-		 * The `latitude` attribute returns the detected geographical location of the user.
-		 * 
-		 * @attribute latitude
-		 * @type number
-		 */
-		latitude: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `maximum-age` attribute sets maximum age of detected location. If less than this amount of milliseconds passed since last geolocation response, locate will return a cached location.
+					 *
+					 * @attribute maximum-age
+					 * @type number
+					 */
+					maximumAge: {
+						type: Number,
+						value: 0
+					},
 
-		/**
-		 * The `longitude` attribute returns the detected geographical location of the user.
-		 * 
-		 * @attribute longitude
-		 * @type number
-		 */
-		longitude: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `enable-high-accuracy` attribute sets whether high accuracy is enabled, see description in the W3C spec.
+					 *
+					 * @attribute enable-high-accuracy
+					 * @type bool
+					 */
+					enableHighAccuracy: {
+						type: Boolean,
+						value: false
+					},
 
-		/**
-		 * The `bounds` attribute returns the geographical bounds of the area user is located in (with respect to the accuracy of location).
-		 * 
-		 * @attribute bounds
-		 * @type number
-		 */
-		bounds: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `latitude` attribute returns the detected geographical location of the user.
+					 *
+					 * @attribute latitude
+					 * @type number
+					 */
+					latitude: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-		/**
-		 * The `accuracy` attribute returns the accuracy of location in meters.
-		 * 
-		 * @attribute accuracy
-		 * @type number
-		 */
-		accuracy: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `longitude` attribute returns the detected geographical location of the user.
+					 *
+					 * @attribute longitude
+					 * @type number
+					 */
+					longitude: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-		/**
-		 * The `altitude` attribute returns the height of the position above the WGS84 ellipsoid in meters.
-		 * 
-		 * @attribute altitude
-		 * @type number
-		 */
-		altitude: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `bounds` attribute returns the geographical bounds of the area user is located in (with respect to the accuracy of location).
+					 *
+					 * @attribute bounds
+					 * @type number
+					 */
+					bounds: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-		/**
-		 * The `altitude-accuracy` attribute returns the accuracy of altitude in meters.
-		 * 
-		 * @attribute altitude-accuracy
-		 * @type number
-		 */
-		altitudeAccuracy: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `accuracy` attribute returns the accuracy of location in meters.
+					 *
+					 * @attribute accuracy
+					 * @type number
+					 */
+					accuracy: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-		/**
-		 * The `heading` attribute returns the direction of travel in degrees counting clockwise from true North.
-		 * 
-		 * @attribute heading
-		 * @type number
-		 */
-		heading: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `altitude` attribute returns the height of the position above the WGS84 ellipsoid in meters.
+					 *
+					 * @attribute altitude
+					 * @type number
+					 */
+					altitude: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-		/**
-		 * The `speed` attribute returns the current velocity in meters per second.   
-		 * 
-		 * @attribute speed
-		 * @type number
-		 */
-		speed: {
-			type: Number,
-			value: null,
-			notify: true
-		},
+					/**
+					 * The `altitude-accuracy` attribute returns the accuracy of altitude in meters.
+					 *
+					 * @attribute altitude-accuracy
+					 * @type number
+					 */
+					altitudeAccuracy: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-		/**
-		 * The `timestamp` attribute returns the time when the position was acquired.
-		 * 
-		 * @attribute timestamp
-		 * @type number
-		 */
-		timestamp: {
-			type: Number,
-			value: null,
-			notify: true
-		},
-		
-		container: {
-			type: Object,
-			observer: '_containerChanged'
-		}
-	},
+					/**
+					 * The `heading` attribute returns the direction of travel in degrees counting clockwise from true North.
+					 *
+					 * @attribute heading
+					 * @type number
+					 */
+					heading: {
+						type: Number,
+						value: null,
+						notify: true
+					},
+
+					/**
+					 * The `speed` attribute returns the current velocity in meters per second.
+					 *
+					 * @attribute speed
+					 * @type number
+					 */
+					speed: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-	_containerChanged: function() {
-		if (this.container) {
-			this.container.on('locationfound locationerror', function(e) {
-				this.fire(e.type, e);
-			}, this);
+					/**
+					 * The `timestamp` attribute returns the time when the position was acquired.
+					 *
+					 * @attribute timestamp
+					 * @type number
+					 */
+					timestamp: {
+						type: Number,
+						value: null,
+						notify: true
+					},
 
-			this.container.on('locationfound', function(e) {				
-				this.latitude = e.latlng.lat;
-				this.longitude = e.latlng.lng;
-				this.bounds = e.bounds;
-				this.accuracy = e.accuracy;
-				this.altitude = e.altitude;
-				this.altitudeAccuracy = e.altitudeAccuracy;
-				this.heading = e.heading;
-				this.speed = e.speed;
-				this.timestamp = e.timestamp;
-			}, this);
+					container: {
+						type: Object,
+						observer: '_containerChanged'
+					}
+				};
+			}
 
-			this.container.locate({
-				watch: this.watch, 
-				setView: this.setView, 
-				maxZoom: this.maxZoom,
-				timeout: this.timeout,
-				maximumAge:	this.maximumAge,
-				enableHighAccuracy: this.enableHighAccuracy,
-			});
+			_containerChanged() {
+				if (this.container) {
+					this.container.on('locationfound locationerror', function(e) {
+						this.dispatchEvent(new CustomEvent(e.type, e));
+					}, this);
+
+					this.container.on('locationfound', function(e) {
+						this.latitude = e.latlng.lat;
+						this.longitude = e.latlng.lng;
+						this.bounds = e.bounds;
+						this.accuracy = e.accuracy;
+						this.altitude = e.altitude;
+						this.altitudeAccuracy = e.altitudeAccuracy;
+						this.heading = e.heading;
+						this.speed = e.speed;
+						this.timestamp = e.timestamp;
+					}, this);
+
+					this.container.locate({
+						watch: this.watch,
+						setView: this.setView,
+						maxZoom: this.maxZoom,
+						timeout: this.timeout,
+						maximumAge: this.maximumAge,
+						enableHighAccuracy: this.enableHighAccuracy
+					});
+				}
+			}
 		}
-	}
-});
-</script>
+		window.customElements.define(LeafletGeolocation.is, LeafletGeolocation);
 
+	</script>
+
+</dom-module>
diff --git a/leaflet-layer-group.html b/leaflet-layer-group.html
index baf4b5c..abd4c9d 100644
--- a/leaflet-layer-group.html
+++ b/leaflet-layer-group.html
@@ -17,48 +17,51 @@
 -->
 
 <dom-module id="leaflet-layer-group">
-	<template>
-	</template>
-</dom-module>
+<template>
+</template>
 
 <script>
-	"use strict";
+	'use strict';
 
-	Polymer({
-		is: 'leaflet-layer-group',
+	class LeafletLayerGroup extends Polymer.Element {
+		static get is() { return 'leaflet-layer-group'; }
 
-		properties: {
-			container: {
-				type: Object,
-				observer: '_containerChanged'
-			}	
-		},
+		static get properties() {
+			return {
+				container: {
+					type: Object,
+					observer: '_containerChanged'
+				}
+			};
+		}
 
-		ready: function() {
+		ready() {
+			super.ready();
 			this._mutationObserver = new MutationObserver(this.registerContainerOnChildren.bind(this));
-			this._mutationObserver.observe(this, {childList: true});
-		},
-	
-		_containerChanged: function() {
+			this._mutationObserver.observe(this, { childList: true });
+		}
+
+		_containerChanged() {
 			if (this.container) {
-				var feature = L.layerGroup()
+				var feature = L.layerGroup();
 				this.feature = feature;
 				this.feature.addTo(this.container);
-				this.registerContainerOnChildren();
+				this.registerContaierOnChildren();
 			}
-		},
+		}
 
-		registerContainerOnChildren: function() {
+		registerContaierOnChildren() {
 			for (var i = 0; i < this.children.length; i++) {
 				this.children[i].container = this.feature;
 			}
-		},
-		
-		detached: function() {
+		}
+
+		disconnectedCallback() {
 			if (this.container && this.feature) {
 				this.container.removeLayer(this.feature);
 			}
 			this._mutationObserver.disconnect();
 		}
-	});
+	}
 </script>
+</dom-module>
\ No newline at end of file
diff --git a/leaflet-layer.html b/leaflet-layer.html
index edb1a22..9a01614 100644
--- a/leaflet-layer.html
+++ b/leaflet-layer.html
@@ -5,37 +5,38 @@
 -->
 
 <script>
-"use strict";
+	'use strict';
 
-var leafletMap = leafletMap || {};
-window.leafletMap.LeafletILayer = {
+	window.leafletMap = window.leafletMap || {};
+	window.leafletMap.Mixins = window.leafletMap.Mixins || {};
+	leafletMap.Mixins.LeafletILayer = Polymer.dedupingMixin((baseClass) => class extends baseClass {
 
 	/**
 	 * returns true.
 	 *
 	 * @method isLayer
 	 */
-	isLayer: function() {
+	isLayer() {
 		return true;
 	}
-};
+});
 
-window.leafletMap.LeafletTileLayer = {
+leafletMap.Mixins.LeafletTileLayer = Polymer.dedupingMixin((baseClass) => class extends baseClass {
 	/**
 	 * Fired when the tile layer starts loading tiles.
-	 * 
+	 *
 	 * @event loading
 	 */
 
 	/**
 	 * Fired when the tile layer loaded all visible tiles.
-	 * 
+	 *
 	 * @event load
 	 */
 
 	/**
 	 * Fired when a tile is requested and starts loading.
-	 * 
+	 *
 	 * @event tileloadstart
 	 * @type TileEvent
 	 * @param {HTMLElement} tile The tile element (image).
@@ -44,7 +45,7 @@
 
 	/**
 	 * Fired when a tile loads.
-	 * 
+	 *
 	 * @event tileload
 	 * @type TileEvent
 	 * @param {HTMLElement} tile The tile element (image).
@@ -53,7 +54,7 @@
 
 	/**
 	 * Fired when a tile is removed (e.g. when you have unloadInvisibleTiles on).
-	 * 
+	 *
 	 * @event tileunload
 	 * @type TileEvent
 	 * @param {HTMLElement} tile The tile element (image).
@@ -65,30 +66,31 @@
 	 *
 	 *	 'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'
 	 *
-	 * {s} means one of the available subdomains (used sequentially to help with 
+	 * {s} means one of the available subdomains (used sequentially to help with
 	 * browser parallel requests per domain limitation; subdomain values are specified
 	 * in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y}
-	 * — tile coordinates. 
-	 * 
+	 * — tile coordinates.
+	 *
 	 * @attribute url
 	 * @type string
 	 */
-	properties: {
+	static get properties() {
 
-		/**
+		return {
+			/**
 		 * The `min-zoom` attribute sets the minimum zoom number.
-		 * 
+		 *
 		 * @attribute min-zoom
 		 * @type number
 		 */
 		minZoom: {
 			type: Number,
-			value: 0,
+			value: 0
 		},
 
 		/**
 		 * The `max-zoom` attribute sets the maximum zoom number.
-		 * 
+		 *
 		 * @attribute max-zoom
 		 * @type number
 		 */
@@ -98,8 +100,8 @@
 		},
 
 		/**
-		 * The `maxnativezoom` attribute sets the maximum zoom number the tiles source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxZoom level and auto-scaled. 
-		 * 
+		 * The `maxnativezoom` attribute sets the maximum zoom number the tiles source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxZoom level and auto-scaled.
+		 *
 		 * @attribute maxnativezoom
 		 * @type number
 		 */
@@ -110,7 +112,7 @@
 
 		/**
 		 * The `tile-size` attribute sets the tile size (width and height in pixels, assuming tiles are square).
-		 * 
+		 *
 		 * @attribute tile-size
 		 * @type number
 		 */
@@ -121,40 +123,40 @@
 
 		/**
 		 * The `subdomains` attribute sets the subdomains of the tile service. Can be passed in the form of one string (where each letter is a subdomain name) or an array of strings.
-		 * 
+		 *
 		 * @attribute subdomains
 		 * @type string or string[]
 		 */
 		subdomains: {
 			type: String,
-			value: "abc"
+			value: 'abc'
 		},
 
 		/**
 		 * The `error-tile-url` attribute sets the URL to the tile image to show in place of the tile that failed to load.
-		 * 
+		 *
 		 * @attribute error-tile-url
 		 * @type string
 		 */
 		errorTileUrl: {
 			type: String,
-			value: ""
+			value: ''
 		},
 
 		/**
 		 * The `attribution` attribute sets the attribute. As html code needs to be escaped here, it is preferable to define it as child element.
-		 * 
+		 *
 		 * @attribute attribution
-		 * @type 
+		 * @type
 		 */
 		attribution: {
 			type: String,
-			value: ""
+			value: ''
 		},
 
 		/**
 		 * The `tms` attribute sets wether inverses Y axis numbering for tiles should be used (turn this on for TMS services).
-		 * 
+		 *
 		 * @attribute tms
 		 * @type bool
 		 */
@@ -165,7 +167,7 @@
 
 		/**
 		 * The `continuous-world` attribute sets the wether tile coordinates won't be wrapped by world width (-180 to 180 longitude) or clamped to lie within world height (-90 to 90). Use this if you use Leaflet for maps that don't reflect the real world (e.g. game, indoor or photo maps).
-		 * 
+		 *
 		 * @attribute continuous-world
 		 * @type bool
 		 */
@@ -176,7 +178,7 @@
 
 		/**
 		 * The `nowrap` attribute sets wether the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.
-		 * 
+		 *
 		 * @attribute nowrap
 		 * @type bool
 		 */
@@ -187,7 +189,7 @@
 
 		/**
 		 * The `zoom-offset` attribute sets the zoom number used in tile URLs will be offset with this value.
-		 * 
+		 *
 		 * @attribute zoom-offset
 		 * @type number
 		 */
@@ -198,7 +200,7 @@
 
 		/**
 		 * The `zoom-reverse` attribute sets whether the zoom number used in tile URLs will be reversed (maxZoom - zoom instead of zoom)
-		 * 
+		 *
 		 * @attribute zoom-reverse
 		 * @type bool
 		 */
@@ -209,7 +211,7 @@
 
 		/**
 		 * The `opacity` attribute sets the opacity of the tile layer.
-		 * 
+		 *
 		 * @attribute opacity
 		 * @type number
 		 */
@@ -221,7 +223,7 @@
 
 		/**
 		 * The `z-index` attribute sets the explicit zIndex of the tile layer. Not set by default.
-		 * 
+		 *
 		 * @attribute z-index
 		 * @type number
 		 */
@@ -232,8 +234,8 @@
 		},
 
 		/**
-		 * The `detect-retina` attribute sets whether if user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution. 
-		 * 
+		 * The `detect-retina` attribute sets whether if user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution.
+		 *
 		 * @attribute detect-retina
 		 * @type bool
 		 */
@@ -243,40 +245,39 @@
 		},
 
 		/**
-		 * The `reuse-tiles` attribute sets whether all the tiles that are not visible after panning are placed in a reuse queue from which they will be fetched when new tiles become visible (as opposed to dynamically creating new ones). This will in theory keep memory usage low and eliminate the need for reserving new memory whenever a new tile is needed. 
-		 * 
+		 * The `reuse-tiles` attribute sets whether all the tiles that are not visible after panning are placed in a reuse queue from which they will be fetched when new tiles become visible (as opposed to dynamically creating new ones). This will in theory keep memory usage low and eliminate the need for reserving new memory whenever a new tile is needed.
+		 *
 		 * @attribute reuse-tiles
 		 * @type bool
 		 */
 		reuseTiles: {
 			type: Boolean,
 			value: false
-		}
+		} };
 
-	},
+	}
 	// unloadInvisibleTiles updateWhenIdle bounds
 	
 
-
-	_opacityChanged: function() {
+	_opacityChanged() {
 		if (this.layer) {
 			this.layer.setOpacity(this.opacity);
 		}
-	},
+	}
 
-	_zIndexChanged: function() {
+	_zIndexChanged() {
 		if (this.layer) {
 			this.layer.setZIndex(this.zIndex);
 		}
-	},
+	}
 
 
-	detached: function() {
+	disconnectedCallback() {
 		if (this.container && this.layer) {
 			this.container.removeLayer(this.layer);
 		}
 	}
-};
+});
 </script>
 
 
@@ -306,30 +307,32 @@
 	</style>
 	<template>
 	</template>
-</dom-module>
 
 <script>
-"use strict";
-
-Polymer({
-	is: 'leaflet-tilelayer',
-	behaviors: [leafletMap.LeafletILayer, leafletMap.LeafletTileLayer],
-	properties: {
-		url: {
+'use strict';
+ const tileLayerMixin = leafletMap.Mixins.LeafletILayer(
+	leafletMap.Mixins.LeafletTileLayer(Polymer.Element)
+ );
+
+class LeafletTilelayer extends tileLayerMixin {
+	static get is() {return 'leaflet-tilelayer';}
+	static get properties() {
+		return {
+			url: {
 			type: String,
-			value: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+			value: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			observer: '_urlChanged'
 		},
-		
+
 		container: {
 			type: Object,
 			observer: '_containerChanged'
-		}
-	},
-	
-	_containerChanged: function() {
+		} };
+	}
+
+	_containerChanged() {
 		if (this.container) {
-			var cleanedUrl = this.url.replace(new RegExp("%7B([sxyz])%7D", "g"), '{$1}');
+			var cleanedUrl = this.url.replace(new RegExp('%7B([sxyz])%7D', 'g'), '{$1}');
 			var layer = L.tileLayer(cleanedUrl, {
 				attribution: Polymer.dom(this).innerHTML + this.attribution,
 				minZoom: this.minZoom,
@@ -346,26 +349,29 @@
 				opacity: this.opacity,
 				zIndex: this.zIndex,
 				detectRetina: this.detectRetina,
-				reuseTiles: this.reuseTiles,
+				reuseTiles: this.reuseTiles
 			});
-			this.layer = layer
+			this.layer = layer;
 
 			// forward events
 			layer.on('loading load tileloadstart tileload tileunload', function(e) {
-				this.fire(e.type, e);
+				this.dispatchEvent(new CustomEvent(e.type, e));
 			}, this);
 			this.layer.addTo(this.container);
 		}
-	},
-	
-	_urlChanged: function() {
+	}
+
+	_urlChanged() {
 		if (this.layer) {
-			var cleanedUrl = this.url.replace(new RegExp("%7B([sxyz])%7D", "g"), '{$1}');
+			var cleanedUrl = this.url.replace(new RegExp('%7B([sxyz])%7D', 'g'), '{$1}');
 			this.layer.setUrl(cleanedUrl);
 		}
 	}
-});
+}
+window.customElements.define(LeafletTilelayer.is, LeafletTilelayer);
+
 </script>
+</dom-module>
 
 
 
@@ -395,57 +401,59 @@
 	</style>
 	<template>
 	</template>
-</dom-module>
 <script>
-	"use strict";
+	'use strict';
+	const tileWmsMixin = leafletMap.Mixins.LeafletILayer(
+		leafletMap.Mixins.LeafletTileLayer(Polymer.Element)
+	);
 
-	Polymer({
-		is: 'leaflet-tilelayer-wms',
-		behaviors: [leafletMap.LeafletILayer, leafletMap.LeafletTileLayer],
+	class LeafletTileLayerWms extends tileWmsMixin {
+		static get is() {return 'leaflet-tilelayer-wms';}
 
-		properties: {
+		static get properties() {
 
-			url: {
+			return {
+				url: {
 				type: String,
 				observer: '_urlChanged'
 			},
 
 			/**
 			 * The `layers` attribute sets the comma-separated list of WMS layers to show (required).
-			 * 
+			 *
 			 * @attribute layers
 			 * @type string
 			 */
 			layers: {
 				type: String,
-				value: "" 
+				value: ''
 			},
 	
 			/**
 			 * The `styles` attribute sets the comma-separated list of WMS styles.
-			 * 
+			 *
 			 * @attribute styles
 			 * @type string
 			 */
 			styles: {
 				type: String,
-				value: ""
+				value: ''
 			},
 	
 			/**
 			 * The `format` attribute sets the WMS image format (use 'image/png' for layers with transparency).
-			 * 
+			 *
 			 * @attribute format
 			 * @type string
 			 */
 			format: {
 				type: String,
-				value: "image/jpeg"
+				value: 'image/jpeg'
 			},
 	
 			/**
 			 * The `transparent` attribute whether the WMS service will return images with transparency.
-			 * 
+			 *
 			 * @attribute transparent
 			 * @type string
 			 */
@@ -456,30 +464,31 @@
 	
 			/**
 			 * The `version` attribute sets the version of the WMS service to use.
-			 * 
+			 *
 			 * @attribute version
 			 * @type string
 			 */
 			version: {
 				type: String,
-				value: "1.1.1"
+				value: '1.1.1'
 			},
 	
 			/**
 			 * The `crs` attribute sets the coordinate Reference System to use for the WMS requests, defaults to map CRS. Don't change this if you're not sure what it means.
-			 * 
+			 *
 			 * @attribute crs
 			 * @type string
 			 */
 			crs: Object,
-			
+	
 			container: {
 				type: Object,
 				observer: '_containerChanged'
-			}
+			} };
 	
-		},		
-		_containerChanged: function() {
+		}
+
+		_containerChanged() {
 			if (this.container) {
 				var layer = L.tileLayer.wms(this.url, {
 					attribution: Polymer.dom(this).innerHTML + this.attribution,
@@ -498,29 +507,33 @@
 					zIndex: this.zIndex,
 					detectRetina: this.detectRetina,
 					reuseTiles: this.reuseTiles,
-					
+	
 					layers: this.layers,
 					styles: this.styles,
 					format: this.format,
 					transparent: this.transparent,
 					version: this.version,
-					crs: this.crs,
+					crs: this.crs
 				});
-				this.layer = layer
+				this.layer = layer;
 
 				// forward events
 				layer.on('loading load tileloadstart tileload tileunload', function(e) {
-					this.fire(e.type, e);
+					this.dispatchEvent(new CustomEvent(e.type, e));
 				}, this);
 				this.layer.addTo(this.container);
 			}
-		},
+		}
 
-		_urlChanged: function() {
+		_urlChanged() {
 			if (this.layer) {
 				this.layer.setUrl(this.url);
 			}
-		},
+		}
+
+	}
+	window.customElements.define(LeafletTileLayerWms.is, LeafletTileLayerWms);
 
-	});
 </script>
+</dom-module>
+-
\ No newline at end of file
diff --git a/leaflet-map.html b/leaflet-map.html
index 222a75f..78944a8 100644
--- a/leaflet-map.html
+++ b/leaflet-map.html
@@ -37,11 +37,11 @@
 @homepage https://leaflet-extras.github.io/leaflet-map/
 @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 -->
-<link rel="import" href="leaflet-core.html">
-<link rel="import" href="leaflet-draw.html">
-<link rel="import" href="leaflet-control.html">
-<link rel="import" href="leaflet-layer.html">
-<link rel="import" href="leaflet-layer-group.html">
-<link rel="import" href="leaflet-geojson.html">
+<link rel="import" href="leaflet-core.html"> 
+<link rel="import" href="leaflet-draw.html"> 
+<link rel="import" href="leaflet-control.html"> 
+<link rel="import" href="leaflet-layer.html"> 
+<link rel="import" href="leaflet-layer-group.html"> 
+<link rel="import" href="leaflet-geojson.html"> 
 <link rel="import" href="leaflet-marker.html">
 <link rel="import" href="leaflet-geolocation.html">
diff --git a/leaflet-marker.html b/leaflet-marker.html
index fb5e9d7..62df89f 100644
--- a/leaflet-marker.html
+++ b/leaflet-marker.html
@@ -22,184 +22,185 @@
 	<template>
 	</template>
 	<script>
-	"use strict";
+	'use strict';
+	class LeafletIcon extends Polymer.Element {
+		static get is() {return 'leaflet-icon';}
+
+		static get properties() {
+			return {
+				/**
+				 * The `icon-url` attribute sets the URL to the icon image (absolute or relative to your script path).
+				 *
+				 * @attribute icon-url
+				 * @type string
+				 */
+				iconUrl: {
+					type: String,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-retina-url` attribute sets the URL to a retina sized version of the icon image (absolute or relative to your script path). Used for Retina screen devices.
+				 *
+				 * @attribute icon-retina-url
+				 * @type string
+				 */
+				iconRetinaUrl: {
+					type: String,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-width` attribute sets the size of the icon image in pixels.
+				 *
+				 * @attribute icon-width
+				 * @type number
+				 */
+				iconWidth: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-height` attribute sets the size of the icon image in pixels.
+				 *
+				 * @attribute icon-height
+				 * @type number
+				 */
+				iconHeight: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-anchor-x` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
+				 *
+				 * @attribute icon-anchor-x
+				 * @type number
+				 */
+				iconAnchorX: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-anchor-y` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
+				 *
+				 * @attribute icon-anchor-y
+				 * @type number
+				 */
+				iconAnchorY: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `shadow-url` attribute sets the URL to the icon shadow image. If not specified, no shadow image will be created.
+				 *
+				 * @attribute shadow-url
+				 * @type string
+				 */
+				shadowUrl: {
+					type: String,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `shadow-retina-url` attribute sets the URL to the retina sized version of the icon shadow image. If not specified, no shadow image will be created. Used for Retina screen devices.
+				 *
+				 * @attribute shadow-retina-url
+				 * @type string
+				 */
+				shadowRetinaUrl: {
+					type: String,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `shadow-width` attribute sets the size of the shadow image in pixels.
+				 *
+				 * @attribute shadow-width
+				 * @type number
+				 */
+				shadowWidth: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `shadow-height` attribute sets the size of the shadow image in pixels.
+				 *
+				 * @attribute shadow-height
+				 * @type number
+				 */
+				shadowHeight: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `shadow-anchor-x` attribute sets the coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
+				 *
+				 * @attribute shadow-anchor-x
+				 * @type number
+				 */
+				shadowAnchorX: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `shadow-anchor-y` attribute sets the coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
+				 *
+				 * @attribute shadow-anchor-y
+				 * @type number
+				 */
+				shadowAnchorY: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `popup-anchor-x` attribute sets the coordinates of the point from which popups will "open", relative to the icon anchor.
+				 *
+				 * @attribute popup-anchor-x
+				 * @type number
+				 */
+				popupAnchorX: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `popupanchory` attribute sets the coordinates of the point from which popups will "open", relative to the icon anchor.
+				 *
+				 * @attribute popup-anchor-y
+				 * @type number
+				 */
+				popupAnchorY: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+
+				/**
+				 * The `class-name` attribute sets a custom class name to assign to both icon and shadow images. Empty by default.
+				 *
+				 * @attribute class-name
+				 * @type string
+				 */
+				className: {
+					type: String,
+					value: '',
+					observer: '_attributeChanged'
+				},
+				icon_: null
 
-	Polymer({
-		is: 'leaflet-icon',
-
-		properties: {
-
-			/**
-			 * The `icon-url` attribute sets the URL to the icon image (absolute or relative to your script path).
-			 * 
-			 * @attribute icon-url
-			 * @type string 
-			 */
-			iconUrl: {
-				type: String,
-				observer: '_attributeChanged'
-			},
-	
-			/**
-			 * The `icon-retina-url` attribute sets the URL to a retina sized version of the icon image (absolute or relative to your script path). Used for Retina screen devices.
-			 * 
-			 * @attribute icon-retina-url
-			 * @type string
-			 */
-			iconRetinaUrl: {
-				type: String,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `icon-width` attribute sets the size of the icon image in pixels. 
-			 * 
-			 * @attribute icon-width
-			 * @type number
-			 */
-			iconWidth: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `icon-height` attribute sets the size of the icon image in pixels.
-			 * 
-			 * @attribute icon-height
-			 * @type number
-			 */
-			iconHeight: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `icon-anchor-x` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
-			 * 
-			 * @attribute icon-anchor-x
-			 * @type number
-			 */
-			iconAnchorX: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `icon-anchor-y` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
-			 * 
-			 * @attribute icon-anchor-y
-			 * @type number
-			 */
-			iconAnchorY: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `shadow-url` attribute sets the URL to the icon shadow image. If not specified, no shadow image will be created.
-			 * 
-			 * @attribute shadow-url
-			 * @type string
-			 */
-			shadowUrl: {
-				type: String,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `shadow-retina-url` attribute sets the URL to the retina sized version of the icon shadow image. If not specified, no shadow image will be created. Used for Retina screen devices.
-			 * 
-			 * @attribute shadow-retina-url
-			 * @type string
-			 */
-			shadowRetinaUrl: {
-				type: String,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `shadow-width` attribute sets the size of the shadow image in pixels.
-			 * 
-			 * @attribute shadow-width
-			 * @type number
-			 */
-			shadowWidth: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `shadow-height` attribute sets the size of the shadow image in pixels.
-			 * 
-			 * @attribute shadow-height
-			 * @type number
-			 */
-			shadowHeight: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `shadow-anchor-x` attribute sets the coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
-			 * 
-			 * @attribute shadow-anchor-x
-			 * @type number
-			 */
-			shadowAnchorX: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `shadow-anchor-y` attribute sets the coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
-			 * 
-			 * @attribute shadow-anchor-y
-			 * @type number
-			 */
-			shadowAnchorY: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `popup-anchor-x` attribute sets the coordinates of the point from which popups will "open", relative to the icon anchor.
-			 * 
-			 * @attribute popup-anchor-x
-			 * @type number
-			 */
-			popupAnchorX: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-			/**
-			 * The `popupanchory` attribute sets the coordinates of the point from which popups will "open", relative to the icon anchor.
-			 * 
-			 * @attribute popup-anchor-y
-			 * @type number
-			 */
-			popupAnchorY: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-
-
-			/**
-			 * The `class-name` attribute sets a custom class name to assign to both icon and shadow images. Empty by default.
-			 * 
-			 * @attribute class-name
-			 * @type string
-			 */
-			className: {
-				type: String,
-				value: '',
-				observer: '_attributeChanged'
-			},
-		},
+			};
+		}
 
-		icon_: null,
 
-		getIcon: function() {
+		getIcon() {
 			if (this.icon_) {
 				return this.icon_;
 			}
@@ -225,15 +226,16 @@
 			if (this.popupAnchorX && this.popupAnchorY) {
 				icon.popupAnchor = L.point(this.popupAnchorX, this.popupAnchorY);
 			}
-			
+	
 			this.icon_ = L.icon(icon);
 			return this.icon_;
-		},
-		
-		_attributeChanged: function() {
+		}
+	
+		_attributeChanged() {
 			this.icon_ = null;
 		}
-	});
+	}
+	window.customElements.define(LeafletIcon.is, LeafletIcon);
 	</script>
 </dom-module>
 
@@ -247,9 +249,9 @@
 
 ##### Example
 
-    <leaflet-divicon id="myicon" class-name="name">
+    <leaflet-divicon id="myicon" classname="name">
         <a href="https://leaflet-extras.github.io/leaflet-map/demo.html">Demo</a>
-    </leaflet-divicon>
+    </leaflet-icon>
 
 @element leaflet-divicon
 @blurb element which defines an divicon template for markers.
@@ -263,72 +265,74 @@
 	<template>
 	</template>
 	<script>
-	"use strict";
+	'use strict';
+
+	class LeafletDivicon extends Polymer.Element {
+		static get is() {return 'leaflet-divicon';}
+		static get properties() {
+			return {
+				/**
+				 * The `icon-width` attribute sets the size of the icon image in pixels.
+				 *
+				 * @attribute icon-width
+				 * @type number
+				 */
+				iconWidth: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-height` attribute sets the size of the icon image in pixels.
+				 *
+				 * @attribute icon-height
+				 * @type number
+				 */
+				iconHeight: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-anchor-x` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
+				 *
+				 * @attribute icon-anchor-x
+				 * @type number
+				 */
+				iconAnchorX: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `icon-anchor-y` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
+				 *
+				 * @attribute icon-anchor-y
+				 * @type number
+				 */
+				iconAnchorY: {
+					type: Number,
+					observer: '_attributeChanged'
+				},
+
+				/**
+				 * The `class-name` attribute sets a custom class name to assign to both icon and shadow images. Empty by default.
+				 *
+				 * @attribute class-name
+				 * @type string
+				 */
+				className: {
+					type: String,
+					value: '',
+					observer: '_attributeChanged'
+				},
+				icon_: null
 
-	Polymer({
-		is: 'leaflet-divicon',
-		properties: {
-
-			/**
-			 * The `icon-width` attribute sets the size of the icon image in pixels. 
-			 * 
-			 * @attribute icon-width
-			 * @type number
-			 */
-			iconWidth: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-	
-			/**
-			 * The `icon-height` attribute sets the size of the icon image in pixels.
-			 * 
-			 * @attribute icon-height
-			 * @type number
-			 */
-			iconHeight: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-	
-			/**
-			 * The `icon-anchor-x` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
-			 * 
-			 * @attribute icon-anchor-x
-			 * @type number
-			 */
-			iconAnchorX: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-	
-			/**
-			 * The `icon-anchor-y` attribute sets the coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
-			 * 
-			 * @attribute icon-anchor-y
-			 * @type number
-			 */
-			iconAnchorY: {
-				type: Number,
-				observer: '_attributeChanged'
-			},
-	
-			/**
-			 * The `class-name` attribute sets a custom class name to assign to both icon and shadow images. Empty by default.
-			 * 
-			 * @attribute class-name
-			 * @type string
-			 */
-			className: {
-				type: String,
-				value: '',
-				observer: '_attributeChanged'
-			},
-		},
+			};
+		}
 
-		icon_: null,
 
-		getIcon: function() {
+		getIcon() {
 			if (this.icon_) {
 				return this.icon_;
 			}
@@ -344,12 +348,14 @@
 			}
 			this.icon_ = L.divIcon(icon);
 			return this.icon_;
-		},
+		}
 
-		_attributeChanged: function() {
+		_attributeChanged() {
 			this.icon_ = null;
 		}
-	});
+	}
+	window.customElements.define(LeafletDivicon.is, LeafletDivicon);
+
 	</script>
 </dom-module>
 
@@ -372,7 +378,7 @@
 
 ##### Example
 
-    <leaflet-icon id="myicon" icon-url="https://stendhalgame.org/images/mapmarker/me.png"></leaflet-icon>
+    <leaflet-icon id="myicon" iconurl="https://stendhalgame.org/images/mapmarker/me.png"></leaflet-icon>
 
     <leaflet-marker latitude="51.5" longitude="-0.10" title="Some title" icon="myicon">
     </leaflet-marker>
@@ -389,15 +395,14 @@
 	<template>
 	</template>
 	<script>
-	"use strict";
+	'use strict';
 
-	Polymer({
-		is: 'leaflet-marker',
-		behaviors: [leafletMap.LeafletPopupContent],
+	class LeafletMarker extends leafletMap.Mixins.LeafletPopupContent(Polymer.Element) {
+		static get is() {return 'leaflet-marker';}
 
 		/**
 		 * Fired when the user clicks (or taps) the marker.
-		 * 
+		 *
 		 * @event click
 		 * @type MouseEvent
 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
@@ -408,7 +413,7 @@
 
 		/**
 		 * Fired when the user double-clicks (or double-taps) the marker.
-		 * 
+		 *
 		 * @event dblclick
 		 * @type MouseEvent
 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
@@ -419,7 +424,7 @@
 
 		/**
 		 * Fired when the user pushes the mouse button on the marker.
-		 * 
+		 *
 		 * @event mousedown
 		 * @type MouseEvent
 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
@@ -430,7 +435,7 @@
 
 		/**
 		 * Fired when the mouse enters the marker.
-		 * 
+		 *
 		 * @event mouseover
 		 * @type MouseEvent
 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
@@ -438,10 +443,10 @@
 		 * @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 marker.
-		 * 
+		 *
 		 * @event mouseout
 		 * @type MouseEvent
 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
@@ -449,29 +454,29 @@
 		 * @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 marker.
-		 * 
+		 *
 		 * @event contextmenu
 		 * @type MouseEvent
 		 */
 
 		/**
 		 * Fired when the user starts dragging the marker.
-		 * 
+		 *
 		 * @event dragstart
 		 */
 
 		/**
 		 * Fired repeatedly while the user drags the marker.
-		 * 
+		 *
 		 * @event drag
 		 */
 
 		/**
 		 * Fired when the user stops dragging the marker.
-		 * 
+		 *
 		 * @event dragend
 		 * @type DragEndEvent
 		 * @param {number} distance The distance in pixels the draggable element was moved by.
@@ -479,27 +484,27 @@
 
 		/**
 		 * Fired when the marker is moved via setLatLng. New coordinate include in event arguments.
-		 * 
+		 *
 		 * @event move
-		 * @type 
+		 * @type
 		 */
 
 		/**
 		 * Fired when the marker is added to the map.
-		 * 
+		 *
 		 * @event add
-		 * @type 
+		 * @type
 		 */
 
 		/**
 		 * Fired when the marker is removed from the map.
-		 * 
+		 *
 		 * @event remove
 		 */
 
 		/**
 		 * Fired when a popup bound to the marker is open.
-		 * 
+		 *
 		 * @event popupopen
 		 * @type PopupEvent
 		 * @param {Popup} popup The popup that was opened or closed.
@@ -507,167 +512,174 @@
 
 		 /**
 		 * Fired when a popup bound to the marker is closed.
-		 * 
+		 *
 		 * @event popupclose
 		 * @type PopupEvent
 		 * @param {Popup} popup The popup that was opened or closed.
 		 */
 
-		properties: {
-			/**
+		static get properties() {
+			return {
+				/**
 			 * The `latitude` attribute sets the positions of the marker.
 			 *
 			 * @attribute latitude
 			 * @type number
 			 */
-			latitude: {
-				type: Number,
-				value: null,
-				reflectToAttribute: true,
-				notify: true,
-				observer: '_positionChanged'
-			},
-
-			/**
-			 * The `longitude` attribute sets the positions of the marker.
-			 *
-			 * @attribute longitude
-			 * @type number
-			 */
-			longitude: {
-				type: Number,
-				value: null,
-				reflectToAttribute: true,
-				notify: true,
-				observer: '_positionChanged'
-			},
-
-			/**
-			 * The `icon` attribute sets the Icon class to use for rendering the marker. 
-			 * This attribute may be refer to an id-attribute of an leaflet-icon-element,
-			 * contain json syntax or it be assigned an instance of L.icon.
-			 * See Icon documentation for details on how to customize the marker icon. Set to new L.Icon.Default() by default.
-			 * 
-			 * @attribute icon
-			 * @type string, json or L.icon
-			 */
-			icon: {
-				type: Object,
-				observer: '_iconChanged'
-			},
-
-			/**
-			 * The `no-clickable` disables emitting mouse events and will act as a part of the underlying map.
-			 * 
-			 * @attribute no-clickable
-			 * @type bool
-			 */
-			noClickable: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * The `draggable` attribute sets the whether the marker is draggable with mouse/touch or not.
-			 * 
-			 * @attribute draggable
-			 * @type bool
-			 */
-			draggable: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * The `no-keyboard` attribute disables whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
-			 * 
-			 * @attribute no-keyboard
-			 * @type bool
-			 */
-			noKeyboard: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * The `title` attribute sets the text for the browser tooltip that appear on marker hover (no tooltip by default).
-			 * 
-			 * @attribute title
-			 * @type string
-			 */
-			title: {
-				type: String,
-				value: ''
-			},
-
-			/**
-			 * The `alt` attribute sets the text for the alt attribute of the icon image (useful for accessibility).
-			 * 
-			 * @attribute alt
-			 * @type string
-			 */
-			alt: {
-				type: String,
-				value: ''
-			},
-
-			/**
-			 * The `z-index-offset` attribute sets the zIndexOffset. By default, marker images zIndex is set automatically based on its latitude
-			 * 
-			 * @attribute z-index-offset
-			 * @type number
-			 */
-			zIndexOffset: {
-				type: Number,
-				value: 0,
-				observer: '_zIndexOffsetChanged'
-			},
-
-			/**
-			 * The `opacity` attribute sets the opacity of the marker.
-			 * 
-			 * @attribute opacity
-			 * @type number
-			 */
-			opacity: {
-				type: Number,
-				value: 1.0,
-				observer: '_opacityChanged'
-			},
-
-			/**
-			 * The `rise-on-hover` attribute sets the whether the marker will get on top of others when you hover the mouse over it. 
-			 * 
-			 * @attribute rise-on-hover
-			 * @type bool
-			 */
-			riseOnHover: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * The `rise-offset` attribute sets the z-index offset used for the riseOnHover feature.
-			 * 
-			 * @attribute rise-offset
-			 * @type number
-			 */
-			riseoffset: {
-				type: Number,
-				value: 250
-			},
-
-			container: {
-				type: Object,
-				observer: '_containerChanged'
-			}
-		},
-
-		feature: undefined,
+				latitude: {
+					type: Number,
+					value: null,
+					reflectToAttribute: true,
+					notify: true,
+					observer: '_positionChanged'
+				},
+
+				/**
+				 * The `longitude` attribute sets the positions of the marker.
+				 *
+				 * @attribute longitude
+				 * @type number
+				 */
+				longitude: {
+					type: Number,
+					value: null,
+					reflectToAttribute: true,
+					notify: true,
+					observer: '_positionChanged'
+				},
+
+				/**
+				 * The `icon` attribute sets the Icon class to use for rendering the marker.
+				 * This attribute may be refer to an id-attribute of an leaflet-icon-element,
+				 * contain json syntax or it be assigned an instance of L.icon.
+				 * See Icon documentation for details on how to customize the marker icon. Set to new L.Icon.Default() by default.
+				 *
+				 * @attribute icon
+				 * @type string, json or L.icon
+				 */
+				icon: {
+					type: Object,
+					observer: '_iconChanged'
+				},
+
+				/**
+				 * The `no-clickable` disables emitting mouse events and will act as a part of the underlying map.
+				 *
+				 * @attribute no-clickable
+				 * @type bool
+				 */
+				noClickable: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `draggable` attribute sets the whether the marker is draggable with mouse/touch or not.
+				 *
+				 * @attribute draggable
+				 * @type bool
+				 */
+				draggable: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `no-keyboard` attribute disables whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
+				 *
+				 * @attribute no-keyboard
+				 * @type bool
+				 */
+				noKeyboard: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `title` attribute sets the text for the browser tooltip that appear on marker hover (no tooltip by default).
+				 *
+				 * @attribute title
+				 * @type string
+				 */
+				title: {
+					type: String,
+					value: ''
+				},
+
+				/**
+				 * The `alt` attribute sets the text for the alt attribute of the icon image (useful for accessibility).
+				 *
+				 * @attribute alt
+				 * @type string
+				 */
+				alt: {
+					type: String,
+					value: ''
+				},
+
+				/**
+				 * The `z-index-offset` attribute sets the zIndexOffset. By default, marker images zIndex is set automatically based on its latitude
+				 *
+				 * @attribute z-index-offset
+				 * @type number
+				 */
+				zIndexOffset: {
+					type: Number,
+					value: 0,
+					observer: '_zIndexOffsetChanged'
+				},
+
+				/**
+				 * The `opacity` attribute sets the opacity of the marker.
+				 *
+				 * @attribute opacity
+				 * @type number
+				 */
+				opacity: {
+					type: Number,
+					value: 1.0,
+					observer: '_opacityChanged'
+				},
+
+				/**
+				 * The `rise-on-hover` attribute sets the whether the marker will get on top of others when you hover the mouse over it.
+				 *
+				 * @attribute rise-on-hover
+				 * @type bool
+				 */
+				riseOnHover: {
+					type: Boolean,
+					value: false
+				},
+
+				/**
+				 * The `rise-offset` attribute sets the z-index offset used for the riseOnHover feature.
+				 *
+				 * @attribute rise-offset
+				 * @type number
+				 */
+				riseoffset: {
+					type: Number,
+					value: 250
+				},
+
+				container: {
+					type: Object,
+					observer: '_containerChanged'
+				},
+
+				feature: {
+					type: Object
+				},
+
+				observer_: {
+					type: Object
+				}
+			};
+		}
 
-		observer_: undefined,
 
-		_containerChanged: function() {
+		_containerChanged() {
 			if (this.container) {
 
 				var feature = L.marker([this.latitude, this.longitude], {
@@ -679,26 +691,26 @@
 					zIndexOffset: this.zIndexOffset,
 					opacity: this.opacity,
 					riseOnHover: this.riseOnHover,
-					riseOffset: this.riseOffset,
+					riseOffset: this.riseOffset
 				});
 				this.feature = feature;
 				this._iconChanged();
 
 				// forward events
 				feature.on('click dblclick mousedown mouseover mouseout contextmenu dragstart drag dragend move add remove popupopen popupclose', function(e) {
-					this.fire(e.type, e);
+					this.dispatchEvent(new CustomEvent(e.type, e));
 				}, this);
 
 				this.updatePopupContent();
 				this.feature.addTo(this.container);
 			}
-		},
+		}
 
-		_iconChanged: function() {
+		_iconChanged() {
 			// icon support
 			var iconOption;
 			if (this.icon) {
-				if (typeof this.icon == "string") {
+				if (typeof this.icon == 'string') {
 					var iconElement = document.getElementById(this.icon);
 					if (iconElement != null) {
 						if (iconElement.getIcon) {
@@ -712,7 +724,7 @@
 						}
 					}
 				}
-				if (typeof this.icon == "object") {
+				if (typeof this.icon == 'object') {
 					if (this.icon.options) {
 						iconOption = this.icon;
 					} else {
@@ -726,32 +738,33 @@
 			if (this.feature) {
 				this.feature.setIcon(iconOption);
 			}
-		},
+		}
 
-		_positionChanged: function() {
+		_positionChanged() {
 			if (this.feature) {
 				this.feature.setLatLng(L.latLng(this.latitude, this.longitude));
 			}
-		},
+		}
 
-		_zIndexOffsetChanged: function() {
+		_zIndexOffsetChanged() {
 			if (this.feature) {
 				this.feature.setZIndexOffset(this.zIndexOffset);
 			}
-		},
+		}
 
-		_opacityChanged: function() {
+		_opacityChanged() {
 			if (this.feature) {
 				this.feature.setOpacity(this.opacity);
 			}
-		},
+		}
 
-		detached: function() {
+		detached() {
 			if (this.container && this.feature) {
 				this.container.removeLayer(this.feature);
 			}
 		}
+	}
+	window.customElements.define(LeafletMarker.is, LeafletMarker);
 
-	});
 	</script>
 </dom-module>
diff --git a/leaflet-popup.html b/leaflet-popup.html
index 874cf64..73ad9b0 100644
--- a/leaflet-popup.html
+++ b/leaflet-popup.html
@@ -1,31 +1,34 @@
 <script>
-"use strict";
+	'use strict';
 
-var leafletMap = leafletMap || {};
-leafletMap.LeafletPopupContent = {
-	attached: function() {
-		if (MutationObserver && !this.observer_) {
-			this.observer_ = new MutationObserver(this.updatePopupContent.bind(this));
-			this.observer_.observe(this, {childList: true, characterData: true, attributes: true, subtree: true});
-		}
-	},
+	window.leafletMap = window.leafletMap || {};
+	window.leafletMap.Mixins = window.leafletMap.Mixins || {};
+	
+	leafletMap.Mixins.LeafletPopupContent = Polymer.dedupingMixin((baseClass) => class extends baseClass {
 
-	updatePopupContent: function() {
-		if (!this.feature) {
-			return;
+		connectedCallback() {
+			if (MutationObserver && !this.observer_) {
+				this.observer_ = new MutationObserver(this.updatePopupContent.bind(this));
+				this.observer_.observe(this, { childList: true, characterData: true, attributes: true, subtree: true });
+			}
 		}
-		this.feature.unbindPopup();
-		// TODO: Hack, ignore <leaflet-point>-tag
-		var content = Polymer.dom(this).innerHTML.replace(/<\/?leaflet-point[^>]*>/g, "").trim();
-		if (content) {
-			this.feature.bindPopup(content);
+
+		updatePopupContent() {
+			if (!this.feature) {
+				return;
+			}
+			this.feature.unbindPopup();
+			// TODO: Hack, ignore <leaflet-point>-tag
+			var content = Polymer.dom(this).innerHTML.replace(/<\/?leaflet-point[^>]*>/g, '').trim();
+			if (content) {
+				this.feature.bindPopup(content);
+			}
 		}
-	},
-	
-	detached: function() {
-		if (this.observer_) {
-			this.observer_.disconnect();
+
+		disconnectedCallback() {
+			if (this.observer_) {
+				this.observer_.disconnect();
+			}
 		}
-	}
-}
+	});
 </script>
\ No newline at end of file
diff --git a/styles/leaflet-styles.html b/styles/leaflet-styles.html
new file mode 100644
index 0000000..75b9ecf
--- /dev/null
+++ b/styles/leaflet-styles.html
@@ -0,0 +1,577 @@
+<link rel="import"
+      href="../../polymer/polymer-element.html">
+
+<dom-module id="leaflet-styles">
+  <template>
+    <style>
+      
+      /* required styles */
+
+      .leaflet-map-pane,
+      .leaflet-tile,
+      .leaflet-marker-icon,
+      .leaflet-marker-shadow,
+      .leaflet-tile-pane,
+      .leaflet-tile-container,
+      .leaflet-overlay-pane,
+      .leaflet-shadow-pane,
+      .leaflet-marker-pane,
+      .leaflet-popup-pane,
+      .leaflet-overlay-pane svg,
+      .leaflet-zoom-box,
+      .leaflet-image-layer,
+      .leaflet-layer {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      .leaflet-container {
+        overflow: hidden;
+        -ms-touch-action: none;
+        touch-action: none;
+      }
+
+      .leaflet-tile,
+      .leaflet-marker-icon,
+      .leaflet-marker-shadow {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        -webkit-user-drag: none;
+      }
+
+      .leaflet-marker-icon,
+      .leaflet-marker-shadow {
+        display: block;
+      }
+
+      /* map is broken in FF if you have max-width: 100% on tiles */
+
+      .leaflet-container img {
+        max-width: none !important;
+      }
+
+      /* stupid Android 2 doesn't understand "max-width: none" properly */
+
+      .leaflet-container img.leaflet-image-layer {
+        max-width: 15000px !important;
+      }
+
+      .leaflet-tile {
+        filter: inherit;
+        visibility: hidden;
+      }
+
+      .leaflet-tile-loaded {
+        visibility: inherit;
+      }
+
+      .leaflet-zoom-box {
+        width: 0;
+        height: 0;
+      }
+
+      /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+
+      .leaflet-overlay-pane svg {
+        -moz-user-select: none;
+      }
+
+      .leaflet-tile-pane {
+        z-index: 2;
+      }
+
+      .leaflet-objects-pane {
+        z-index: 3;
+      }
+
+      .leaflet-overlay-pane {
+        z-index: 4;
+      }
+
+      .leaflet-shadow-pane {
+        z-index: 5;
+      }
+
+      .leaflet-marker-pane {
+        z-index: 6;
+      }
+
+      .leaflet-popup-pane {
+        z-index: 7;
+      }
+
+      .leaflet-vml-shape {
+        width: 1px;
+        height: 1px;
+      }
+
+      .lvml {
+        behavior: url(#default#VML);
+        display: inline-block;
+        position: absolute;
+      }
+
+
+      /* control positioning */
+
+      .leaflet-control {
+        position: relative;
+        z-index: 7;
+        pointer-events: auto;
+      }
+
+      .leaflet-top,
+      .leaflet-bottom {
+        position: absolute;
+        z-index: 1000;
+        pointer-events: none;
+      }
+
+      .leaflet-top {
+        top: 0;
+      }
+
+      .leaflet-right {
+        right: 0;
+      }
+
+      .leaflet-bottom {
+        bottom: 0;
+      }
+
+      .leaflet-left {
+        left: 0;
+      }
+
+      .leaflet-control {
+        float: left;
+        clear: both;
+      }
+
+      .leaflet-right .leaflet-control {
+        float: right;
+      }
+
+      .leaflet-top .leaflet-control {
+        margin-top: 10px;
+      }
+
+      .leaflet-bottom .leaflet-control {
+        margin-bottom: 10px;
+      }
+
+      .leaflet-left .leaflet-control {
+        margin-left: 10px;
+      }
+
+      .leaflet-right .leaflet-control {
+        margin-right: 10px;
+      }
+
+
+      /* zoom and fade animations */
+
+      .leaflet-fade-anim .leaflet-tile,
+      .leaflet-fade-anim .leaflet-popup {
+        opacity: 0;
+        -webkit-transition: opacity 0.2s linear;
+        -moz-transition: opacity 0.2s linear;
+        -o-transition: opacity 0.2s linear;
+        transition: opacity 0.2s linear;
+      }
+
+      .leaflet-fade-anim .leaflet-tile-loaded,
+      .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+        opacity: 1;
+      }
+
+      .leaflet-zoom-anim .leaflet-zoom-animated {
+        -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+        -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+        -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+        transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+      }
+
+      .leaflet-zoom-anim .leaflet-tile,
+      .leaflet-pan-anim .leaflet-tile,
+      .leaflet-touching .leaflet-zoom-animated {
+        -webkit-transition: none;
+        -moz-transition: none;
+        -o-transition: none;
+        transition: none;
+      }
+
+      .leaflet-zoom-anim .leaflet-zoom-hide {
+        visibility: hidden;
+      }
+
+
+      /* cursors */
+
+      .leaflet-clickable {
+        cursor: pointer;
+      }
+
+      .leaflet-container {
+        cursor: -webkit-grab;
+        cursor: -moz-grab;
+      }
+
+      .leaflet-popup-pane,
+      .leaflet-control {
+        cursor: auto;
+      }
+
+      .leaflet-dragging .leaflet-container,
+      .leaflet-dragging .leaflet-clickable {
+        cursor: move;
+        cursor: -webkit-grabbing;
+        cursor: -moz-grabbing;
+      }
+
+
+      /* visual tweaks */
+
+      .leaflet-container {
+        background: #ddd;
+        outline: 0;
+      }
+
+      .leaflet-container a {
+        color: #0078A8;
+      }
+
+      .leaflet-container a.leaflet-active {
+        outline: 2px solid orange;
+      }
+
+      .leaflet-zoom-box {
+        border: 2px dotted #38f;
+        background: rgba(255, 255, 255, 0.5);
+      }
+
+
+      /* general typography */
+
+      .leaflet-container {
+        font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+      }
+
+
+      /* general toolbar styles */
+
+      .leaflet-bar {
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+        border-radius: 4px;
+      }
+
+      .leaflet-bar a,
+      .leaflet-bar a:hover {
+        background-color: #fff;
+        border-bottom: 1px solid #ccc;
+        width: 26px;
+        height: 26px;
+        line-height: 26px;
+        display: block;
+        text-align: center;
+        text-decoration: none;
+        color: black;
+      }
+
+      .leaflet-bar a,
+      .leaflet-control-layers-toggle {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        display: block;
+      }
+
+      .leaflet-bar a:hover {
+        background-color: #f4f4f4;
+      }
+
+      .leaflet-bar a:first-child {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+
+      .leaflet-bar a:last-child {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border-bottom: none;
+      }
+
+      .leaflet-bar a.leaflet-disabled {
+        cursor: default;
+        background-color: #f4f4f4;
+        color: #bbb;
+      }
+
+      .leaflet-touch .leaflet-bar a {
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+      }
+
+
+      /* zoom control */
+
+      .leaflet-control-zoom-in,
+      .leaflet-control-zoom-out {
+        font: bold 18px 'Lucida Console', Monaco, monospace;
+        text-indent: 1px;
+      }
+
+      .leaflet-control-zoom-out {
+        font-size: 20px;
+      }
+
+      .leaflet-touch .leaflet-control-zoom-in {
+        font-size: 22px;
+      }
+
+      .leaflet-touch .leaflet-control-zoom-out {
+        font-size: 24px;
+      }
+
+
+      /* layers control */
+
+      .leaflet-control-layers {
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+        background: #fff;
+        border-radius: 5px;
+      }
+
+      .leaflet-control-layers-toggle {
+        background-image: url(images/layers.png);
+        width: 36px;
+        height: 36px;
+      }
+
+      .leaflet-retina .leaflet-control-layers-toggle {
+        background-image: url(images/layers-2x.png);
+        background-size: 26px 26px;
+      }
+
+      .leaflet-touch .leaflet-control-layers-toggle {
+        width: 44px;
+        height: 44px;
+      }
+
+      .leaflet-control-layers .leaflet-control-layers-list,
+      .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+        display: none;
+      }
+
+      .leaflet-control-layers-expanded .leaflet-control-layers-list {
+        display: block;
+        position: relative;
+      }
+
+      .leaflet-control-layers-expanded {
+        padding: 6px 10px 6px 6px;
+        color: #333;
+        background: #fff;
+      }
+
+      .leaflet-control-layers-selector {
+        margin-top: 2px;
+        position: relative;
+        top: 1px;
+      }
+
+      .leaflet-control-layers label {
+        display: block;
+      }
+
+      .leaflet-control-layers-separator {
+        height: 0;
+        border-top: 1px solid #ddd;
+        margin: 5px -10px 5px -6px;
+      }
+
+
+      /* attribution and scale controls */
+
+      .leaflet-container .leaflet-control-attribution {
+        background: #fff;
+        background: rgba(255, 255, 255, 0.7);
+        margin: 0;
+      }
+
+      .leaflet-control-attribution,
+      .leaflet-control-scale-line {
+        padding: 0 5px;
+        color: #333;
+      }
+
+      .leaflet-control-attribution a {
+        text-decoration: none;
+      }
+
+      .leaflet-control-attribution a:hover {
+        text-decoration: underline;
+      }
+
+      .leaflet-container .leaflet-control-attribution,
+      .leaflet-container .leaflet-control-scale {
+        font-size: 11px;
+      }
+
+      .leaflet-left .leaflet-control-scale {
+        margin-left: 5px;
+      }
+
+      .leaflet-bottom .leaflet-control-scale {
+        margin-bottom: 5px;
+      }
+
+      .leaflet-control-scale-line {
+        border: 2px solid #777;
+        border-top: none;
+        line-height: 1.1;
+        padding: 2px 5px 1px;
+        font-size: 11px;
+        white-space: nowrap;
+        overflow: hidden;
+        -moz-box-sizing: content-box;
+        box-sizing: content-box;
+
+        background: #fff;
+        background: rgba(255, 255, 255, 0.5);
+      }
+
+      .leaflet-control-scale-line:not(:first-child) {
+        border-top: 2px solid #777;
+        border-bottom: none;
+        margin-top: -2px;
+      }
+
+      .leaflet-control-scale-line:not(:first-child):not(:last-child) {
+        border-bottom: 2px solid #777;
+      }
+
+      .leaflet-touch .leaflet-control-attribution,
+      .leaflet-touch .leaflet-control-layers,
+      .leaflet-touch .leaflet-bar {
+        box-shadow: none;
+      }
+
+      .leaflet-touch .leaflet-control-layers,
+      .leaflet-touch .leaflet-bar {
+        border: 2px solid rgba(0, 0, 0, 0.2);
+        background-clip: padding-box;
+      }
+
+
+      /* popup */
+
+      .leaflet-popup {
+        position: absolute;
+        text-align: center;
+      }
+
+      .leaflet-popup-content-wrapper {
+        padding: 1px;
+        text-align: left;
+        border-radius: 12px;
+      }
+
+      .leaflet-popup-content {
+        margin: 13px 19px;
+        line-height: 1.4;
+      }
+
+      .leaflet-popup-content p {
+        margin: 18px 0;
+      }
+
+      .leaflet-popup-tip-container {
+        margin: 0 auto;
+        width: 40px;
+        height: 20px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .leaflet-popup-tip {
+        width: 17px;
+        height: 17px;
+        padding: 1px;
+
+        margin: -10px auto 0;
+
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+
+      .leaflet-popup-content-wrapper,
+      .leaflet-popup-tip {
+        background: white;
+
+        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+      }
+
+      .leaflet-container a.leaflet-popup-close-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 4px 4px 0 0;
+        text-align: center;
+        width: 18px;
+        height: 14px;
+        font: 16px/14px Tahoma, Verdana, sans-serif;
+        color: #c3c3c3;
+        text-decoration: none;
+        font-weight: bold;
+        background: transparent;
+      }
+
+      .leaflet-container a.leaflet-popup-close-button:hover {
+        color: #999;
+      }
+
+      .leaflet-popup-scrolled {
+        overflow: auto;
+        border-bottom: 1px solid #ddd;
+        border-top: 1px solid #ddd;
+      }
+
+      .leaflet-oldie .leaflet-popup-content-wrapper {
+        zoom: 1;
+      }
+
+      .leaflet-oldie .leaflet-popup-tip {
+        width: 24px;
+        margin: 0 auto;
+
+        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+      }
+
+      .leaflet-oldie .leaflet-popup-tip-container {
+        margin-top: -1px;
+      }
+
+      .leaflet-oldie .leaflet-control-zoom,
+      .leaflet-oldie .leaflet-control-layers,
+      .leaflet-oldie .leaflet-popup-content-wrapper,
+      .leaflet-oldie .leaflet-popup-tip {
+        border: 1px solid #999;
+      }
+
+
+      /* div icon */
+
+      .leaflet-div-icon {
+        background: #fff;
+        border: 1px solid #666;
+      }
+    </style>
+  </template>
+</dom-module>
\ No newline at end of file