├── .gitignore
├── .project
├── .settings
    ├── .jsdtscope
    ├── org.eclipse.wst.jsdt.ui.superType.container
    └── org.eclipse.wst.jsdt.ui.superType.name
├── CHANGES.md
├── README.md
├── bower.json
├── demo-advanced.html
├── demo-geojson.json
├── demo-header.html
├── demo.html
├── leaflet-control.html
├── leaflet-core.html
├── leaflet-draw.html
├── leaflet-geojson.html
├── leaflet-geolocation.html
├── leaflet-import.html
├── leaflet-layer-group.html
├── leaflet-layer.html
├── leaflet-map.html
├── leaflet-marker.html
├── leaflet-popup.html
├── metadata.html
└── preview.png


/.gitignore:
--------------------------------------------------------------------------------
1 | /bower_components
2 | **/*~
3 | 


--------------------------------------------------------------------------------
/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>leaflet-map</name>
 4 | 	<comment></comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 		<buildCommand>
 9 | 			<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
10 | 			<arguments>
11 | 			</arguments>
12 | 		</buildCommand>
13 | 	</buildSpec>
14 | 	<natures>
15 | 		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
16 | 	</natures>
17 | </projectDescription>
18 | 


--------------------------------------------------------------------------------
/.settings/.jsdtscope:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <classpath>
3 | 	<classpathentry excluding="bower_components/" kind="src" path=""/>
4 | 	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
5 | 	<classpathentry kind="output" path=""/>
6 | </classpath>
7 | 


--------------------------------------------------------------------------------
/.settings/org.eclipse.wst.jsdt.ui.superType.container:
--------------------------------------------------------------------------------
1 | org.eclipse.wst.jsdt.launching.JRE_CONTAINER


--------------------------------------------------------------------------------
/.settings/org.eclipse.wst.jsdt.ui.superType.name:
--------------------------------------------------------------------------------
1 | Global


--------------------------------------------------------------------------------
/CHANGES.md:
--------------------------------------------------------------------------------
 1 | v1.2.0
 2 | ======
 3 | * propagate leaflet initialisation events (thanks to Fedor Baart)
 4 | * fixed references to demos in README.md (thanks to Stephen Moore)
 5 | * fire map-ready event when this.map is defined (thanks to David B. Calhoun)
 6 | * add leaflet-point dom-module (thanks to Compufreak345)
 7 | 
 8 | v1.1.0
 9 | ======
10 | * added support for styling GeoJson layers (thanks to Ryan Cooper)
11 | * renamed attributes on leaflet-map: no-dragging, no-touch-zoom, no-scroll-wheel-zoom, no-double-click-zoom, no-box-zoom, no-tap, no-track-resize, no-close-popup-on-click, no-bounce-at-zoom-limits, no-keyboard, no-inertia, no-zoom-control, no-attribution-control
12 | * renamed attributes on leaflet-marker: no-clickable, no-keyboard
13 | 
14 | v1.0.2
15 | ======
16 | * workaround for {s},{x},{y},{z} being escaped in tileset urls (thanks to Kevin Schaaf, John Eckhart, JustinCase1089)
17 | * fixed fitToMarkers (thanks to Horacio Gonzalez)
18 | * fixed an endless loop on dragging a highly zoomed map
19 | * various documentation fixes (thanks to David Calhoun)
20 | 
21 | v1.0.1
22 | ======
23 | * moved repository to https://github.com/leaflet-extras/leaflet-map
24 | * fixed some urls and version numbers
25 | 
26 | v1.0.0
27 | ======
28 | * breaking change: based on polymer 1.0, please check https://www.polymer-project.org/1.0/docs/migration.html
29 | * breaking change: camelCase attributes renamed to all lower case with hyphen (e.g. maxZoom renamed to max-zoom)
30 | * added geojson support (thanks to Rob Beers)
31 | * fixed marker.zIndexOffset (thanks to Jason Shortall)
32 | 
33 | v0.3.2
34 | ======
35 | * fixed syntax error in event handler for position updates of markers (thanks to bezineb5)
36 | 
37 | v0.3.1
38 | ======
39 | * fixed divIcon syntax error (thanks to spoobar)
40 | * fixed "observer_" not a variable in scope (thanks to fabiosantoscode)
41 | 
42 | v0.3.0
43 | ======
44 | * merged leaflet-map-component by Prateek Saxena (leaflet-circle, leaflet-polygon, leaflet-polyline)
45 | * added abstract leaflet-path element to style vector layers
46 | * added layer-group
47 | * split leaflet-map.html into leaflet-control.html, leaflet-layer.html, leaflet.map.html and leaflet-marker.html
48 |   all files are included from leaflet-map.html, so no changes are required.
49 | 
50 | v0.2.0
51 | ======
52 | * changed dependency from leaflet_bower to leaflet (which is available on bower, too)
53 | * added support for leaflet-scale-control
54 | 
55 | v0.1.1
56 | ======
57 | * registered on bower
58 | 
59 | v0.1.0
60 | ======
61 | * dropped nhnb- prefix
62 | 
63 | r0.0.2
64 | ======
65 | * added support for leaflet-geolocation
66 | * added support for leaflet-tilelayer-wms
67 | * added demonstration of data binding in a custom component
68 | * changed property names to camelCase (attributes are case insensitive) 
69 | 
70 | r0.0.1
71 | ======
72 | * added support for leaflet-divicon
73 | * fixed events from markers
74 | * added documentation for events
75 | 
76 | r0.0.0
77 | ======
78 | 
79 | * first pre-release version
80 | * map, markers, icon, divicon, tilelayer
81 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # leaflet-map
  2 | 
  3 | *leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com) 
  4 | JavaScript library via html elements.
  5 | 
  6 | Please have a look at the [demo](https://leaflet-extras.github.io/leaflet-map/demo.html) or the [api documentation](https://leaflet-extras.github.io/leaflet-map/doc.html#leaflet-map).
  7 | 
  8 | Most of the options documented in the Leaflet reference are exported as html attributes. 
  9 | All events are mapped into html events of the same name.</p>
 10 | For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt; 
 11 | to define the view and zoom level.
 12 | 
 13 | 
 14 | Web-components are an emerging standard which is based on Custom Elements, Shadow DOM, HTML Imports and Web Animations.
 15 | [Polymer](http://www.polymer-project.org/docs/start/tutorial/intro.html) is a library which simplifies working with web-components. It includes a compatibility layer for browsers which
 16 | do not yet support web-components natively, yet.
 17 | 
 18 | 
 19 | ## Quickstart Guide
 20 | 
 21 | Make leaflet maps using declarative [Polymer](http://polymer-project.org) web components.
 22 | To get started read the [documentation](http://leaflet-extras.github.io/leaflet-map/doc.html)
 23 | or checkout the [demo](http://leaflet-extras.github.io/leaflet-map/).
 24 | 
 25 | Install this web component using [Bower](http://bower.io):
 26 | 
 27 | ```
 28 | bower install leaflet-map
 29 | ```
 30 | 
 31 | Import the main component and start creating your map:
 32 | 
 33 | ```html
 34 |   <head>
 35 | 	<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
 36 |     <link rel="import" href="leaflet-map.html">
 37 |     <style>
 38 |       html, body {
 39 |         margin: 0;
 40 |         height: 100%;
 41 |       }
 42 |       leaflet-map {
 43 |         height: 100%;
 44 |       }
 45 |     </style>
 46 |   </head>
 47 |   <body>
 48 |     <leaflet-map fit-to-markers>
 49 |       <leaflet-marker longitude="77.2" latitude="28.4">
 50 |         Marker I
 51 |       </leaflet-marker>
 52 |       <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
 53 |         Round
 54 |       </leaflet-circle>
 55 |     </leaflet-map>
 56 |   </body>
 57 | ```
 58 | 
 59 | 
 60 | ## Status
 61 | 
 62 | Although leaflet-map is still under heavy development, it is already fully usable.
 63 | 
 64 | List of demos: 
 65 | 
 66 | * [leaflet-map](https://leaflet-extras.github.io/leaflet-map/demo.html#view) (L.map)
 67 | * [leaflet-marker](https://leaflet-extras.github.io/leaflet-map/demo.html#marker) (L.marker)
 68 | * [leaflet-icon](https://leaflet-extras.github.io/leaflet-map/demo.html#icon) (L.icon)
 69 | * [leaflet-divicon](https://leaflet-extras.github.io/leaflet-map/demo.html#icon) (L.divicon) (since 0.0.1)
 70 | * [leaflet-circle](https://leaflet-extras.github.io/leaflet-map/demo.html#vector) (L.circle) (since 0.3.0)
 71 | * [leaflet-polygon](https://leaflet-extras.github.io/leaflet-map/demo.html#vector) (L.polygon) (since 0.3.0)
 72 | * [leaflet-polyline](https://leaflet-extras.github.io/leaflet-map/demo.html#vector) (L.polyline) (since 0.3.0)
 73 | * [leaflet-tilelayer](https://leaflet-extras.github.io/leaflet-map/demo.html#tilelayer) (L.tileLayer)
 74 | * [leaflet-tilelayer-wms](https://leaflet-extras.github.io/leaflet-map/demo.html#layerwms) (L.tileLayer.wms)  (since 0.0.2)
 75 | * [leaflet-scale-control](https://leaflet-extras.github.io/leaflet-map/demo.html#scale) (L.control.scale) (since 0.2.0)
 76 | * [leaflet-geojson](https://leaflet-extras.github.io/leaflet-map/demo.html#geojson) (since 0.4.0)
 77 | * [leaflet-geolocation](https://leaflet-extras.github.io/leaflet-map/demo.html#databinding) (part of L.map) (since 0.0.2)
 78 | 
 79 | Please have a look at the [change log](https://github.com/nhnb/leaflet-map/blob/master/CHANGES.md), for recent developments.
 80 | 
 81 | ## Dependencies
 82 | 
 83 | leaflet-map depends on webcomponentsjs in ../webcomponentsjs, Polymer in ../polymer and leaflet in ../leaflet. If you use bower, those will be installed automatically at the right locations.
 84 | 
 85 | Please note that the pages have to be accessed via a webserver. file://-urls are not supported.
 86 | 
 87 | 
 88 | ## Notes for implementing child elements
 89 | 
 90 | Child elements like markers or layers will be initialized by the surrounding container (the map or a layer)
 91 | by setting a "container" javascript property.
 92 | Therefore the child element should define a _containerChanged method and use that as initializer. 
 93 | Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.  
 94 | 
 95 | 
 96 | ## License
 97 | 
 98 | leaflet-map is based on polymer and leaflet. Small parts of leaflet, 
 99 | especially the api documentation, have been copied into leaflet-map files.
100 | 
101 | * [Leaflet](https://github.com/Leaflet/Leaflet/blob/master/LICENSE)
102 | * [Polymer](https://github.com/polymer/polymer/blob/master/LICENSE.txt)
103 | 
104 | 
105 | Copyright (c) 2014-2016
106 | Hendrik Brummermann, Prateek Saxena
107 | 
108 | All rights reserved.
109 | 
110 | Redistribution and use in source and binary forms, with or without modification, are
111 | permitted provided that the following conditions are met:
112 | 
113 |    1. Redistributions of source code must retain the above copyright notice, this list of
114 |       conditions and the following disclaimer.
115 | 
116 |    2. Redistributions in binary form must reproduce the above copyright notice, this list
117 |       of conditions and the following disclaimer in the documentation and/or other materials
118 |       provided with the distribution.
119 | 
120 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
121 | EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
122 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
123 | COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
124 | EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
125 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
126 | HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
127 | TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
128 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
129 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaflet-map",
 3 |   "version": "1.1.0",
 4 |   "authors": [
 5 |     "Hendrik Brummermann <nhnb@users.sourceforge.net>",
 6 |     "Prateek Saxena <prtksxna@gmail.com>"
 7 |   ],
 8 |   "description": "Leaflet map as web-component based on polymer",
 9 |   "main": "leaflet-map.html",
10 |   "homepage": "https://leaflet-extras.github.io/leaflet-map/",
11 |   "keywords": [
12 |     "polymer",
13 |     "web-components",
14 |     "leaflet",
15 |     "leafletjs",
16 |     "map"
17 |   ],
18 |   "license": "BSD 2-Clause",
19 |   "ignore": [
20 |     "**/.*",
21 |     "demo.html",
22 |     "node_modules",
23 |     "bower_components",
24 |     "test",
25 |     "tests"
26 |   ],
27 |   "dependencies": {
28 |     "polymer": "^1.0.0",
29 |     "leaflet": "^0.7.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/demo-advanced.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../polymer/polymer.html">
 2 | <link rel="import" href="leaflet-map.html">
 3 | 
 4 | <dom-module id="geolocation-sample">
 5 | 	<template>
 6 | 		<style>
 7 | 			:host { display: block; overflow: hidden} 
 8 | 			:host leaflet-map {height:18em; width:99%; border: none}
 9 | 		</style>
10 | 
11 | 		<template is="dom-if" if="{{!latitude}}">
12 | 			Location Unknown.
13 | 		</template>
14 | 		<template is="dom-if" if="{{latitude}}">
15 | 			lat: <span>{{latitude}}</span>, lng: <span>{{longitude}}</span>, accuracy: <span>{{accuracy}}</span> meter
16 | 		</template>
17 | 		<leaflet-map>
18 | 		
19 | 			<leaflet-geolocation enable-high-accuracy
20 | 				latitude="{{latitude}}" longitude="{{longitude}}" accuracy="{{accuracy}}">
21 | 			</leaflet-geolocation>
22 | 
23 | 			<template is="dom-if" if="{{latitude}}">
24 | 				<leaflet-marker latitude="{{latitude}}" longitude="{{longitude}}">
25 | 					I am within <span>{{accuracy}}</span> meters of this location.
26 | 				</leaflet-marker>
27 | 
28 | 				<leaflet-circle latitude="{{latitude}}" longitude="{{longitude}}" radius="{{accuracy}}" color="#d00">
29 | 				</leaflet-circle>
30 | 
31 | 			</template>
32 | 		</leaflet-map>
33 | 
34 | 	</template>
35 | </dom-module>
36 | <script>
37 | Polymer({
38 | 	is: "geolocation-sample"
39 | });
40 | </script>
41 | 


--------------------------------------------------------------------------------
/demo-geojson.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"type": "FeatureCollection",
 3 | 	"features": [
 4 | 		{
 5 | 			"type": "Feature",
 6 | 			"geometry": {
 7 | 				"type": "Point",
 8 | 				"coordinates": [102.0, 0.5]
 9 | 			},
10 | 			"properties": {
11 | 				"prop0": "value0"
12 | 			}
13 | 		},
14 | 		{
15 | 			"type": "Feature",
16 | 			"geometry": {
17 | 				"type": "LineString",
18 | 				"coordinates": [
19 |         			[102.0, 0.0],
20 |         			[103.0, 1.0],
21 |         			[104.0, 0.0],
22 |         			[105.0, 1.0]
23 | 				]
24 | 			},
25 | 			"properties": {
26 | 				"prop0": "value0",
27 | 				"prop1": 0.0
28 | 			}
29 | 		},
30 | 		{
31 | 			"type": "Feature",
32 | 			"geometry": {
33 | 				"type": "Polygon",
34 | 				"coordinates": [
35 | 					[
36 | 						[100.0, 0.0], 
37 | 						[101.0, 0.0],
38 | 						[101.0, 1.0],
39 | 						[100.0, 1.0],
40 | 						[100.0, 0.0]
41 | 					]
42 | 				]
43 | 			},
44 | 			"properties": {
45 | 				"prop0": "value0",
46 | 				"prop1": {
47 | 					"this": "that"
48 | 				}
49 | 			}
50 | 		}
51 | 	]
52 | }


--------------------------------------------------------------------------------
/demo-header.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../polymer/polymer.html">
 2 | 
 3 | <dom-module id="demo-header">
 4 | <style>
 5 | 		header {
 6 | 			max-width: 790px;
 7 | 			background-color: #FFF;
 8 | 			padding: 1em;
 9 | 			margin: 1em auto;
10 | 			box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
11 | 		}
12 | 		.navbar {
13 | 			background-color: #EEE;
14 | 			border-radius: 5px
15 | 		}
16 | 		.menubutton {
17 | 			display: inline-block;
18 | 			padding: 1em 2em;
19 | 			color: #000;
20 | 			border-right: 1px solid #AAA;
21 | 			text-decoration: none;
22 | 		    text-shadow: 1px 1px 0 #FFF;
23 | 		}
24 | 		.githubbutton {
25 | 			border-left: 1px solid #AAA;
26 | 		}
27 | </style>
28 | <template>
29 | 	<header>
30 |         <h1>&lt;leaflet-map&gt;</h1>
31 |         <p>Leaflet map as web component.</p>
32 | 
33 | 		<div class="navbar">
34 | 			<a class="menubutton demobutton" href="https://leaflet-extras.github.io/leaflet-map/demo.html">Demo</a>
35 | 			<a class="menubutton apidocbutton" href="https://leaflet-extras.github.io/leaflet-map/doc.html#leaflet-map">API</a>
36 | 			<a class="menubutton pluginbutton" href="https://leaflet-extras.github.io/leaflet-map/plugins.html">Plugins</a>
37 | 			<a class="menubutton downloadbutton" href="https://github.com/leaflet-extras/leaflet-map/releases/download/v1.2.0/leaflet-map-1.2.0.zip">Download</a>
38 | 			<a class="menubutton githubbutton" href="https://github.com/leaflet-extras/leaflet-map/">Github</a>
39 | 		</div>
40 | 	</header>		
41 | </template>
42 | </dom-module>
43 | <script>
44 | 	Polymer({
45 | 		is: 'demo-header'
46 | 	});
47 | </script>


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 		<title>leaflet-map web-component demo</title>
  7 | 		<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
  8 | 		<link rel="import" href="demo-header.html">
  9 | 		<link rel="import" href="leaflet-map.html">
 10 | 		<link rel="import" href="demo-advanced.html">
 11 | 		<link rel="import" href="../iron-ajax/iron-ajax.html">
 12 | 
 13 | 		<style type="text/css">
 14 | 			body {
 15 | 				height: 100%;
 16 | 				margin: 0;
 17 | 				font-family: sans-serif;
 18 | 				background-color: #DDD;
 19 | 			}
 20 | 			
 21 | 			#content, .announcement {
 22 | 				max-width: 790px;
 23 | 				background-color: #FFF;
 24 | 				padding: 1em;
 25 | 				margin: 0 auto;
 26 | 				box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
 27 | 			}
 28 | 			
 29 | 			.announcement {
 30 | 				margin: 1em auto;
 31 | 				border: 2px solid #0A0;
 32 | 			}
 33 | 			
 34 | 			h2 {
 35 | 				font-size: 1.8em;
 36 | 				margin: 1.5em 0 0.5em -2px;
 37 | 				font-weight: bold;
 38 | 				padding: .2em .5em;
 39 | 				background: #edeeef;
 40 | 				border-right: 1px solid #ccc;
 41 | 				border-bottom: 1px solid #ccc;
 42 | 				color: #fff;
 43 | 				background-color: #b0de5c;
 44 | 				background-image: -moz-linear-gradient(top, #b0de5c, #82cb00);
 45 | 				background-image: -o-linear-gradient(top, #b0de5c, #82cb00);
 46 | 				background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00));
 47 | 				background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00);
 48 | 				background-image: linear-gradient(top, #b0de5c, #82cb00);
 49 | 				filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00');
 50 | 				border-radius: 5px;
 51 | 				text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
 52 | 				box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
 53 | 			}
 54 | 			.nav {
 55 | 				color: #000;
 56 | 				text-decoration: none;
 57 | 				border-bottom: 1px dashed #000;
 58 | 				display: inline-block;
 59 | 				padding: 3px;
 60 | 			}
 61 | 			.nav:hover {
 62 | 				background-color: #DDF;
 63 | 			}
 64 | 			
 65 | 			leaflet-map,
 66 | 			geolocation-sample {
 67 | 				max-width: 20em;
 68 | 				height: 20em;
 69 | 				border: 1px solid #aaa;
 70 | 			}
 71 | 			geolocation-sample {
 72 | 				height: 21em;
 73 | 			}
 74 | 			pre {
 75 | 				font-size: large;
 76 | 				padding: 0.5em 1em;
 77 | 				background-color: #DDD;
 78 | 				clear: all;
 79 | 			}
 80 | 			.i {
 81 | 				color: #00D
 82 | 			}
 83 | 			.a {
 84 | 				color: #008;
 85 | 			}
 86 | 			.v {
 87 | 				color: #800;
 88 | 			}
 89 | 			.c {
 90 | 				color: #080;
 91 | 			}
 92 | 		</style>
 93 | 	</head>
 94 | 	<body>
 95 | 	
 96 | 
 97 | <demo-header></demo-header>
 98 | 
 99 | <div class="announcement">
100 | 
101 | &lt;leaflet-map&gt; 1.0.0 was released on 2015-05-28. Please check out the <a href="https://github.com/leaflet-extras/leaflet-map/releases/tag/v1.0.0">change notes</a> for breaking changes.
102 | 
103 | </div>
104 | 
105 | 
106 | <div id="content">
107 | 
108 | <p>Most of the options documented in the <a href="http://leafletjs.com/reference.html">Leaflet reference</a> are exported as html attributes. All events are mapped into html events of the same name.</p>
109 | 
110 | 
111 | <h2 id="simple">Simple</h2>
112 | 
113 | <p>Creating a leaflet based map is as simple as adding a &lt;leaflet-map&gt; tag after two lines of boilerplate code to load the web component platform and import the leaflet-map component.</p>
114 | 
115 | <leaflet-map> </leaflet-map>
116 | 
117 | <pre class="html"><code>
118 | &lt;<span class="i">script</span> <span class="a">src</span>="<span class="v">../webcomponentsjs/webcomponents-lite.min.js</span>"&gt;&lt;/<span class="i">script</span>&gt;
119 | &lt;<span class="i">link</span> <span class="a">rel</span>="<span class="v">import</span>" <span class="a">href</span>="<span class="v">leaflet-map.html</span>"&gt;
120 | 
121 | &lt;<span class="i">leaflet-map</span>&gt; &lt;/<span class="i">leaflet-map</span>&gt;
122 | 
123 | </code></pre>
124 | 
125 | 
126 | 
127 | 
128 |  	
129 | <h2 id="view">Initial View</h2>
130 | 
131 | <p>Like normal html elements, the map is configurable with attributes. Those attributes correspond to the option parameter of L.map as defined in the <a href="http://leafletjs.com/reference.html">leaflet documentation</a>. For example the initial view is defined as follows:</p>
132 | 
133 | <leaflet-map latitude="51.505" longitude="-0.09" zoom="13"> </leaflet-map>
134 | 
135 | 
136 | <pre class="html"><code>
137 | &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">51.505</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">zoom</span>="<span class="v">13</span>"&gt;
138 | 
139 | &lt;/<span class="i">leaflet-map</span>&gt;
140 | 
141 | </code></pre>
142 | 
143 | 
144 | 
145 | <h2 id="marker">Marker</h2>
146 | 
147 | <p>Markers can be defined using html tags as well. The following examples creates a semi transparent marker on the left hand side. And a second marker with a popup on click.</p>
148 | 
149 | <leaflet-map fit-to-markers>
150 | 	<leaflet-marker latitude="51.5" longitude="-0.10" title="Transparent" opacity="0.6">
151 | 	</leaflet-marker>
152 | 	
153 | 	<leaflet-marker latitude="51.5" longitude="-0.09" title="Popup Demo">
154 | 		<b>Bold</b>
155 | 		<p>Text</p>
156 | 	</leaflet-marker>
157 | </leaflet-map>
158 | 
159 | <pre class="html"><code>
160 | &lt;<span class="i">leaflet-map</span> <span class="a">fit-to-markers</span>&gt;
161 | 
162 |     &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.10</span>" <span class="a">title</span>="<span class="v">Transparent</span>"
163 |         <span class="a">opacity</span>="<span class="v">0.6</span>"&gt;  &lt;/<span class="i">leaflet-marker</span>&gt;
164 | 
165 |     &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">title</span>="<span class="v">Popup Demo</span>"&gt; 
166 |         &lt;<span class="i">b</span>&gt;Bold&lt;/<span class="i">b</span>&gt;
167 |         &lt;<span class="i">p</span>&gt;Text&lt;/<span class="i">p</span>&gt;
168 |     &lt;/<span class="i">leaflet-marker</span>&gt;
169 | 
170 | &lt;/<span class="i">leaflet-map</span>&gt;
171 | 
172 | </code></pre>
173 | 
174 | 
175 | 
176 | 
177 | <h2 id="icon">Marker with custom icons</h2>
178 | 
179 | <p>Markers are based on formating templates called "icons". There are three ways to reference such an icon definition:</p> 
180 | 
181 | 
182 | <leaflet-map latitude="51.505" longitude="-0.09" zoom="13">
183 | 
184 | 	<leaflet-icon id="myicon" icon-url="https://stendhalgame.org/images/mapmarker/me.png"></leaflet-icon>
185 | 
186 | 	<leaflet-marker latitude="51.5" longitude="-0.10" title="Icon element reference" icon="myicon">
187 | 	</leaflet-marker>
188 | 	<leaflet-marker latitude="51.5" longitude="-0.09" title="Icon json" icon='{"iconUrl": "https://stendhalgame.org/images/mapmarker/dungeon.png"}'> 
189 | 	</leaflet-marker>
190 | 
191 | 	<leaflet-marker id="icon-reference" latitude="51.5" longitude="-0.08" title="Icon L.icon()">
192 | 
193 | 	</leaflet-marker>
194 | </leaflet-map>
195 | 
196 | <script>
197 | document.addEventListener("load", function() {
198 | 	var marker = document.getElementById("icon-reference");
199 | 	marker.icon = L.icon({
200 | 		"iconUrl": "https://stendhalgame.org/images/mapmarker/npc.png",
201 | 		"iconSize": L.point(26, 25),
202 | 		"iconAnchor": L.point(0, 0)
203 | 	});
204 | });
205 | </script>
206 | 
207 | <p>The template icon may be defined using &lt;leaflet-icon&gt; elements. This is the prefered way. Please note that iconSize is mapped to the attributes iconWidth and iconHeight. iconAnchor is mapped to iconAnchorX and iconAnchorY and so on:</p>
208 | 
209 | <pre class="html"><code>
210 | &lt;<span class="i">leaflet-icon</span> <span class="a">id</span>="<span class="v">myicon</span>" 
211 |     <span class="a">icon-url</span>="<span class="v">https://stendhalgame.org/images/mapmarker/me.png</span>"&gt; &lt;<span class="i">/leaflet-icon</span>&gt;
212 | 
213 | &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.10</span>" <span class="a">title</span>="<span class="v">Element</span>" <span class="a">icon</span>="<span class="v">myicon</span>"&gt;
214 | &lt;/<span class="i">leaflet-marker</span>&gt;
215 | 	
216 | </code></pre>
217 | 
218 | <p>Alternatively plain json is understood, too:</p>
219 | 
220 | <pre class="html"><code>
221 | &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">title</span>="<span class="v">Icon json</span>" 
222 |     <span class="a">icon</span>='<span class="v">{"iconUrl": "https://stendhalgame.org/images/mapmarker/dungeon.png"}</span>'&gt; 
223 | &lt;/<span class="i">leaflet-marker</span>&gt;
224 | 
225 | </code></pre>
226 | 
227 | <p>Last but not least, an instance of L.icon may be assigned:</p>
228 | 
229 | <pre class="html"><code>
230 | 
231 | &lt;<span class="i">leaflet-marker</span> <span class="a">id</span>="<span class="v">icon-ref</span>" <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.8</span>" <span class="a">title</span>="<span class="v">L.icon()</span>"&gt;
232 | &lt;/<span class="i">leaflet-marker</span>&gt;
233 | 
234 | &lt;<span class="i">script</span>&gt;
235 |     document.addEventListener("load", function() {
236 |         var marker = document.getElementById("icon-ref");
237 |         marker.icon = L.icon({
238 |             "iconUrl": "https://stendhalgame.org/images/mapmarker/npc.png",
239 |             "iconSize": L.point(26, 25),
240 |             "iconAnchor": L.point(0, 0)
241 |         });
242 |     });
243 | &lt;/<span class="i">script</span>&gt;
244 | 
245 | </code></pre>
246 | 
247 | <h2 id="vector">Circles, polyline and polygons</h2>
248 | 
249 | <p>Circles, polylines and polygons can be drawn on the map.</p>
250 | 
251 | <leaflet-map longitude="77.6" latitude="12.95" zoom="12">
252 | 
253 | 	<leaflet-polygon color="#f00">
254 | 		<leaflet-point longitude="77.5700" latitude="12.9700"></leaflet-point>
255 | 		<leaflet-point longitude="77.6034" latitude="13.0001"></leaflet-point>
256 | 		<leaflet-point longitude="77.6006" latitude="12.9547"></leaflet-point>
257 | 		Hi, I am a <b>polygon</b>.
258 | 	</leaflet-polygon>
259 | 
260 | 	<leaflet-circle longitude="77.58" latitude="12.9300"
261 | 		radius="2000" color="#0a0" fillColor="#aa0" fillopacity="0.5" fill="true">
262 | 		Hi, I am a <b>circle</b>.
263 | 	</leaflet-circle>
264 | 
265 | 	<leaflet-polyline>
266 | 		<leaflet-point longitude="77.6400" latitude="12.9100"></leaflet-point>
267 | 		<leaflet-point longitude="77.6229" latitude="12.9259"></leaflet-point>
268 | 		<leaflet-point longitude="77.6499" latitude="12.9699"></leaflet-point>
269 | 		<leaflet-point longitude="77.6119" latitude="12.9738"></leaflet-point>
270 | 	</leaflet-polyline>
271 | 
272 | 	<leaflet-circle longitude="77.64" latitude="12.9300"
273 | 		radius="500" color="#077">
274 | 	</leaflet-circle>
275 | 
276 | </leaflet-map>
277 | 
278 | 
279 | <pre class="html"><code>
280 | &lt;<span class="i">leaflet-map</span> <span class="a">longitude</span>="<span class="v">77.6</span>" <span class="a">latitude</span>="<span class="v">12.95</span>" <span class="a">zoom</span>="<span class="v">12</span>"&gt;
281 | 
282 |   &lt;<span class="i">leaflet-polygon</span> <span class="a">color</span>="<span class="v">#f00</span>"&gt;
283 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.5700</span>" <span class="a">latitude</span>="<span class="v">12.9700</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
284 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6034</span>" <span class="a">latitude</span>="<span class="v">13.0001</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
285 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6006</span>" <span class="a">latitude</span>="<span class="v">12.9547</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
286 | 
287 |      Hi, I am a &lt;<span class="i">b</span>&gt;polygon&lt;/<span class="i">b</span>&gt;.
288 |   &lt;/<span class="i">leaflet-polygon</span>&gt;
289 | 
290 |   &lt;<span class="i">leaflet-circle</span> <span class="a">longitude</span>="<span class="v">77.58</span>" <span class="a">latitude</span>="<span class="v">12.93</span>"
291 |      <span class="a">radius</span>="<span class="v">2000</span>" <span class="a">color</span>="<span class="v">#0a0</span>" <span class="a">fillColor</span>="<span class="v">#aa0</span>" <span class="a">fillOpacity</span>="<span class="v">0.5</span>" <span class="a">fill</span>="<span class="v">true</span>"
292 |      
293 |      Hi, I am a &lt;<span class="i">b</span>&gt;circle&lt;/<span class="i">b</span>&gt;.
294 |   &lt;/<span class="i">leaflet-circle</span>&gt;
295 | 
296 |   &lt;<span class="i">leaflet-polyline</span>&gt;
297 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6400</span>" <span class="a">latitude</span>="<span class="v">12.9100</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
298 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6229</span>" <span class="a">latitude</span>="<span class="v">12.9259</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
299 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6499</span>" <span class="a">latitude</span>="<span class="v">12.9699</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
300 |     &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6119</span>" <span class="a">latitude</span>="<span class="v">12.9738</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
301 |   &lt;/<span class="i">leaflet-polyline</span>&gt;
302 | 
303 |   &lt;<span class="i">leaflet-circle</span> <span class="a">longitude</span>="<span class="v">77.64</span>" <span class="a">latitude</span>="<span class="v">12.93</span>"
304 |      <span class="a">radius</span>="<span class="v">500</span>" <span class="a">color</span>="<span class="v">#0a0</span>" <span class="a">fillColor</span>="<span class="v">#077</span>"&gt;
305 |   &lt;/<span class="i">leaflet-circle</span>&gt;
306 | 
307 | &lt;/<span class="i">leaflet-map</span>&gt;
308 | 
309 | </code></pre>
310 | 
311 | 
312 | 
313 | 
314 | 
315 | 
316 | <h2 id="tilelayer">Tile layer</h2>
317 | 
318 | <p>Custom tile layers, for example from online games can be defined using the leaflet-tilelayer element. If there is no explicit tilelayer defined, a default one will be used as shown in previous examples.</p>
319 | 
320 | 
321 | <leaflet-map latitude="78.8" longitude="-96" zoom="5" min-zoom="2" max-zoom="6">
322 | 	<leaflet-tilelayer 
323 | 		url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
324 | 		min-zoom="2" max-zoom="6" no-wrap>
325 | 
326 | 			Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>
327 | 
328 | 	</leaflet-tilelayer>
329 | 
330 | </leaflet-map>
331 | 
332 | 
333 | <pre class="html"><code>
334 | &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">78.8</span>" <span class="a">longitude</span>="<span class="v">-96</span>" <span class="a">zoom</span>="<span class="v">5</span>" <span class="a">max-zoom</span>="<span class="v">6</span>"&gt;
335 | 
336 |     &lt;<span class="i">leaflet-tilelayer</span> 
337 |         <span class="a">url</span>="<span class="v">https://stendhalgame.org/map/3/{z}-{x}-{y}.png</span>"
338 |         <span class="a">min-zoom</span>="<span class="v">2</span>" <span class="a">max-zoom</span>="<span class="v">6</span>" <span class="a">noWrap</span>&gt;
339 | 
340 |             Map source: &lt;<span class="i">a</span> <span class="a">href</span>="<span class="v">https://stendhalgame.org</span>"&gt;Stendhal MMORPG&lt;/<span class="i">a</span>&gt;
341 | 
342 |     &lt;/<span class="i">leaflet-tilelayer</span>&gt;
343 | 
344 | &lt;/<span class="i">leaflet-map</span>&gt;
345 | 
346 | </code></pre>
347 | 
348 | 
349 | 
350 | 
351 | <h2 id="layerwms">Tile layer WMS</h2>
352 | 
353 | <p>It is possible to display data from external WMS services as tile layers on the map.</p>
354 | 
355 | 
356 | <leaflet-map latitude="40" longitude="-85" zoom="4">
357 | 
358 | 	<leaflet-tilelayer 
359 | 		url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" max-zoom="18">
360 | 			Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, 
361 | 			<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
362 | 			Imagery &copy; <a href="http://mapbox.com">Mapbox</a>
363 | 	</leaflet-tilelayer>
364 | 
365 | 	<leaflet-tilelayer-wms 
366 | 		url="https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi"
367 | 	    layers="nexrad-n0r-900913" format="image/png" transparent opacity="0.5">
368 | 
369 | 			Weather data &copy; 2012 IEM Nexrad
370 | 
371 | 	</leaflet-tilelayer-wms>
372 | 
373 | </leaflet-map>
374 | 
375 | 
376 | <pre class="html"><code>
377 | &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">40</span>" <span class="a">longitude</span>="<span class="v">-85</span>" <span class="a">zoom</span>="<span class="v">4</span>"&gt;
378 | 
379 |     &lt;<span class="i">leaflet-tilelayer</span> 
380 |         <span class="a">url</span>="<span class="v">https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</span>" <span class="a">max-zoom</span>="<span class="v">19</span>"&gt;
381 |           Map data &copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contr., 
382 |           &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, 
383 |           Imagery &copy; &lt;a href="http://mapbox.com">Mapbox&lt;/a&gt;
384 |     &lt;/<span class="i">leaflet-tilelayer</span>&gt;
385 | 
386 |     &lt;<span class="i">leaflet-tilelayer-wms</span> 
387 |         <span class="a">url</span>="<span class="v">https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi</span>"
388 |         <span class="a">layers</span>="<span class="v">nexrad-n0r-900913</span>" <span class="a">format</span>="<span class="v">image/png</span>" <span class="a">transparent</span> <span class="a">opacity</span>="<span class="v">0.5</span>"&gt;
389 | 
390 |             Weather data &copy; 2012 IEM Nexrad
391 | 
392 |     &lt;/<span class="i">leaflet-tilelayer-wms</span>&gt;
393 | 
394 | &lt;/<span class="i">leaflet-map</span>&gt;
395 | 
396 | </code></pre>
397 | 
398 | 
399 | 
400 | 
401 | 
402 | <h2 id="event">Events</h2>
403 | 
404 | <p>Leaflet events are converted into html events which originate from the component.</p> 
405 | 
406 |  
407 | <div id="eventout">Center: 51.505, -0.091</div>
408 | <leaflet-map id="eventmap" latitude="51.505" longitude="-0.091" zoom="8"> </leaflet-map>
409 | 
410 | <script>
411 | var map = document.getElementById("eventmap");
412 | map.addEventListener("moveend", function(e) {
413 | 	var text = "Center: " + this.latitude.toFixed(3) + ", "
414 | 	                      + this.longitude.toFixed(3);
415 | 	document.getElementById("eventout").textContent = text; 
416 | });
417 | </script>
418 | 
419 | 
420 | <pre class="html"><code>
421 | &lt;<span class="i">div</span> <span class="a">id</span>="<span class="v">eventout</span>"&gt;Center: 51.505, -0.091&lt;/<span class="i">div</span>&gt;
422 | &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">51.505</span>" <span class="a">longitude</span>="<span class="v">-0.091</span>" <span class="a">zoom</span>="<span class="v">8</span>"&gt; &lt;/<span class="i">leaflet-map</span>&gt;
423 | 
424 | &lt;<span class="i">script</span>&gt;
425 |     var map = document.getElementById("eventmap");
426 |     map.addEventListener("moveend", function(e) {
427 |         var text = "Center: " + this.latitude.toFixed(3)
428 |                               + ", " + this.longitude.toFixed(3);
429 |         document.getElementById("eventout").textContent = text; 
430 |     });
431 | &lt;/<span class="i">script</span>&gt;
432 | 
433 | </code></pre>
434 | 
435 | 
436 | 
437 | 
438 | 
439 | <h2 id="scale">Scale control</h2>
440 | 
441 | <p>A scale control can be added and configured using &lt;leaflet-scale-control&gt;. By default it displays both metric and imperial units.</p>
442 | 
443 | <leaflet-map latitude="51.505" longitude="-0.09" zoom="6">
444 | 	<leaflet-scale-control position="topright" metric imperial>
445 | 	</leaflet-scale-control>
446 | </leaflet-map>
447 | 
448 | <pre class="html"><code>
449 | &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">51.505</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">zoom</span>="<span class="v">13</span>"&gt;
450 | 
451 |     &lt;<span class="i">leaflet-scale-control</span> <span class="a">position</span>="<span class="v">topright</span>" <span class="a">metric</span> <span class="a">imperial</span>&gt;
452 |     &lt;/<span class="i">leaflet-scale-control</span>&gt;
453 | 
454 | &lt;/<span class="i">leaflet-map</span>&gt;
455 | 
456 | </code></pre>
457 | 
458 | 
459 | 
460 | <h2 id="geojson">GeoJSON</h2>
461 | 
462 | <p>Example of a GeoJSON layer, which is filled by an ajax request.</p>
463 | 
464 | <leaflet-map longitude="102.304" latitude="0.3516" zoom="6">
465 | 	<leaflet-tilelayer 
466 | 		url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" maxZoom="18">
467 | 			Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, 
468 | 			<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
469 | 			Imagery &copy; <a href="http://mapbox.com">Mapbox</a>
470 | 	</leaflet-tilelayer>
471 | 
472 | 	<template is="dom-bind">
473 | 		<iron-ajax url="demo-geojson.json" handle-as="json" auto last-response="{{data}}"></iron-ajax>
474 | 		<leaflet-geojson id="leafletgeojson" color="#FF0000" data="[[data]]"></leaflet-geojson>
475 | 	</template>
476 | </leaflet-map>
477 | 
478 | 
479 | 
480 | <pre class="html"><code>
481 | &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">0.3516</span>" <span class="a">longitude</span>="<span class="v">102.304</span>" <span class="a">zoom</span>="<span class="v">6</span>"&gt;
482 | 
483 |     &lt;<span class="i">leaflet-tilelayer</span> 
484 |         <span class="a">url</span>="<span class="v">https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</span>" <span class="a">max-zoom</span>="<span class="v">19</span>"&gt;
485 |           Map data &copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contr., 
486 |           &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, 
487 |           Imagery &copy; &lt;a href="http://mapbox.com">Mapbox&lt;/a&gt;
488 |     &lt;/<span class="i">leaflet-tilelayer</span>&gt;
489 | 
490 |     &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-bind</span>"&gt;
491 |       &lt;<span class="i">iron-ajax</span> <span class="a">url</span>="<span class="v">demo-geojson.json</span>" <span class="a">last-response</span>="<span class="v">{{data}}</span>" <span class="a">auto</span>&gt;
492 |       &lt;/<span class="i">iron-ajax</span>&gt;
493 |       &lt;<span class="i">leaflet-geojson</span> <span class="a">color</span>="<span class="v">#FF0000</span>" <span class="a">data</span>="<span class="v">[[data]]</span>"&gt;&lt;/<span class="i">leaflet-geojson</span>&gt;
494 |     &lt;/<span class="i">template</span>&gt;
495 | 
496 | &lt;/<span class="i">leaflet-map</span>&gt;
497 | 
498 | </code></pre>
499 | 
500 | 
501 | <h2 id="databinding">Data binding and custom components</h2>
502 | 
503 | <p>Data binding can be used to create markers based on dynamic information, e. g. from the rows of a spreadsheet. 
504 | In this example a new component is created which listens for location tracking information and sets a marker accordingly.
505 | A circle is used to indicate the range of uncertainty.</p>
506 | 
507 | 
508 | <button id="advanceddemo-button">Show advanced demo</button>
509 | <div id="advanceddemo-target"></div>
510 | 
511 | <template id=advanceddemo-template>
512 | <geolocation-sample> </geolocation-sample>
513 | 
514 | 
515 | <pre class="html"><code>
516 | <span class="c">&lt;-- define geolocation-sample component --&gt;</span>
517 | &lt;<span class="i">dom-module</span> <span class="a">id</span>="<span class="v">geolocation-sample</span>"&gt;
518 |   &lt;<span class="i">template</span>&gt;
519 |     &lt;<span class="i">style</span>&gt;
520 |        :host { display: block; overflow: hidden} 
521 |        :host leaflet-map {height:18em; width:99%; border: none}
522 |     &lt;/<span class="i">style</span>&gt;
523 | 
524 |     <span class="c">&lt;-- information text above the map --&gt;</span>
525 |     &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-if</span>" <span class="a">if</span>="<span class="v">{{!latitude}}</span>"&gt;
526 |         Location Unknown.
527 |     &lt;/<span class="i">template</span>&gt;
528 | 
529 |     &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-if</span>" <span class="a">if</span>="<span class="v">{{latitude}}</span>"&gt;
530 |         lat: &lt;<span class="i">span</span>&gt;{{latitude}}&lt;/<span class="i">span</span>&gt;, 
531 |         lng: &lt;<span class="i">span</span>&gt;{{longitude}}&lt;/<span class="i">span</span>&gt;, 
532 |         accuracy: &lt;<span class="i">span</span>&gt;{{accuracy}}&lt;/<span class="i">span</span>&gt; meter
533 |     &lt;/<span class="i">template</span>&gt;
534 | 
535 | 
536 |     &lt;<span class="i">leaflet-map</span>&gt;
537 | 
538 |       <span class="c">&lt;-- request geo-location information --&gt;</span>
539 |       &lt;<span class="i">leaflet-geolocation</span> <span class="a">enable-high-accuracy</span>
540 |         <span class="a">latitude</span>="<span class="v">{{latitude}}</span>" <span class="a">longitude</span>="<span class="v">{{longitude}}</span>" <span class="a">accuracy</span>="<span class="v">{{accuracy}}</span>"
541 |       &lt;/<span class="i">leaflet-geolocation</span>&gt;
542 | 
543 | 
544 |       <span class="c">&lt;-- add marker, if location information is available --&gt;</span>
545 |       &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-if</span>" <span class="a">if</span>="<span class="v">{{latitude}}</span>"&gt;
546 |         &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">{{latitude}}</span>" <span class="a">longitude</span>="<span class="v">{{longitude}}</span>"&gt;
547 |             I am within &lt;<span class="i">span</span>&gt;{{accuracy}}&lt;/<span class="i">span</span>&gt; meters of this location.
548 |         &lt;/<span class="i">leaflet-marker</span>&gt;
549 | 
550 |         &lt;<span class="i">leaflet-circle</span> <span class="a">latitude</span>="<span class="v">{{latitude}}</span>" <span class="a">longitude</span>="<span class="v">{{longitude}}</span>"
551 |           <span class="a">radius</span>="<span class="v">{{accuracy}}</span>"<span class="a">color</span>="<span class="v">#d00</span>"&gt;
552 |         &lt;/<span class="i">leaflet-circle</span>&gt;
553 | 
554 |       &lt;/<span class="i">template</span>&gt;
555 | 
556 |     &lt;/<span class="i">leaflet-map</span>&gt;
557 | 
558 |   &lt;/<span class="i">template</span>&gt;
559 | &lt;/<span class="i">dom-module</span>&gt;
560 | 
561 | &lt;<span class="i">script</span>&gt;
562 |   Polymer({
563 |     is: "geolocation-sample"
564 |   });
565 | &lt;/<span class="i">script</span>&gt;
566 | 
567 | <span class="c">&lt;-- use our component --&gt;</span>
568 | &lt;<span class="i">geolocation-sample</span>&gt; &lt;/<span class="i">geolocation-sample</span>&gt;
569 | 
570 | </code></pre>
571 | </template>
572 | 
573 | <script>
574 | document.getElementById("advanceddemo-button").addEventListener("click", function() {
575 | 	document.getElementById("advanceddemo-button").style.display = "none";
576 | 	var clone = document.importNode(document.getElementById("advanceddemo-template").content, true);
577 | 	document.getElementById("advanceddemo-target").appendChild(clone);
578 | });
579 | </script>
580 | 
581 | </div>
582 | 	</body>
583 | </html>
584 | 


--------------------------------------------------------------------------------
/leaflet-control.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="leaflet-core.html">
  2 | 
  3 | <!--
  4 | Scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. (<a href="http://leafletjs.com/reference.html#control-scale">Leaflet Reference</a>).
  5 | 
  6 | ##### Example
  7 | 
  8 |     <leaflet-scale-control> </leaflet-scale-control>
  9 | 	
 10 | ##### Example
 11 | 
 12 |     <leaflet-scale-control metric>
 13 |     </leaflet-scale-control>
 14 | 
 15 | @element leaflet-scale-control
 16 | @blurb Scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. 
 17 | @homepage https://leaflet-extras.github.io/leaflet-map/
 18 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 19 | -->
 20 | 
 21 | <dom-module id="leaflet-scale-control">
 22 | 	<style>
 23 | 		:host {display: none;}
 24 | 	</style>
 25 | 	<template>
 26 | 	</template>
 27 | 	<script>
 28 | 	"use strict";
 29 | 
 30 | 	Polymer({
 31 | 		is: 'leaflet-scale-control',
 32 | 
 33 | 		properties: {
 34 | 
 35 | 			/**
 36 | 			 * The `position` attribute sets the position of the control (one of the map corners). See control positions.
 37 | 			 * 
 38 | 			 * @attribute position
 39 | 			 * @type string
 40 | 			 */
 41 | 			position: {
 42 | 				type: String,
 43 | 				value: "bottomleft"
 44 | 			},
 45 | 	
 46 | 			/**
 47 | 			 * 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).
 48 | 			 * 
 49 | 			 * @attribute max-width
 50 | 			 * @type number
 51 | 			 */
 52 | 			maxWidth: {
 53 | 				type: Number,
 54 | 				value: 100
 55 | 			},
 56 | 	
 57 | 			/**
 58 | 			 * The `metric` attribute sets whether to show the metric scale line (m/km).
 59 | 			 * 
 60 | 			 * @attribute metric
 61 | 			 * @type boolean
 62 | 			 */
 63 | 			metric: {
 64 | 				type: Boolean,
 65 | 				value: false
 66 | 			},
 67 | 	
 68 | 			/**
 69 | 			 * The `imperial` attribute sets whether to show the imperial scale line (mi/ft).
 70 | 			 * 
 71 | 			 * @attribute imperial 
 72 | 			 * @type boolean
 73 | 			 */
 74 | 			imperial: {
 75 | 				type: Boolean,
 76 | 				value: false
 77 | 			},
 78 | 	
 79 | 			/**
 80 | 			 * The `update-when-idle` attribute sets whether the control is updated on moveend, otherwise it's always up-to-date (updated on move).
 81 | 			 * 
 82 | 			 * @attribute update-when-idle
 83 | 			 * @type boolean
 84 | 			 */
 85 | 			updateWhenIdle: {
 86 | 				type: Boolean,
 87 | 				value: false
 88 | 			},
 89 | 
 90 | 			container: {
 91 | 				type: Object,
 92 | 				observer: '_containerChanged'
 93 | 			}
 94 | 		},
 95 | 
 96 | 		_containerChanged: function() {
 97 | 			if (this.container) {
 98 | 				var control = L.control.scale({
 99 | 					 position: this.position,
100 | 					 maxWidth: this.maxWidth,
101 | 					 metric: this.metric || !this.imperial,
102 | 					 imperial: this.imperial || !this.metric,
103 | 					 updateWhenIdle: this.updateWhenIdle,
104 | 				});
105 | 				this.control = control;
106 | 				this.control.addTo(this.container);
107 | 			}
108 | 		},
109 | 
110 | 		detached: function() {
111 | 			if (this.container && this.control) {
112 | 				this.container.removeControl(this.control);
113 | 			}
114 | 		}
115 | 	});
116 | 	</script>
117 | </dom-module>
118 | 


--------------------------------------------------------------------------------
/leaflet-core.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="leaflet-import.html">
  3 | 
  4 | <!--
  5 | element which defines a leaflet map (<a href="http://leafletjs.com/reference.html#map">Leaflet Reference</a>).
  6 | 
  7 | ##### Example
  8 | 
  9 |     <leaflet-map> </leaflet-map>
 10 | 
 11 | This simple example will show a map of the world. It is pan and zoomable.
 12 | 
 13 | ##### Example
 14 | 
 15 |     <leaflet-map latitude="78.8" longitude="-96" zoom="5">
 16 | 
 17 |         <leaflet-marker latitude="51.5" longitude="-0.10" title="Some title">
 18 |             <b>Popup text</b>
 19 |         </leaflet-marker>
 20 | 
 21 |     </leaflet-map>
 22 | 
 23 | This code will zoom in on the specified latitude and longitude coordinates. Further, it will
 24 | add a marker with a popup text.
 25 | 
 26 | ##### Example: Add markers & circles
 27 |     <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
 28 |         <leaflet-marker longitude="77.2" latitude="28.4">
 29 |             Marker
 30 |         </leaflet-marker>
 31 |         <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
 32 |             Circle
 33 |         </leaflet-circle>
 34 |     </leaflet-map>
 35 | 
 36 | 
 37 | 
 38 | @element leaflet-map
 39 | @blurb element which defines a leaflet map. Most options are supported as attributes.
 40 | @homepage https://leaflet-extras.github.io/leaflet-map/
 41 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 42 | -->
 43 | <dom-module id="leaflet-map">
 44 | 	<style>
 45 | 		:host { display: block; }
 46 | 		:host #map {height:100%; width:100%}
 47 | 	</style>
 48 | 	<!-- include stylesheet for shady dom and shadow dom -->
 49 | 	<link rel="stylesheet" href="../leaflet/dist/leaflet.css" />
 50 | 	<link rel="import" type="css" href="../leaflet/dist/leaflet.css" />
 51 | 	<template>
 52 | 		<div id="map"></div>
 53 | 		<content id="markers" select="*"></content>
 54 |   	</template>
 55 | </dom-module>
 56 | <script>
 57 | 	"use strict";
 58 | 
 59 | 	Polymer({
 60 | 		is: 'leaflet-map',
 61 | 
 62 | 		/**
 63 | 		 * Fired when the user clicks (or taps) the marker.
 64 | 		 *
 65 | 		 * @event click
 66 | 		 * @type MouseEvent
 67 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 68 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 69 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 70 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 71 | 		 */
 72 | 
 73 | 		/**
 74 | 		 * Fired when the user double-clicks (or double-taps) the marker.
 75 | 		 *
 76 | 		 * @event dblclick
 77 | 		 * @type MouseEvent
 78 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 79 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 80 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 81 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 82 | 		 */
 83 | 
 84 | 		/**
 85 | 		 * Fired when the user pushes the mouse button on the marker.
 86 | 		 *
 87 | 		 * @event mousedown
 88 | 		 * @type MouseEvent
 89 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 90 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 91 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 92 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 93 | 		 */
 94 | 
 95 | 		/**
 96 | 		 * Fired when the mouse enters the marker.
 97 | 		 *
 98 | 		 * @event mouseover
 99 | 		 * @type MouseEvent
100 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
101 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
102 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
103 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
104 | 		 */
105 | 
106 | 		/**
107 | 		 * Fired when the mouse leaves the marker.
108 | 		 *
109 | 		 * @event mouseout
110 | 		 * @type MouseEvent
111 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
112 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
113 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
114 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
115 | 		 */
116 | 
117 | 		/**
118 | 		 * Fired when the user right-clicks on the marker.
119 | 		 *
120 | 		 * @event contextmenu
121 | 		 * @type MouseEvent
122 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
123 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
124 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
125 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
126 | 		 */
127 | 
128 | 		/**
129 | 		 * Fired when the user focuses the map either by tabbing to it or clicking/panning.
130 | 		 *
131 | 		 * @event focus
132 | 		 */
133 | 
134 | 		/**
135 | 		 * Fired when the map looses focus.
136 | 		 *
137 | 		 * @event blur
138 | 		 */
139 | 
140 | 		/**
141 | 		 * Fired before mouse click on the map (sometimes useful when you want something to happen on click before any existing click handlers start running).
142 | 		 *
143 | 		 * @event preclick
144 | 		 * @type MouseEvent
145 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
146 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
147 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
148 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
149 | 		 */
150 | 
151 | 		/**
152 | 		 * Fired when the map is initialized (when its center and zoom are set for the first time).
153 | 		 *
154 | 		 * @event load
155 | 		 */
156 | 
157 | 		/**
158 | 		 * Fired when the map is destroyed with remove method.
159 | 		 *
160 | 		 * @event unload
161 | 		 */
162 | 
163 | 		/**
164 | 		 * Fired when the map needs to redraw its content (this usually happens on map zoom or load). Very useful for creating custom overlays.
165 | 		 *
166 | 		 * @event viewreset
167 | 		 */
168 | 
169 | 		/**
170 | 		 * Fired when the view of the map starts changing (e.g. user starts dragging the map).
171 | 		 *
172 | 		 * @event movestart
173 | 		 */
174 | 
175 | 		/**
176 | 		 * Fired on any movement of the map view.
177 | 		 *
178 | 		 * @event move
179 | 		 */
180 | 
181 | 		/**
182 | 		 * Fired when the view of the map ends changed (e.g. user stopped dragging the map).
183 | 		 *
184 | 		 * @event moveend
185 | 		 */
186 | 
187 | 		/**
188 | 		 * Fired when the user starts dragging the marker.
189 | 		 *
190 | 		 * @event dragstart
191 | 		 */
192 | 
193 | 		/**
194 | 		 * Fired repeatedly while the user drags the marker.
195 | 		 *
196 | 		 * @event drag
197 | 		 */
198 | 
199 | 		/**
200 | 		 * Fired when the user stops dragging the marker.
201 | 		 *
202 | 		 * @event dragend
203 | 		 * @type DragEndEvent
204 | 		 * @param {number} distance The distance in pixels the draggable element was moved by.
205 | 		 */
206 | 
207 | 		/**
208 | 		 * Fired when the map zoom is about to change (e.g. before zoom animation).
209 | 		 *
210 | 		 * @event zoomstart
211 | 		 */
212 | 
213 | 		/**
214 | 		 * Fired when the map zoom changes.
215 | 		 *
216 | 		 * @event zoomend
217 | 		 */
218 | 
219 | 		/**
220 | 		 * Fired when the number of zoomlevels on the map is changed due to adding or removing a layer.
221 | 		 *
222 | 		 * @event zoomlevelschange
223 | 		 */
224 | 
225 | 		/**
226 | 		 * Fired when the map is resized.
227 | 		 *
228 | 		 * @event resize
229 | 		 * @type ResizeEvent
230 | 		 * @param {Point}	oldSize	The old size before resize event.
231 | 		 * @param {Point}	newSize	The new size after the resize event.
232 | 		 */
233 | 
234 | 		/**
235 | 		 * Fired when the map starts autopanning when opening a popup.
236 | 		 *
237 | 		 * @event autopanstart
238 | 		 */
239 | 
240 | 		/**
241 | 		 * Fired when a new layer is added to the map.
242 | 		 *
243 | 		 * @event layeradd
244 | 		 * @type LayerEvent
245 | 		 * @param {ILayer}	layer	The layer that was added or removed.
246 | 		 */
247 | 
248 | 		/**
249 | 		 * Fired when some layer is removed from the map.
250 | 		 *
251 | 		 * @event layerremove
252 | 		 * @type LayerEvent
253 | 		 * @param {ILayer}	layer	The layer that was added or removed.
254 | 		 */
255 | 
256 | 		/**
257 | 		 * Fired when the base layer is changed through the layer control.
258 | 		 *
259 | 		 * @event baselayerchange
260 | 		 * @type LayerEvent
261 | 		 * @param {ILayer}	layer	The layer that was added or removed.
262 | 		 */
263 | 
264 | 		/**
265 | 		 * Fired when an overlay is selected through the layer control.
266 | 		 *
267 | 		 * @event overlayadd
268 | 		 * @type LayerEvent
269 | 		 * @param {ILayer}	layer	The layer that was added or removed.
270 | 		 */
271 | 
272 | 		/**
273 | 		 * Fired when an overlay is deselected through the layer control.
274 | 		 *
275 | 		 * @event overlayremove
276 | 		 * @type LayerEvent
277 | 		 * @param {ILayer}	layer	The layer that was added or removed.
278 | 		 */
279 | 
280 | 		/**
281 | 		 * Fired when geolocation (using the locate method) went successfully.
282 | 		 *
283 | 		 * @event locationfound
284 | 		 * @type LocationEvent
285 | 		 * @param {LatLng} latlng Detected geographical location of the user.
286 | 		 * @param {LatLngBounds} bounds Geographical bounds of the area user is located in (with respect to the accuracy of location).
287 | 		 * @param {Number} accuracy Accuracy of location in meters.
288 | 		 * @param {Number} altitude Height of the position above the WGS84 ellipsoid in meters.
289 | 		 * @param {Number} altitudeAccuracy Accuracy of altitude in meters.
290 | 		 * @param {Number} heading The direction of travel in degrees counting clockwise from true North.
291 | 		 * @param {Number} speed Current velocity in meters per second.
292 | 		 * @param {Number} timestamp The time when the position was acquired.
293 | 		 */
294 | 
295 | 		/**
296 | 		 * Fired when geolocation (using the locate method) failed.
297 | 		 *
298 | 		 * @event locationerror
299 | 		 * @type ErrorEvent
300 | 		 * @param {string} message Error message.
301 | 		 * @param {number} code Error code (if applicable).
302 | 		 */
303 | 
304 | 		/**
305 | 		 * Fired when a popup bound to the marker is open.
306 | 		 *
307 | 		 * @event popupopen
308 | 		 * @type PopupEvent
309 | 		 * @param {Popup} popup The popup that was opened or closed.
310 | 		 */
311 | 
312 | 		 /**
313 | 		 * Fired when a popup bound to the marker is closed.
314 | 		 *
315 | 		 * @event popupclose
316 | 		 * @type PopupEvent
317 | 		 * @param {Popup} popup The popup that was opened or closed.
318 | 		 */
319 | 
320 | 
321 | 		properties: {
322 | 
323 | 			/**
324 | 			 * The `latitude` attribute sets the map center.
325 | 			 *
326 | 			 * @attribute latitude
327 | 			 * @type number
328 | 			 */
329 | 			latitude: {
330 | 				type: Number,
331 | 				value: 51,
332 | 				reflectToAttribute: true,
333 | 				notify: true,
334 | 				observer: '_viewChanged'
335 | 			},
336 | 
337 | 			/**
338 | 			 * The `longitude` attribute sets the map center.
339 | 			 *
340 | 			 * @attribute longitude
341 | 			 * @type number
342 | 			 */
343 | 			longitude: {
344 | 				type: Number,
345 | 				value: 0,
346 | 				reflectToAttribute: true,
347 | 				notify: true,
348 | 				observer: '_viewChanged'
349 | 			},
350 | 
351 | 			/**
352 | 			 * The `zoom` attribute sets the map zoom.
353 | 			 *
354 | 			 * @attribute zoom
355 | 			 * @type number
356 | 			 */
357 | 			zoom: {
358 | 				type: Number,
359 | 				value: -1,
360 | 				reflectToAttribute: true,
361 | 				notify: true,
362 | 				observer: '_viewChanged'
363 | 			},
364 | 
365 | 
366 | 			/**
367 | 			 * The `min-zoom` attribute sets the minimum zoom level of the map. Overrides any minZoom set on map layers.
368 | 			 *
369 | 			 * @attribute min-zoom
370 | 			 * @type number
371 | 			 */
372 | 			minZoom: {
373 | 		    	 type: Number,
374 | 		    	 value: 0
375 | 			},
376 | 
377 | 			/**
378 | 			 * The `maxZoom` attribute sets the maximum zoom level of the map. This overrides any maxZoom set on map layers.
379 | 			 *
380 | 			 * @attribute max-zoom
381 | 			 * @type number
382 | 			 */
383 | 			maxZoom: {
384 | 		    	 type: Number,
385 | 		    	 value: 9007199254740992
386 | 			},
387 | 
388 | 			/**
389 | 			 * The `no-dragging` attribute disables whether the map is draggable with mouse/touch or not.
390 | 			 *
391 | 			 * @attribute no-dragging
392 | 			 * @type bool
393 | 			 */
394 | 			noDragging: {
395 | 		    	 type: Boolean,
396 | 		    	 value: false
397 | 			},
398 | 
399 | 			/**
400 | 			 * The `no-touch-zoom` attribute disables whether the map can be zoomed by touch-dragging with two fingers.
401 | 			 *
402 | 			 * @attribute no-touch-zoom
403 | 			 * @type bool
404 | 			 */
405 | 			noTouchZoom: {
406 | 		    	 type: Boolean,
407 | 		    	 value: false
408 | 			},
409 | 
410 | 			/**
411 | 			 * 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.
412 | 			 *
413 | 			 * @attribute no-scroll-wheel-zoom
414 | 			 * @type bool
415 | 			 */
416 | 			noScrollWheelZoom: {
417 | 		    	 type: Boolean,
418 | 		    	 value: false
419 | 			},
420 | 
421 | 			/**
422 | 			 * 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.
423 | 			 *
424 | 			 * @attribute no-double-click-zoom
425 | 			 * @type bool
426 | 			 */
427 | 			noDoubleClickZoom: {
428 | 		    	 type: Boolean,
429 | 		    	 value: false
430 | 			},
431 | 
432 | 			/**
433 | 			 * 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.
434 | 			 *
435 | 			 * @attribute no-box-zoom
436 | 			 * @type bool
437 | 			 */
438 | 			noBoxZoom: {
439 | 		    	 type: Boolean,
440 | 		    	 value: false
441 | 			},
442 | 
443 | 			/**
444 | 			 * 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).
445 | 			 *
446 | 			 * @attribute no-tap
447 | 			 * @type bool
448 | 			 */
449 | 			noTap: {
450 | 		    	 type: Boolean,
451 | 		    	 value: false
452 | 			},
453 | 
454 | 			/**
455 | 			 * 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.
456 | 			 *
457 | 			 * @attribute tap-tolerance
458 | 			 * @type number
459 | 			 */
460 | 			tapTolerance: {
461 | 		    	 type: Number,
462 | 		    	 value: 15
463 | 			},
464 | 
465 | 			/**
466 | 			 * The `no-track-resize` attribute disables whether the map automatically handles browser window resize to update itself.
467 | 			 *
468 | 			 * @attribute no-track-resize
469 | 			 * @type bool
470 | 			 */
471 | 			noTrackResize: {
472 | 		    	 type: Boolean,
473 | 		    	 value: false
474 | 			},
475 | 
476 | 			/**
477 | 			 * 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.
478 | 			 *
479 | 			 * @attribute world-copy-jump
480 | 			 * @type bool
481 | 			 */
482 | 			worldCopyJump: {
483 | 		    	 type: Boolean,
484 | 		    	 value: false
485 | 			},
486 | 
487 | 			/**
488 | 			 * The `no-close-popup-on-click` attribute disables whether popups are closed when user clicks the map.
489 | 			 *
490 | 			 * @attribute no-close-popup-on-click
491 | 			 * @type bool
492 | 			 */
493 | 			noClosePopupOnClick: {
494 | 		    	 type: Boolean,
495 | 		    	 value: false
496 | 			},
497 | 
498 | 			/**
499 | 			 * The `no-bounce-at-zoom-limits` attribute disables whether the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.
500 | 			 *
501 | 			 * @attribute no-bounce-at-zoom-limits
502 | 			 * @type bool
503 | 			 */
504 | 			noBounceAtZoomLimits: {
505 | 		    	 type: Boolean,
506 | 		    	 value: false
507 | 			},
508 | 
509 | 			/**
510 | 			 * The `no-keyboard` attribute disables whether the map is focusable and allows users to navigate the map with keyboard arrows and +/- keys.
511 | 			 *
512 | 			 * @attribute no-keyboard
513 | 			 * @type bool
514 | 			 */
515 | 			noKeyboard: {
516 | 		    	 type: Boolean,
517 | 		    	 value: false
518 | 			},
519 | 
520 | 			/**
521 | 			 * The `keyboard-pan-offset` attribute sets the amount of pixels to pan when pressing an arrow key.
522 | 			 *
523 | 			 * @attribute keyboard-pan-offset
524 | 			 * @type number
525 | 			 */
526 | 			keyboardPanOffset: {
527 | 		    	 type: Number,
528 | 		    	 value: 80
529 | 			},
530 | 
531 | 			/**
532 | 			 * The `keyboard-zoom-offset` attribute sets the number of zoom levels to change when pressing + or - key.
533 | 			 *
534 | 			 * @attribute keyboard-zoom-offset
535 | 			 * @type number
536 | 			 */
537 | 			keyboardZoomOffset: {
538 | 		    	 type: Number,
539 | 		    	 value: 1
540 | 			},
541 | 
542 | 			/**
543 | 			 * 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.
544 | 			 *
545 | 			 * @attribute no-inertia
546 | 			 * @type
547 | 			 */
548 | 			noInertia: {
549 | 		    	 type: Boolean,
550 | 		    	 value: false
551 | 			},
552 | 
553 | 			/**
554 | 			 * The `inertia-deceleration` attribute sets the rate with which the inertial movement slows down, in pixels/second2.
555 | 			 *
556 | 			 * @attribute inertia-deceleration
557 | 			 * @type number
558 | 			 */
559 | 			inertiaDeceleration: 3000,
560 | 
561 | 			/**
562 | 			 * The `inertia-max-speed` attribute sets the max speed of the inertial movement, in pixels/second.
563 | 			 *
564 | 			 * @attribute inertia-max-speed
565 | 			 * @type number
566 | 			 */
567 | 			inertiaMaxSpeed: {
568 | 		    	 type: Number,
569 | 		    	 value: 1500
570 | 			},
571 | 
572 | 			/**
573 | 			 * The `no-zoom-control` attribute disables the zoom control is added to the map by default.
574 | 			 *
575 | 			 * @attribute no-zoom-control
576 | 			 * @type bool
577 | 			 */
578 | 			noZoomControl: {
579 | 		    	 type: Boolean,
580 | 		    	 value: false
581 | 			},
582 | 
583 | 			/**
584 | 			 * The `no-attribution-control` attribute disable the attribution control is added to the map by default.
585 | 			 *
586 | 			 * @attribute no-attribution-control
587 | 			 * @type bool
588 | 			 */
589 | 			noAttributionControl: {
590 | 		    	 type: Boolean,
591 | 		    	 value: false
592 | 			},
593 | 
594 | 			/**
595 | 			 * The `zoom-animation-threshold` attribute sets the maximum number of zoom level differences that still use animation
596 | 			 *
597 | 			 * @attribute zoom-animation-threshold
598 | 			 * @type number
599 | 			 */
600 | 			zoomAnimationThreshold: {
601 | 		    	 type: Number,
602 | 		    	 value: 4
603 | 			},
604 | 
605 | 			/**
606 | 		      * If set, the map is zoomed such that all elements in it are visible
607 | 		      *
608 | 		      * @attribute fit-to-markers
609 | 		      * @type boolean
610 | 		      * @default false
611 | 		      */
612 | 		     fitToMarkers: {
613 | 		    	 type: Boolean,
614 | 		    	 value: false,
615 | 		    	 observer: '_fitToMarkers'
616 | 		     }
617 | 		},
618 | 
619 | 		/**
620 | 		 * reference to the leaflet map
621 | 		 *
622 | 		 * @property map
623 | 		 * @type L.map
624 | 		 */
625 | 		map: undefined,
626 | 
627 | 		ready: function() {
628 | 			// TODO09: Workaround for removed domReady event
629 | 			var me = this;
630 | 			setTimeout(function() {me.domReady()}, 1);
631 | 		},
632 | 
633 | 
634 | 		guessLeafletImagePath: function() {
635 | 			if (L.Icon.Default.imagePath) {
636 | 				return;
637 | 			}
638 | 
639 | 			var scripts = document.getElementsByTagName('link'),
640 | 			    leafletRe = /[\/^]leaflet-map.html$/;
641 | 
642 | 			var i, len, src, matches, path;
643 | 
644 | 			for (i = 0, len = scripts.length; i < len; i++) {
645 | 				src = scripts[i].href;
646 | 				matches = src.match(leafletRe);
647 | 
648 | 				if (matches) {
649 | 					path = src.split(leafletRe)[0];
650 | 					L.Icon.Default.imagePath = (path ? path + '/' : '') + '../leaflet/dist/images';
651 | 				}
652 | 			}
653 | 		},
654 | 
655 | 		domReady: function() {
656 | 			this.guessLeafletImagePath();
657 | 			var map = L.map(this.$.map, {
658 | 				minZoom: this.minZoom,
659 | 				maxZoom: this.maxZoom,
660 | 				dragging: !this.noDragging,
661 | 				touchZoom: !this.noTouchZoom,
662 | 				scrollWheelZoom: !this.noScrollWheelZoom,
663 | 				doubleClickZoom: !this.noDoubleClickZoom,
664 | 				boxZoom: !this.noBoxZoom,
665 | 				tap: !this.noTap,
666 | 				tapTolerance: this.tapTolerance,
667 | 				trackResize: !this.noTrackResize,
668 | 				worldCopyJump: this.worldCopyJump,
669 | 				closePopupOnClick: !this.noClosePopupOnClick,
670 | 				bounceAtZoomLimits: !this.noBounceAtZoomLimits,
671 | 				keyboard: !this.noKeyboard,
672 | 				keyboardPanOffset: this.keyboardPanOffset,
673 | 				keyboardZoomOffset: this.keyboardZoomOffset,
674 | 				inertia: !this.noInertia,
675 | 				inertiaDeceleration: this.inertiaDeceleration,
676 | 				inertiaMaxSpeed: this.inertiaMaxSpeed,
677 | 				zoomControl: !this.noZoomControl,
678 | 				attributionControl: !this.noAttributionControl,
679 | 				zoomAnimationThreshold: this.zoomAnimationThreshold
680 | 			});
681 | 			this.map = map;
682 | 
683 | 			// fire an event for when this.map is defined and ready.
684 | 			// (needed for components that talk to this.map directly)
685 | 			this.fire('map-ready');
686 | 
687 | 			// forward events
688 | 			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) {
689 | 				this.fire(e.type, e);
690 | 			}, this);
691 | 			// set map view after registering events so viewreset and load events can be caught
692 | 			map.setView([this.latitude, this.longitude], this.zoom);
693 | 			// update attributes
694 | 			map.on('moveend', function(e) {
695 | 				this._ignoreViewChange = true;
696 | 				this.longitude = map.getCenter().lng;
697 | 				this.latitude = map.getCenter().lat;
698 | 				this._ignoreViewChange = false;
699 | 			}, this);
700 | 			map.on('zoomend', function(e) {
701 | 				this.zoom = map.getZoom();
702 | 			}, this);
703 | 
704 | 			if (this.zoom == -1) {
705 | 				this.map.fitWorld();
706 | 			}
707 | 
708 | 			// add a default layer if there are no layers defined
709 | 			var defaultLayerRequired = true;
710 | 			for (var i = 0; i < this.children.length; i++) {
711 | 				var e = this.children[i];
712 | 				if (e.isLayer && e.isLayer()) {
713 | 					defaultLayerRequired = false;
714 | 				}
715 | 			}
716 | 			if (defaultLayerRequired) {
717 | 				L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
718 | 					attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>',
719 | 					maxZoom: 19
720 | 				}).addTo(this.map);
721 | 			}
722 | 
723 | 			this.registerMapOnChildren();
724 | 			this._mutationObserver = new MutationObserver(this.registerMapOnChildren.bind(this));
725 | 			this._mutationObserver.observe(this, {childList: true});
726 | 		},
727 | 
728 | 		detached: function() {
729 | 			this._mutationObserver.disconnect();
730 | 		},
731 | 
732 | 		_viewChanged: function(newValue, oldValue) {
733 | 			if (this.map && !this._ignoreViewChange) {
734 | 				setTimeout(function() {
735 | 					this.map.setView(L.latLng(this.latitude, this.longitude), this.zoom);
736 | 				}.bind(this), 1);
737 | 			}
738 | 		},
739 | 
740 | 		registerMapOnChildren: function() {
741 | 			for (var i = 0; i < this.children.length; i++) {
742 | 				this.children[i].container = this.map;
743 | 			}
744 | 			this._fitToMarkers();
745 | 		},
746 | 
747 | 		_fitToMarkers: function () {
748 | 			if ( this.map && this.fitToMarkers) {
749 | 				var bounds = [];
750 | 				for( var i = 0, f; f = this.children[i]; i++ ) {
751 | 					if ( f.latitude && f.longitude ) {
752 | 						bounds.push( [ f.latitude, f.longitude ] );
753 | 					}
754 | 				}
755 | 				if ( bounds.length > 0 ) {
756 | 					this.map.fitBounds( bounds );
757 | 					this.map.invalidateSize();
758 | 				}
759 | 			}
760 | 		},
761 | 
762 | 		/**
763 | 		 * Returns a GeoJSON including all the features of the map
764 | 		 *
765 | 		 * @method toGeoJSON
766 | 		 */
767 | 		toGeoJSON: function () {
768 | 			var geoJSON = {
769 | 				"type": "FeatureCollection",
770 | 				"features": []
771 | 			};
772 | 
773 | 			for( var i = 0, f; f = this.features[i]; i++ ) {
774 | 				geoJSON.features.push( f.feature.toGeoJSON() );
775 | 			}
776 | 			return geoJSON;
777 | 		}
778 | 	});
779 | </script>
780 | 


--------------------------------------------------------------------------------
/leaflet-draw.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="leaflet-core.html">
  2 | <link rel="import" href="leaflet-popup.html">
  3 | 
  4 | <!--
  5 | element which defines am abstract leaflet path (<a href="http://leafletjs.com/reference.html#path">Leaflet Reference</a>).
  6 | 
  7 | Do not use this element directly.
  8 | 
  9 | @element leaflet-path
 10 | @blurb element which defines am abstract leaflet path. Do not use directly. Most options are supported as attributes. 
 11 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 12 | @homepage https://leaflet-extras.github.io/leaflet-map/
 13 | -->
 14 | <script>
 15 | 	"use strict";
 16 | 
 17 | 	var leafletMap = leafletMap || {};
 18 | 
 19 | 	window.leafletMap.LeafletPath = {
 20 | 		/**
 21 | 		 * Fired when the user clicks (or taps) the object.
 22 | 		 * 
 23 | 		 * @event click
 24 | 		 * @type MouseEvent
 25 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 26 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 27 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 28 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 29 | 		 */
 30 | 
 31 | 		/**
 32 | 		 * Fired when the user double-clicks (or double-taps) the object.
 33 | 		 * 
 34 | 		 * @event dblclick
 35 | 		 * @type MouseEvent
 36 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 37 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 38 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 39 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 40 | 		 */
 41 | 
 42 | 		/**
 43 | 		 * Fired when the user pushes the mouse button on the object.
 44 | 		 * 
 45 | 		 * @event mousedown
 46 | 		 * @type MouseEvent
 47 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 48 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 49 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 50 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 51 | 		 */
 52 | 
 53 | 		/**
 54 | 		 * Fired when the mouse enters the object.
 55 | 		 * 
 56 | 		 * @event mouseover
 57 | 		 * @type MouseEvent
 58 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 59 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 60 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 61 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 62 | 		 */
 63 | 		
 64 | 		/**
 65 | 		 * Fired when the mouse leaves the object.
 66 | 		 * 
 67 | 		 * @event mouseout
 68 | 		 * @type MouseEvent
 69 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
 70 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
 71 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
 72 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
 73 | 		 */
 74 | 		
 75 | 		/**
 76 | 		 * Fired when the user right-clicks on the object.
 77 | 		 * 
 78 | 		 * @event contextmenu
 79 | 		 * @type MouseEvent
 80 | 		 */
 81 | 
 82 | 		/**
 83 | 		 * Fired when the object is added to the map.
 84 | 		 * 
 85 | 		 * @event add
 86 | 		 * @type 
 87 | 		 */
 88 | 
 89 | 		/**
 90 | 		 * Fired when the object is removed from the map.
 91 | 		 * 
 92 | 		 * @event remove
 93 | 		 */
 94 | 
 95 | 		/**
 96 | 		 * Fired when a popup bound to the object is open.
 97 | 		 * 
 98 | 		 * @event popupopen
 99 | 		 * @type PopupEvent
100 | 		 * @param {Popup} popup The popup that was opened or closed.
101 | 		 */
102 | 
103 | 		/**
104 | 		 * Fired when a popup bound to the object is closed.
105 | 		 * 
106 | 		 * @event popupclose
107 | 		 * @type PopupEvent
108 | 		 * @param {Popup} popup The popup that was opened or closed.
109 | 		 */
110 | 
111 | 		properties: {
112 | 			/**
113 | 			 * The attribute `stroke` sets whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.
114 | 			 *
115 | 			 * @attribute stroke
116 | 			 * @type boolean
117 | 			 */
118 | 			noStroke: {
119 | 				type: Boolean,
120 | 				value: false
121 | 			},
122 | 
123 | 			/**
124 | 			 * The attribute `color` sets the stroke color.
125 | 			 *
126 | 			 * @attribute color
127 | 			 * @type string
128 | 			 */
129 | 			color: {
130 | 				type: String,
131 | 				value: "#03f"
132 | 			},
133 | 
134 | 			/**
135 | 			 * The attribute `weight` sets the stroke width in pixels.
136 | 			 *
137 | 			 * @attribute weight
138 | 			 * @type number
139 | 			 */
140 | 			weight: {
141 | 				type: Number,
142 | 				value: 5
143 | 			},
144 | 
145 | 			/**
146 | 			 * The attribute `opacity` sets the stroke opacity.
147 | 			 *
148 | 			 * @attribute opacity
149 | 			 * @type number
150 | 			 */
151 | 			opacity: {
152 | 				type: Number,
153 | 				value: 0.5
154 | 			},
155 | 
156 | 			/**
157 | 			 * The attribute `fill` sets the whether to fill the path with color. Set it to false to disable filling on polygons or circles.
158 | 			 *
159 | 			 * @attribute fill
160 | 			 * @type boolean
161 | 			 */
162 | 			fill: {
163 | 				type: Boolean,
164 | 				value: null
165 | 			},
166 | 
167 | 			/**
168 | 			 * The attribute `fill-color` sets the fill color.
169 | 			 *
170 | 			 * @attribute fill-color
171 | 			 * @type string
172 | 			 */
173 | 			fillColor: {
174 | 				type: String,
175 | 				value: null
176 | 			},
177 | 
178 | 			/**
179 | 			 * The attribute `fill-opacity` sets the fill opacity.
180 | 			 *
181 | 			 * @attribute fill-opacity
182 | 			 * @type number
183 | 			 */
184 | 			fillOpacity: {
185 | 				type: Number,
186 | 				value: 0.2
187 | 			},
188 | 
189 | 			/**
190 | 			 * The attribute `dash-array` sets a string that defines the stroke dash pattern. Doesn't work on canvas-powered layers (e.g. Android 2).
191 | 			 *
192 | 			 * @attribute dash-array
193 | 			 * @type string
194 | 			 */
195 | 			dashArray: {
196 | 				type: String,
197 | 				value: null
198 | 			},
199 | 
200 | 			/**
201 | 			 * The attribute `line-cap` defines the shape to be used at the end of the stroke.
202 | 			 *
203 | 			 * @attribute line-cap
204 | 			 * @type string
205 | 			 */
206 | 			lineCap: {
207 | 				type: String,
208 | 				value: null
209 | 			}, 
210 | 
211 | 			/**
212 | 			 * The attribute `line-join` sets the string that defines shape to be used at the corners of the stroke.
213 | 			 *
214 | 			 * @attribute line-join
215 | 			 * @type string
216 | 			 */
217 | 			lineJoin: {
218 | 				type: String,
219 | 				value: null
220 | 			},
221 | 
222 | 			/**
223 | 			 * The attribute `clickable` sets whether the vector will emit mouse events or will act as a part of the underlying map.
224 | 			 *
225 | 			 * @attribute clickable
226 | 			 * @type boolean
227 | 			 */
228 | 			noClickable: {
229 | 				type: Boolean,
230 | 				value: false
231 | 			},
232 | 
233 | 			/**
234 | 			 * The attribute `pointer-events` sets the pointer-events attribute on the path if SVG backend is used.
235 | 			 *
236 | 			 * @attribute pointer-events
237 | 			 * @type string
238 | 			 */
239 | 			pointerEvents: {
240 | 				type: String,
241 | 				value: null
242 | 			},
243 | 
244 | 			/**
245 | 			 * The attribute `class-name` sets the custom class name set on an element.
246 | 			 *
247 | 			 * @attribute class-name
248 | 			 * @type string
249 | 			 */
250 | 			className: {
251 | 				type: String,
252 | 				value: ""
253 | 			}
254 | 		},
255 | 
256 | 		getPathOptions: function() {
257 | 			return {
258 | 				stroke: !this.noStroke,
259 | 				color: this.color,
260 | 				weight: this.weight,
261 | 				opacity: this.opacity,
262 | 				fill: this.fill,
263 | 				fillColor: this.fillColor,
264 | 				fillOpacity: this.fillOpacity,
265 | 				dashArray: this.dashArray,
266 | 				lineCap: this.lineCap,
267 | 				lineJoin: this.lineJoin,
268 | 				clickable: !this.noClickable,
269 | 				pointerEvents: this.pointerEvents,
270 | 				className: this.className,
271 | 			};
272 | 		}
273 | 	};
274 | 
275 | 	window.leafletMap.LeafletPointContent = {
276 | 		attached: function() {
277 | 			if (MutationObserver && !this.observer_) {
278 | 				this.observer_ = new MutationObserver(this.updatePointContent.bind(this));
279 | 				this.observer_.observe(this, {childList: true, characterData: true, attributes: true, subtree: true});
280 | 			}
281 | 		},
282 | 
283 | 		updatePointContent: function() {
284 | 			if (!this.feature) {
285 | 				return;
286 | 			}
287 | 			var temp = [];
288 | 			var i;
289 | 			var nodes = this.children;
290 | 			for (i = 0; i < nodes.length; i++) {
291 | 				if (nodes[i].localName == "leaflet-point") {
292 | 					temp.push(L.latLng(
293 | 						nodes[i].getAttribute('latitude'),
294 | 						nodes[i].getAttribute('longitude')
295 | 					));
296 | 				}
297 | 			}
298 | 			this.feature.setLatLngs(temp);
299 | 		},
300 | 		
301 | 		detached: function() {
302 | 			if (this.observer_) {
303 | 				this.observer_.disconnect();
304 | 			}
305 | 		}
306 | 	}
307 | </script>
308 | 
309 | 
310 | 
311 | 
312 | 
313 | <!--
314 | The `leaflet-circle` element represents a circle on the map and is used as
315 | a child element of the `leaflet-map` element.
316 | 
317 | 
318 | ##### Example: Add circles
319 |     <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
320 |         <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
321 |             Circle
322 |         </leaflet-circle>
323 |     </leaflet-map>
324 | 
325 | @element leaflet-circle
326 | @blurb Element for putting a circle on the map
327 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
328 | @homepage https://leaflet-extras.github.io/leaflet-map/
329 | -->
330 | <dom-module id="leaflet-circle">
331 | 	<style>
332 | 		:host{ display: none; }
333 | 	</style>
334 | 	<template>
335 | 	</template>
336 | </dom-module>
337 | <script>
338 | 	"use strict";
339 | 	
340 | 	Polymer({
341 | 		is: 'leaflet-circle',
342 | 
343 | 		/**
344 | 		 * A Leaflet circle object
345 | 		 *
346 | 		 * @property feature
347 | 		 * @type L.circle
348 | 		 * @default null
349 | 		 */
350 | 		feature: null,
351 | 		behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPopupContent],
352 | 
353 | 		properties: {
354 | 			/**
355 | 			 * The circle's longitude coordinate
356 | 			 *
357 | 			 * @attribute longitude
358 | 			 * @type number
359 | 			 * @default null
360 | 			 */
361 | 			longitude: {
362 | 				type: Number,
363 | 				observer: '_updatePosition'
364 | 			},
365 | 	
366 | 			/**
367 | 			 * The circle's latitude coordinate
368 | 			 *
369 | 			 * @attribute latitude
370 | 			 * @type number
371 | 			 * @default null
372 | 			 */
373 | 			latitude: {
374 | 				type: Number,
375 | 				observer: '_updatePosition'
376 | 			},
377 | 	
378 | 			/**
379 | 			 * The circle's radius is metres
380 | 			 *
381 | 			 * @attribute radius
382 | 			 * @type number
383 | 			 * @default 100
384 | 			 */
385 | 			radius: {
386 | 				type: Number,
387 | 				value: 100,
388 | 				observer: '_updateRadius'
389 | 			},
390 | 			
391 | 			container: {
392 | 				type: Object,
393 | 				observer: '_containerChanged'
394 | 			}
395 | 		},
396 | 		
397 | 		
398 | 		_containerChanged: function() {
399 | 			if (this.latitude && this.longitude && this.container) {
400 | 		    	this.feature = L.circle([this.latitude, this.longitude], this.radius, this.getPathOptions());
401 | 		    	this.feature.addTo(this.container);
402 | 		    	this.updatePopupContent();
403 | 
404 | 			    // forward events
405 | 				this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
406 | 			    	this.fire(e.type, e);
407 | 				}, this);
408 | 			}
409 | 		},
410 | 	
411 | 		_updatePosition: function () {
412 | 			if (this.feature && this.latitude != null && this.longitude != null) {
413 | 				this.feature.setLatLng(L.latLng( this.latitude, this.longitude) );
414 | 			}
415 | 		},
416 | 		
417 | 		_updateRadius: function () {
418 | 			if (this.feature && this.radius != null) {
419 | 				this.feature.setRadius(this.radius);
420 | 			}
421 | 		},
422 | 		
423 | 		detached: function() {
424 | 			if (this.container && this.feature) {
425 | 				this.container.removeLayer(this.feature);
426 | 			}
427 | 		}
428 | 	});
429 | </script>
430 | 
431 | 
432 | 
433 | 
434 | <!--
435 | The `leaflet-point` element represents one point in an polyline on the map and is used as
436 | a child element of the `leaflet-polyline` element.
437 | 
438 | ##### Example: Add polylines
439 |     <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
440 |         <leaflet-polyline>
441 |             <leaflet-point longitude="77.22" latitude="28.44"></leaflet-point>
442 |             <leaflet-point longitude="77.44" latitude="28.66"></leaflet-point>
443 |         </leaflet-polyline>
444 |     </leaflet-map>
445 | 
446 | @element leaflet-point
447 | @blurb Element for adding a point to a polyline
448 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
449 | @homepage https://leaflet-extras.github.io/leaflet-map/
450 | -->
451 | <dom-module id="leaflet-point">
452 | 	<script>
453 | 		Polymer({
454 | 			is: "leaflet-point",
455 | 			properties: {
456 | 				latitude: {
457 | 					type: Number,
458 | 					value: 0,
459 | 					reflectToAttribute:true
460 | 				},
461 | 				longitude: {
462 | 					type: Number,
463 | 					value: 0,
464 | 					reflectToAttribute:true
465 | 				}
466 | 			}
467 | 		});
468 | 	</script>
469 | </dom-module>
470 | 
471 | 
472 | 
473 | <!--
474 | The `leaflet-polyline` element represents a polyline on the map and is used as
475 | a child element of the `leaflet-map` element. To compose the line one needs to
476 | add `leaflet-point` elements inside it.
477 | 
478 | 
479 | ##### Example: Add polylines
480 |     <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
481 |         <leaflet-polyline>
482 |             <leaflet-point longitude="77.22" latitude="28.44"></leaflet-point>
483 |             <leaflet-point longitude="77.44" latitude="28.66"></leaflet-point>
484 |         </leaflet-polyline>
485 |     </leaflet-map>
486 | 
487 | @element leaflet-polyline
488 | @blurb Element for putting a polyline on the map
489 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
490 | @homepage https://leaflet-extras.github.io/leaflet-map/
491 | -->
492 | 
493 | <dom-module id="leaflet-polyline">
494 | 	<style>
495 | 		:host{ display: none; }
496 | 	</style>
497 | 	<template>
498 | 		<content id="points" select="leaflet-point"></content>
499 | 	</template>
500 | </dom-module>
501 | 
502 | <script>
503 | 	"use strict";
504 |  
505 | 	Polymer({
506 | 		is: 'leaflet-polyline',
507 | 		behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPointContent, leafletMap.LeafletPopupContent],
508 | 
509 | 		/**
510 | 		 * A Leaflet [Polyline](http://leafletjs.com/reference.html#polyline) object
511 | 		 *
512 | 		 * @property feature
513 | 		 * @type L.polyline
514 | 		 * @default null
515 | 		 */
516 | 		feature: null,
517 | 
518 | 		properties: {
519 | 			container: {
520 | 				type: Object,
521 | 				observer: '_containerChanged'
522 | 			}
523 | 		},
524 | 
525 | 		_containerChanged: function() {
526 | 			if (this.container) {
527 | 				this.feature = L.polyline([], this.getPathOptions());
528 | 				this.feature.addTo( this.container );
529 | 				this.updatePointContent();
530 | 				this.updatePopupContent();
531 | 
532 | 				// forward events
533 | 				this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
534 | 					this.fire(e.type, e);
535 | 				}, this);
536 | 			}
537 | 		},
538 | 
539 | 		detached: function() {
540 | 			if (this.container && this.feature) {
541 | 				this.container.removeLayer(this.feature);
542 | 			}
543 | 		}
544 | 	});
545 | </script>
546 | 
547 | 
548 | <!--
549 | The `leaflet-polygon` element represents a polygon on the map and is used as
550 | a child element of the `leaflet-map` element. To compose the line one needs to
551 | add `leaflet-point` elements inside it.
552 | 
553 | 
554 | ##### Example: Add polygona
555 |     <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
556 |         <leaflet-polygon>
557 |             <leaflet-point longitude="77.1000" latitude="13.3400"></leaflet-point>
558 |             <leaflet-point longitude="77.5000" latitude="13.5500"></leaflet-point>
559 |             <leaflet-point longitude="77.7200" latitude="12.7200"></leaflet-point>
560 |         </leaflet-polygon>
561 |     </leaflet-map>
562 | 
563 | @element leaflet-polygon
564 | @blurb Element for putting a polygon on the map
565 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
566 | @homepage https://leaflet-extras.github.io/leaflet-map/
567 | -->
568 | 
569 | <dom-module id="leaflet-polygon">
570 | 	<style>
571 | 		:host {display: none;}
572 | 	</style>
573 | 	<template>
574 | 		<content id="points" select="leaflet-point"></content>
575 | 	</template>
576 | </dom-module>
577 | 
578 | <script>
579 | "use strict";
580 | Polymer({
581 | 	is: 'leaflet-polygon',
582 | 	behaviors: [leafletMap.LeafletPath, leafletMap.LeafletPointContent, leafletMap.LeafletPopupContent],
583 | 
584 | 	properties: {
585 | 		container: {
586 | 			type: Object,
587 | 			observer: '_containerChanged'
588 | 		}
589 | 	},
590 | 	
591 | 	/**
592 | 	 * A Leaflet [Polygon](http://leafletjs.com/reference.html#polygon) object
593 | 	 *
594 | 	 * @property feature
595 | 	 * @type L.polygon
596 | 	 * @default null
597 | 	 */
598 | 	feature: null,
599 | 
600 | 	_containerChanged: function() {
601 | 		if (this.container) {
602 | 			var opt = this.getPathOptions();
603 | 			if (typeof opt.fill === "undefined" || opt.fill === null) {
604 | 				opt.fill = true;
605 | 			}
606 | 			this.feature = L.polygon([], opt);
607 | 			this.feature.addTo(this.container);
608 | 			this.updatePointContent();
609 | 			this.updatePopupContent();
610 | 
611 | 			// forward events
612 | 			this.feature.on('click dblclick mousedown mouseover mouseout contextmenu add remove popupopen popupclose', function(e) {
613 | 				this.fire(e.type, e);
614 | 			}, this);
615 | 		}
616 | 	},
617 | 
618 | 	detached: function() {
619 | 		if (this.container && this.feature) {
620 | 			this.container.removeLayer(this.feature);
621 | 		}
622 | 	}
623 | });
624 | </script>
625 | 


--------------------------------------------------------------------------------
/leaflet-geojson.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="leaflet-import.html">
  3 | <link rel="import" href="leaflet-layer.html">
  4 | <!--
  5 | A GeoJson layer (<a href="http://leafletjs.com/reference.html#geojson">Leaflet Reference</a>).
  6 | 
  7 | ##### Example
  8 | 
  9 |     <leaflet-map longitude="-104.99404" latitude="39.75621" zoom="12">
 10 |         <leaflet-geojson
 11 |             data="{{ {'type': 'Feature', 'properties': {'name': 'Coors Field','popupContent': 'Yo popup'},'geometry': {'type': 'Point','coordinates': [-104.99404, 39.75621]}}}}">
 12 |         </leaflet-geojson>
 13 |     </leaflet-map>
 14 | 
 15 | 
 16 | 
 17 | @element leaflet-geojson
 18 | @blurb an element which represents a geojson layer
 19 | @status beta
 20 | @homepage https://leaflet-extras.github.io/leaflet-map/
 21 | -->
 22 | 
 23 | <dom-element name="leaflet-geojson">
 24 | 	<template>
 25 | 		<style>
 26 | 			:host { display: none; }
 27 | 		</style>
 28 | 	</template>
 29 | </dom-element>
 30 | <script>
 31 | "use strict";
 32 | 
 33 | Polymer({
 34 | 	is: 'leaflet-geojson',
 35 | 	behaviors: [leafletMap.LeafletILayer],
 36 | 
 37 | 	properties: {
 38 | 		/**
 39 | 		 * data as geojson object
 40 | 		 *
 41 | 		 * @property data
 42 | 		 * @type Object
 43 | 		 */
 44 | 		data: {
 45 | 			type: Object,
 46 | 			observer: "_dataChanged"
 47 | 		},
 48 | 
 49 | 		container: {
 50 | 			type: Object,
 51 | 			observer: '_containerChanged'
 52 | 		},
 53 | 		/**
 54 | 
 55 | 			/**
 56 | 			 * The attribute `color` sets the stroke color.
 57 | 			 *
 58 | 			 * @attribute color
 59 | 			 * @type string
 60 | 			 */
 61 | 			color: {
 62 | 				type: String,
 63 | 				value: "#03f"
 64 | 			},
 65 | 
 66 | 			/**
 67 | 			 * The attribute `weight` sets the stroke width in pixels.
 68 | 			 *
 69 | 			 * @attribute weight
 70 | 			 * @type number
 71 | 			 */
 72 | 			weight: {
 73 | 				type: Number,
 74 | 				value: 5
 75 | 			},
 76 | 
 77 | 			/**
 78 | 			 * The attribute `opacity` sets the stroke opacity.
 79 | 			 *
 80 | 			 * @attribute opacity
 81 | 			 * @type number
 82 | 			 */
 83 | 			opacity: {
 84 | 				type: Number,
 85 | 				value: 0.5
 86 | 			},
 87 | 
 88 | 			/**
 89 | 			 * The attribute `fill` sets the whether to fill the path with color. Set it to false to disable filling on polygons or circles.
 90 | 			 *
 91 | 			 * @attribute fill
 92 | 			 * @type boolean
 93 | 			 */
 94 | 			fill: {
 95 | 				type: Boolean,
 96 | 				value: null
 97 | 			},
 98 | 
 99 | 			/**
100 | 			 * The attribute `fill-color` sets the fill color.
101 | 			 *
102 | 			 * @attribute fill-color
103 | 			 * @type string
104 | 			 */
105 | 			fillColor: {
106 | 				type: String,
107 | 				value: null
108 | 			},
109 | 
110 | 			/**
111 | 			 * The attribute `fill-opacity` sets the fill opacity.
112 | 			 *
113 | 			 * @attribute fill-opacity
114 | 			 * @type number
115 | 			 */
116 | 			fillOpacity: {
117 | 				type: Number,
118 | 				value: 0.2
119 | 			},
120 | 
121 | 			/**
122 | 			 * The attribute `dash-array` sets a string that defines the stroke dash pattern. Doesn't work on canvas-powered layers (e.g. Android 2).
123 | 			 *
124 | 			 * @attribute dash-array
125 | 			 * @type string
126 | 			 */
127 | 			dashArray: {
128 | 				type: String,
129 | 				value: null
130 | 			},
131 | 
132 | 			/**
133 | 			 * The attribute `line-cap` defines the shape to be used at the end of the stroke.
134 | 			 *
135 | 			 * @attribute line-cap
136 | 			 * @type string
137 | 			 */
138 | 			lineCap: {
139 | 				type: String,
140 | 				value: null
141 | 			}, 
142 | 
143 | 			/**
144 | 			 * The attribute `line-join` sets the string that defines shape to be used at the corners of the stroke.
145 | 			 *
146 | 			 * @attribute line-join
147 | 			 * @type string
148 | 			 */
149 | 			lineJoin: {
150 | 				type: String,
151 | 				value: null
152 | 			}
153 | 
154 | 	},
155 | 
156 | 	_containerChanged: function() {
157 | 		if (this.container && this.data) {
158 | 			this._dataChanged();
159 | 		}
160 | 	},
161 | 
162 | 	_dataChanged: function() {
163 | 		if (this.container && this.data) {
164 | 			if (this.feature) {
165 | 				this.container.removeLayer(this.feature);
166 | 			}
167 | 			this.feature = L.geoJson(this.data);
168 | 
169 | 			this.feature.addTo(this.container)
170 | 				.setStyle({
171 | 					color: this.color,
172 | 					weight: this.weight,
173 | 					opacity: this.opacity,
174 | 					fill: this.fill,
175 | 					fillColor: this.fillColor,
176 | 					fillOpacity: this.fillOpacity,
177 | 					dashArray: this.dashArray,
178 | 					lineCap: this.lineCap,
179 | 					lineJoin: this.lineJoin
180 | 				});
181 | 		}
182 | 	},
183 | 	
184 | 	detached: function() {
185 | 		if (this.container && this.feature) {
186 | 			this.container.removeLayer(this.feature);
187 | 		}
188 | 	}
189 | });
190 | </script>
191 | 


--------------------------------------------------------------------------------
/leaflet-geolocation.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="leaflet-core.html">
  2 | 
  3 | <!--
  4 | element which controls geo location (<a href="http://leafletjs.com/reference.html#map">Leaflet Reference</a>).
  5 | 
  6 | ##### Example
  7 | 
  8 |     <leaflet-geolocation watch enableHighAccuracy latitude="{{latitude}}" longitude="{{longitude}}"> </leaflet-geolocation>
  9 | 
 10 | @element leaflet-geolocation
 11 | @blurb element which controls geo location. 
 12 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 13 | @homepage https://leaflet-extras.github.io/leaflet-map/
 14 | -->
 15 | <dom-module id="leaflet-geolocation">
 16 | 	<style>
 17 | 		:host {display: none;}
 18 | 	</style>
 19 | 	<template>
 20 | 	</template>
 21 | </dom-module>
 22 | 
 23 | <script>
 24 | "use strict";
 25 |   
 26 | Polymer({
 27 | 	is: 'leaflet-geolocation',
 28 | 	
 29 | 	properties: {
 30 | 
 31 | 		/**
 32 | 		 * Fired when geolocation (using the locate method) went successfully.
 33 | 		 * 
 34 | 		 * @event locationfound
 35 | 		 * @type LocationEvent
 36 | 		 * @param {LatLng} latlng Detected geographical location of the user.
 37 | 		 * @param {LatLngBounds} bounds Geographical bounds of the area user is located in (with respect to the accuracy of location).
 38 | 		 * @param {Number} accuracy Accuracy of location in meters.
 39 | 		 * @param {Number} altitude Height of the position above the WGS84 ellipsoid in meters.
 40 | 		 * @param {Number} altitudeAccuracy Accuracy of altitude in meters.
 41 | 		 * @param {Number} heading The direction of travel in degrees counting clockwise from true North.
 42 | 		 * @param {Number} speed Current velocity in meters per second.
 43 | 		 * @param {Number} timestamp The time when the position was acquired.
 44 | 		 */
 45 | 
 46 | 		/**
 47 | 		 * Fired when geolocation (using the locate method) failed.
 48 | 		 * 
 49 | 		 * @event locationerror
 50 | 		 * @type ErrorEvent
 51 | 		 * @param {string} message Error message.
 52 | 		 * @param {number} code Error code (if applicable).
 53 | 		 */
 54 | 
 55 | 		/**
 56 | 		 * 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. 
 57 | 		 * 
 58 | 		 * @attribute watch
 59 | 		 * @type bool
 60 | 		 */
 61 | 		watch: {
 62 | 			type: Boolean,
 63 | 			value: false, 
 64 | 		},
 65 | 
 66 | 		/**
 67 | 		 * 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.
 68 | 		 * 
 69 | 		 * @attribute set-view
 70 | 		 * @type bool
 71 | 		 */
 72 | 		setView: {
 73 | 			type: Boolean,
 74 | 			value: false
 75 | 		}, 
 76 | 
 77 | 		/**
 78 | 		 * The `max-zoom` attribute sets the maximum zoom for automatic view setting when using `setView` option. 
 79 | 		 * 
 80 | 		 * @attribute max-zoom
 81 | 		 * @type number
 82 | 		 */
 83 | 		maxZoom: {
 84 | 			type: Number,
 85 | 			value: Infinity
 86 | 		},
 87 | 
 88 | 		/**
 89 | 		 * The `timeout` attribute sets the number of milliseconds to wait for a response from geolocation before firing a locationerror event. 
 90 | 		 * 
 91 | 		 * @attribute timeout
 92 | 		 * @type number
 93 | 		 */
 94 | 		timeout: {
 95 | 			type: Number,
 96 | 			value: 10000
 97 | 		},
 98 | 
 99 | 		/**
100 | 		 * 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. 
101 | 		 * 
102 | 		 * @attribute maximum-age
103 | 		 * @type number
104 | 		 */
105 | 		maximumAge: {
106 | 			type: Number,
107 | 			value: 0
108 | 		},
109 | 
110 | 		/**
111 | 		 * The `enable-high-accuracy` attribute sets whether high accuracy is enabled, see description in the W3C spec.
112 | 		 * 
113 | 		 * @attribute enable-high-accuracy
114 | 		 * @type bool
115 | 		 */
116 | 		enableHighAccuracy: {
117 | 			type: Boolean,
118 | 			value: false
119 | 		},
120 | 
121 | 		/**
122 | 		 * The `latitude` attribute returns the detected geographical location of the user.
123 | 		 * 
124 | 		 * @attribute latitude
125 | 		 * @type number
126 | 		 */
127 | 		latitude: {
128 | 			type: Number,
129 | 			value: null,
130 | 			notify: true
131 | 		},
132 | 
133 | 		/**
134 | 		 * The `longitude` attribute returns the detected geographical location of the user.
135 | 		 * 
136 | 		 * @attribute longitude
137 | 		 * @type number
138 | 		 */
139 | 		longitude: {
140 | 			type: Number,
141 | 			value: null,
142 | 			notify: true
143 | 		},
144 | 
145 | 		/**
146 | 		 * The `bounds` attribute returns the geographical bounds of the area user is located in (with respect to the accuracy of location).
147 | 		 * 
148 | 		 * @attribute bounds
149 | 		 * @type number
150 | 		 */
151 | 		bounds: {
152 | 			type: Number,
153 | 			value: null,
154 | 			notify: true
155 | 		},
156 | 
157 | 		/**
158 | 		 * The `accuracy` attribute returns the accuracy of location in meters.
159 | 		 * 
160 | 		 * @attribute accuracy
161 | 		 * @type number
162 | 		 */
163 | 		accuracy: {
164 | 			type: Number,
165 | 			value: null,
166 | 			notify: true
167 | 		},
168 | 
169 | 		/**
170 | 		 * The `altitude` attribute returns the height of the position above the WGS84 ellipsoid in meters.
171 | 		 * 
172 | 		 * @attribute altitude
173 | 		 * @type number
174 | 		 */
175 | 		altitude: {
176 | 			type: Number,
177 | 			value: null,
178 | 			notify: true
179 | 		},
180 | 
181 | 		/**
182 | 		 * The `altitude-accuracy` attribute returns the accuracy of altitude in meters.
183 | 		 * 
184 | 		 * @attribute altitude-accuracy
185 | 		 * @type number
186 | 		 */
187 | 		altitudeAccuracy: {
188 | 			type: Number,
189 | 			value: null,
190 | 			notify: true
191 | 		},
192 | 
193 | 		/**
194 | 		 * The `heading` attribute returns the direction of travel in degrees counting clockwise from true North.
195 | 		 * 
196 | 		 * @attribute heading
197 | 		 * @type number
198 | 		 */
199 | 		heading: {
200 | 			type: Number,
201 | 			value: null,
202 | 			notify: true
203 | 		},
204 | 
205 | 		/**
206 | 		 * The `speed` attribute returns the current velocity in meters per second.   
207 | 		 * 
208 | 		 * @attribute speed
209 | 		 * @type number
210 | 		 */
211 | 		speed: {
212 | 			type: Number,
213 | 			value: null,
214 | 			notify: true
215 | 		},
216 | 
217 | 		/**
218 | 		 * The `timestamp` attribute returns the time when the position was acquired.
219 | 		 * 
220 | 		 * @attribute timestamp
221 | 		 * @type number
222 | 		 */
223 | 		timestamp: {
224 | 			type: Number,
225 | 			value: null,
226 | 			notify: true
227 | 		},
228 | 		
229 | 		container: {
230 | 			type: Object,
231 | 			observer: '_containerChanged'
232 | 		}
233 | 	},
234 | 
235 | 	_containerChanged: function() {
236 | 		if (this.container) {
237 | 			this.container.on('locationfound locationerror', function(e) {
238 | 				this.fire(e.type, e);
239 | 			}, this);
240 | 
241 | 			this.container.on('locationfound', function(e) {				
242 | 				this.latitude = e.latlng.lat;
243 | 				this.longitude = e.latlng.lng;
244 | 				this.bounds = e.bounds;
245 | 				this.accuracy = e.accuracy;
246 | 				this.altitude = e.altitude;
247 | 				this.altitudeAccuracy = e.altitudeAccuracy;
248 | 				this.heading = e.heading;
249 | 				this.speed = e.speed;
250 | 				this.timestamp = e.timestamp;
251 | 			}, this);
252 | 
253 | 			this.container.locate({
254 | 				watch: this.watch, 
255 | 				setView: this.setView, 
256 | 				maxZoom: this.maxZoom,
257 | 				timeout: this.timeout,
258 | 				maximumAge:	this.maximumAge,
259 | 				enableHighAccuracy: this.enableHighAccuracy,
260 | 			});
261 | 		}
262 | 	}
263 | });
264 | </script>
265 | 
266 | 


--------------------------------------------------------------------------------
/leaflet-import.html:
--------------------------------------------------------------------------------
1 | <script type="text/javascript" src="../leaflet/dist/leaflet.js"></script>
2 | 


--------------------------------------------------------------------------------
/leaflet-layer-group.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="leaflet-core.html">
 2 | 
 3 | <!--
 4 | A Layer group (<a href="http://leafletjs.com/reference.html#layergroup">Leaflet Reference</a>).
 5 | 
 6 | ##### Example
 7 | 
 8 |     <leaflet-layer-group>
 9 |         <leaflet-marker latitude="51.505" longitude="-0.09"> </leaflet-marker>
10 |     </leaflet-layer-group>
11 | 
12 | 
13 | @element leaflet-layer-group
14 | @blurb an element which represents a layer group 
15 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
16 | @homepage https://leaflet-extras.github.io/leaflet-map/
17 | -->
18 | 
19 | <dom-module id="leaflet-layer-group">
20 | 	<template>
21 | 	</template>
22 | </dom-module>
23 | 
24 | <script>
25 | 	"use strict";
26 | 
27 | 	Polymer({
28 | 		is: 'leaflet-layer-group',
29 | 
30 | 		properties: {
31 | 			container: {
32 | 				type: Object,
33 | 				observer: '_containerChanged'
34 | 			}	
35 | 		},
36 | 
37 | 		ready: function() {
38 | 			this._mutationObserver = new MutationObserver(this.registerContainerOnChildren.bind(this));
39 | 			this._mutationObserver.observe(this, {childList: true});
40 | 		},
41 | 	
42 | 		_containerChanged: function() {
43 | 			if (this.container) {
44 | 				var feature = L.layerGroup()
45 | 				this.feature = feature;
46 | 				this.feature.addTo(this.container);
47 | 				this.registerContainerOnChildren();
48 | 			}
49 | 		},
50 | 
51 | 		registerContainerOnChildren: function() {
52 | 			for (var i = 0; i < this.children.length; i++) {
53 | 				this.children[i].container = this.feature;
54 | 			}
55 | 		},
56 | 		
57 | 		detached: function() {
58 | 			if (this.container && this.feature) {
59 | 				this.container.removeLayer(this.feature);
60 | 			}
61 | 			this._mutationObserver.disconnect();
62 | 		}
63 | 	});
64 | </script>
65 | 


--------------------------------------------------------------------------------
/leaflet-layer.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="leaflet-core.html">
  2 | 
  3 | <!--
  4 | Abstract element representing ILayer (<a href="http://leafletjs.com/reference.html#ilayer">Leaflet Reference</a>).
  5 | -->
  6 | 
  7 | <script>
  8 | "use strict";
  9 | 
 10 | var leafletMap = leafletMap || {};
 11 | window.leafletMap.LeafletILayer = {
 12 | 
 13 | 	/**
 14 | 	 * returns true.
 15 | 	 *
 16 | 	 * @method isLayer
 17 | 	 */
 18 | 	isLayer: function() {
 19 | 		return true;
 20 | 	}
 21 | };
 22 | 
 23 | window.leafletMap.LeafletTileLayer = {
 24 | 	/**
 25 | 	 * Fired when the tile layer starts loading tiles.
 26 | 	 * 
 27 | 	 * @event loading
 28 | 	 */
 29 | 
 30 | 	/**
 31 | 	 * Fired when the tile layer loaded all visible tiles.
 32 | 	 * 
 33 | 	 * @event load
 34 | 	 */
 35 | 
 36 | 	/**
 37 | 	 * Fired when a tile is requested and starts loading.
 38 | 	 * 
 39 | 	 * @event tileloadstart
 40 | 	 * @type TileEvent
 41 | 	 * @param {HTMLElement} tile The tile element (image).
 42 | 	 * @param {string} url The source URL of the tile.
 43 | 	 */
 44 | 
 45 | 	/**
 46 | 	 * Fired when a tile loads.
 47 | 	 * 
 48 | 	 * @event tileload
 49 | 	 * @type TileEvent
 50 | 	 * @param {HTMLElement} tile The tile element (image).
 51 | 	 * @param {string} url The source URL of the tile.
 52 | 	 */
 53 | 
 54 | 	/**
 55 | 	 * Fired when a tile is removed (e.g. when you have unloadInvisibleTiles on).
 56 | 	 * 
 57 | 	 * @event tileunload
 58 | 	 * @type TileEvent
 59 | 	 * @param {HTMLElement} tile The tile element (image).
 60 | 	 * @param {string} url The source URL of the tile.
 61 | 	 */
 62 | 
 63 | 	/**
 64 | 	 * The `url` attribute sets the address template for tilesets.
 65 | 	 *
 66 | 	 *	 'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'
 67 | 	 *
 68 | 	 * {s} means one of the available subdomains (used sequentially to help with 
 69 | 	 * browser parallel requests per domain limitation; subdomain values are specified
 70 | 	 * in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y}
 71 | 	 * — tile coordinates. 
 72 | 	 * 
 73 | 	 * @attribute url
 74 | 	 * @type string
 75 | 	 */
 76 | 	properties: {
 77 | 
 78 | 		/**
 79 | 		 * The `min-zoom` attribute sets the minimum zoom number.
 80 | 		 * 
 81 | 		 * @attribute min-zoom
 82 | 		 * @type number
 83 | 		 */
 84 | 		minZoom: {
 85 | 			type: Number,
 86 | 			value: 0,
 87 | 		},
 88 | 
 89 | 		/**
 90 | 		 * The `max-zoom` attribute sets the maximum zoom number.
 91 | 		 * 
 92 | 		 * @attribute max-zoom
 93 | 		 * @type number
 94 | 		 */
 95 | 		maxZoom: {
 96 | 			type: Number,
 97 | 			value: 18
 98 | 		},
 99 | 
100 | 		/**
101 | 		 * 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. 
102 | 		 * 
103 | 		 * @attribute maxnativezoom
104 | 		 * @type number
105 | 		 */
106 | 		maxNativeZoom: {
107 | 			type: Number,
108 | 			value: null
109 | 		},
110 | 
111 | 		/**
112 | 		 * The `tile-size` attribute sets the tile size (width and height in pixels, assuming tiles are square).
113 | 		 * 
114 | 		 * @attribute tile-size
115 | 		 * @type number
116 | 		 */
117 | 		tileSize: {
118 | 			type: Number,
119 | 			value: 256
120 | 		},
121 | 
122 | 		/**
123 | 		 * 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.
124 | 		 * 
125 | 		 * @attribute subdomains
126 | 		 * @type string or string[]
127 | 		 */
128 | 		subdomains: {
129 | 			type: String,
130 | 			value: "abc"
131 | 		},
132 | 
133 | 		/**
134 | 		 * The `error-tile-url` attribute sets the URL to the tile image to show in place of the tile that failed to load.
135 | 		 * 
136 | 		 * @attribute error-tile-url
137 | 		 * @type string
138 | 		 */
139 | 		errorTileUrl: {
140 | 			type: String,
141 | 			value: ""
142 | 		},
143 | 
144 | 		/**
145 | 		 * The `attribution` attribute sets the attribute. As html code needs to be escaped here, it is preferable to define it as child element.
146 | 		 * 
147 | 		 * @attribute attribution
148 | 		 * @type 
149 | 		 */
150 | 		attribution: {
151 | 			type: String,
152 | 			value: ""
153 | 		},
154 | 
155 | 		/**
156 | 		 * The `tms` attribute sets wether inverses Y axis numbering for tiles should be used (turn this on for TMS services).
157 | 		 * 
158 | 		 * @attribute tms
159 | 		 * @type bool
160 | 		 */
161 | 		tms: {
162 | 			type: Number,
163 | 			value: false
164 | 		},
165 | 
166 | 		/**
167 | 		 * 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).
168 | 		 * 
169 | 		 * @attribute continuous-world
170 | 		 * @type bool
171 | 		 */
172 | 		continuousWorld: {
173 | 			type: Boolean,
174 | 			value: false
175 | 		},
176 | 
177 | 		/**
178 | 		 * The `nowrap` attribute sets wether the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.
179 | 		 * 
180 | 		 * @attribute nowrap
181 | 		 * @type bool
182 | 		 */
183 | 		noWrap: {
184 | 			type: Boolean,
185 | 			value: false
186 | 		},
187 | 
188 | 		/**
189 | 		 * The `zoom-offset` attribute sets the zoom number used in tile URLs will be offset with this value.
190 | 		 * 
191 | 		 * @attribute zoom-offset
192 | 		 * @type number
193 | 		 */
194 | 		zoomOffset: {
195 | 			type: Number,
196 | 			value: 0
197 | 		},
198 | 
199 | 		/**
200 | 		 * The `zoom-reverse` attribute sets whether the zoom number used in tile URLs will be reversed (maxZoom - zoom instead of zoom)
201 | 		 * 
202 | 		 * @attribute zoom-reverse
203 | 		 * @type bool
204 | 		 */
205 | 		zoomReverse: {
206 | 			type: Boolean,
207 | 			value: false
208 | 		},
209 | 
210 | 		/**
211 | 		 * The `opacity` attribute sets the opacity of the tile layer.
212 | 		 * 
213 | 		 * @attribute opacity
214 | 		 * @type number
215 | 		 */
216 | 		opacity: {
217 | 			type: Number,
218 | 			value: 1.0,
219 | 			observer: '_opacityChanged'
220 | 		},
221 | 
222 | 		/**
223 | 		 * The `z-index` attribute sets the explicit zIndex of the tile layer. Not set by default.
224 | 		 * 
225 | 		 * @attribute z-index
226 | 		 * @type number
227 | 		 */
228 | 		zIndex: {
229 | 			type: Number,
230 | 			value: null,
231 | 			observer: '_zIndexChanged'
232 | 		},
233 | 
234 | 		/**
235 | 		 * 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. 
236 | 		 * 
237 | 		 * @attribute detect-retina
238 | 		 * @type bool
239 | 		 */
240 | 		detectRetina: {
241 | 			type: Boolean,
242 | 			value: false
243 | 		},
244 | 
245 | 		/**
246 | 		 * 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. 
247 | 		 * 
248 | 		 * @attribute reuse-tiles
249 | 		 * @type bool
250 | 		 */
251 | 		reuseTiles: {
252 | 			type: Boolean,
253 | 			value: false
254 | 		}
255 | 
256 | 	},
257 | 	// unloadInvisibleTiles updateWhenIdle bounds
258 | 	
259 | 
260 | 
261 | 	_opacityChanged: function() {
262 | 		if (this.layer) {
263 | 			this.layer.setOpacity(this.opacity);
264 | 		}
265 | 	},
266 | 
267 | 	_zIndexChanged: function() {
268 | 		if (this.layer) {
269 | 			this.layer.setZIndex(this.zIndex);
270 | 		}
271 | 	},
272 | 
273 | 
274 | 	detached: function() {
275 | 		if (this.container && this.layer) {
276 | 			this.container.removeLayer(this.layer);
277 | 		}
278 | 	}
279 | };
280 | </script>
281 | 
282 | 
283 | 
284 | <!--
285 | element which defines a tile layer (<a href="http://leafletjs.com/reference.html#tilelayer">Leaflet Reference</a>).
286 | 
287 | ##### Example
288 | 
289 |     <leaflet-tilelayer 
290 |         url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
291 |         minzoom="2" maxzoom="6" nowrap>
292 | 
293 |             Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>
294 | 
295 |     </leaflet-tilelayer>
296 | 
297 | @element leaflet-tilelayer
298 | @blurb element which defines a tile layer. The content of the leaflet-tilelayer is used as attribution. 
299 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
300 | @homepage https://leaflet-extras.github.io/leaflet-map/
301 | -->
302 | 
303 | <dom-module id="leaflet-tilelayer">
304 | 	<style>
305 | 		:host {display: none;}
306 | 	</style>
307 | 	<template>
308 | 	</template>
309 | </dom-module>
310 | 
311 | <script>
312 | "use strict";
313 | 
314 | Polymer({
315 | 	is: 'leaflet-tilelayer',
316 | 	behaviors: [leafletMap.LeafletILayer, leafletMap.LeafletTileLayer],
317 | 	properties: {
318 | 		url: {
319 | 			type: String,
320 | 			value: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
321 | 			observer: '_urlChanged'
322 | 		},
323 | 		
324 | 		container: {
325 | 			type: Object,
326 | 			observer: '_containerChanged'
327 | 		}
328 | 	},
329 | 	
330 | 	_containerChanged: function() {
331 | 		if (this.container) {
332 | 			var cleanedUrl = this.url.replace(new RegExp("%7B([sxyz])%7D", "g"), '{$1}');
333 | 			var layer = L.tileLayer(cleanedUrl, {
334 | 				attribution: Polymer.dom(this).innerHTML + this.attribution,
335 | 				minZoom: this.minZoom,
336 | 				maxZoom: this.maxZoom,
337 | 				maxNativeZoom: this.maxNativeZoom,
338 | 				tileSize: this.tileSize,
339 | 				subdomains: this.subdomains,
340 | 				errorTileUrl: this.errorTileUrl,
341 | 				tms: this.tms,
342 | 				continuousWorld: this.continuousWorld,
343 | 				noWrap: this.noWrap,
344 | 				zoomOffset: this.zoomOffset,
345 | 				zoomReverse: this.zoomReverse,
346 | 				opacity: this.opacity,
347 | 				zIndex: this.zIndex,
348 | 				detectRetina: this.detectRetina,
349 | 				reuseTiles: this.reuseTiles,
350 | 			});
351 | 			this.layer = layer
352 | 
353 | 			// forward events
354 | 			layer.on('loading load tileloadstart tileload tileunload', function(e) {
355 | 				this.fire(e.type, e);
356 | 			}, this);
357 | 			this.layer.addTo(this.container);
358 | 		}
359 | 	},
360 | 	
361 | 	_urlChanged: function() {
362 | 		if (this.layer) {
363 | 			var cleanedUrl = this.url.replace(new RegExp("%7B([sxyz])%7D", "g"), '{$1}');
364 | 			this.layer.setUrl(cleanedUrl);
365 | 		}
366 | 	}
367 | });
368 | </script>
369 | 
370 | 
371 | 
372 | 
373 | <!--
374 | element which defines a tile layer for wms (<a href="http://leafletjs.com/reference.html#tilelayer-wms">Leaflet Reference</a>).
375 | 
376 | ##### Example
377 | 
378 |     <leaflet-tilelayer-wms
379 |         url="https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi"
380 |         layers="nexrad-n0r-900913" format="image/png" transparent>
381 | 
382 |             Weather data &copy; 2012 IEM Nexrad
383 | 
384 |     </leaflet-tilelayer-wms>
385 | 
386 | @element leaflet-tilelayer-wms
387 | @blurb Element which defines a tile layer for wms. The content of the leaflet-tilelayer-wms is used as attribution. It inherits attributes and events from &lt;leaflet-tilelayer&gt; 
388 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
389 | @homepage https://leaflet-extras.github.io/leaflet-map/
390 | @since 0.0.2
391 | -->
392 | <dom-module id="leaflet-tilelayer-wms">
393 | 	<style>
394 | 		:host {display: none;}
395 | 	</style>
396 | 	<template>
397 | 	</template>
398 | </dom-module>
399 | <script>
400 | 	"use strict";
401 | 
402 | 	Polymer({
403 | 		is: 'leaflet-tilelayer-wms',
404 | 		behaviors: [leafletMap.LeafletILayer, leafletMap.LeafletTileLayer],
405 | 
406 | 		properties: {
407 | 
408 | 			url: {
409 | 				type: String,
410 | 				observer: '_urlChanged'
411 | 			},
412 | 
413 | 			/**
414 | 			 * The `layers` attribute sets the comma-separated list of WMS layers to show (required).
415 | 			 * 
416 | 			 * @attribute layers
417 | 			 * @type string
418 | 			 */
419 | 			layers: {
420 | 				type: String,
421 | 				value: "" 
422 | 			},
423 | 	
424 | 			/**
425 | 			 * The `styles` attribute sets the comma-separated list of WMS styles.
426 | 			 * 
427 | 			 * @attribute styles
428 | 			 * @type string
429 | 			 */
430 | 			styles: {
431 | 				type: String,
432 | 				value: ""
433 | 			},
434 | 	
435 | 			/**
436 | 			 * The `format` attribute sets the WMS image format (use 'image/png' for layers with transparency).
437 | 			 * 
438 | 			 * @attribute format
439 | 			 * @type string
440 | 			 */
441 | 			format: {
442 | 				type: String,
443 | 				value: "image/jpeg"
444 | 			},
445 | 	
446 | 			/**
447 | 			 * The `transparent` attribute whether the WMS service will return images with transparency.
448 | 			 * 
449 | 			 * @attribute transparent
450 | 			 * @type string
451 | 			 */
452 | 			transparent: {
453 | 				type: Boolean,
454 | 				value: false
455 | 			},
456 | 	
457 | 			/**
458 | 			 * The `version` attribute sets the version of the WMS service to use.
459 | 			 * 
460 | 			 * @attribute version
461 | 			 * @type string
462 | 			 */
463 | 			version: {
464 | 				type: String,
465 | 				value: "1.1.1"
466 | 			},
467 | 	
468 | 			/**
469 | 			 * 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.
470 | 			 * 
471 | 			 * @attribute crs
472 | 			 * @type string
473 | 			 */
474 | 			crs: Object,
475 | 			
476 | 			container: {
477 | 				type: Object,
478 | 				observer: '_containerChanged'
479 | 			}
480 | 	
481 | 		},		
482 | 		_containerChanged: function() {
483 | 			if (this.container) {
484 | 				var layer = L.tileLayer.wms(this.url, {
485 | 					attribution: Polymer.dom(this).innerHTML + this.attribution,
486 | 					minZoom: this.minZoom,
487 | 					maxZoom: this.maxZoom,
488 | 					maxNativeZoom: this.maxNativeZoom,
489 | 					tileSize: this.tileSize,
490 | 					subdomains: this.subdomains,
491 | 					errorTileUrl: this.errorTileUrl,
492 | 					tms: this.tms,
493 | 					continuousWorld: this.continuousWorld,
494 | 					noWrap: this.noWrap,
495 | 					zoomOffset: this.zoomOffset,
496 | 					zoomReverse: this.zoomReverse,
497 | 					opacity: this.opacity,
498 | 					zIndex: this.zIndex,
499 | 					detectRetina: this.detectRetina,
500 | 					reuseTiles: this.reuseTiles,
501 | 					
502 | 					layers: this.layers,
503 | 					styles: this.styles,
504 | 					format: this.format,
505 | 					transparent: this.transparent,
506 | 					version: this.version,
507 | 					crs: this.crs,
508 | 				});
509 | 				this.layer = layer
510 | 
511 | 				// forward events
512 | 				layer.on('loading load tileloadstart tileload tileunload', function(e) {
513 | 					this.fire(e.type, e);
514 | 				}, this);
515 | 				this.layer.addTo(this.container);
516 | 			}
517 | 		},
518 | 
519 | 		_urlChanged: function() {
520 | 			if (this.layer) {
521 | 				this.layer.setUrl(this.url);
522 | 			}
523 | 		},
524 | 
525 | 	});
526 | </script>
527 | 


--------------------------------------------------------------------------------
/leaflet-map.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | element which defines a Leaflet map (<a href="http://leafletjs.com/reference.html#map">Leaflet Reference</a>).
 3 | 
 4 | ##### Example
 5 | 
 6 |     <leaflet-map> </leaflet-map>
 7 | 
 8 | This simple example will show a map of the world. It is pan and zoomable.
 9 | 	
10 | ##### Example
11 | 	
12 |     <leaflet-map latitude="78.8" longitude="-96" zoom="5">
13 | 
14 |         <leaflet-marker latitude="51.5" longitude="-0.10" title="Some title">
15 |             <b>Popup text</b>
16 |         </leaflet-marker>
17 | 	
18 |     </leaflet-map>
19 | 	
20 | This code will zoom in on the specified latitude and longitude coordinates. Further, it will
21 | add a marker with a popup text.
22 | 
23 | ##### Example: Add markers & circles
24 |     <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
25 |         <leaflet-marker longitude="77.2" latitude="28.4">
26 |             Marker
27 |         </leaflet-marker>
28 |         <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
29 |             Circle
30 |         </leaflet-circle>
31 |     </leaflet-map>
32 |  
33 | 
34 | 
35 | @element leaflet-map
36 | @blurb element which defines a leaflet map. Most options are supported as attributes. 
37 | @homepage https://leaflet-extras.github.io/leaflet-map/
38 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
39 | -->
40 | <link rel="import" href="leaflet-core.html">
41 | <link rel="import" href="leaflet-draw.html">
42 | <link rel="import" href="leaflet-control.html">
43 | <link rel="import" href="leaflet-layer.html">
44 | <link rel="import" href="leaflet-layer-group.html">
45 | <link rel="import" href="leaflet-geojson.html">
46 | <link rel="import" href="leaflet-marker.html">
47 | <link rel="import" href="leaflet-geolocation.html">
48 | 


--------------------------------------------------------------------------------
/leaflet-marker.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="leaflet-core.html">
  2 | <link rel="import" href="leaflet-popup.html">
  3 | 
  4 | <!--
  5 | Element which defines an icon template for markers (<a href="http://leafletjs.com/reference.html#icon">Leaflet Reference</a>).
  6 | 
  7 | ##### Example
  8 | 
  9 |     <leaflet-icon id="myicon"
 10 |         icon-url="https://stendhalgame.org/images/mapmarker/me.png">
 11 |     </leaflet-icon>
 12 | 
 13 | @element leaflet-icon
 14 | @blurb element which defines an icon template for markers.
 15 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
 16 | @homepage https://leaflet-extras.github.io/leaflet-map/
 17 | -->
 18 | <dom-module id="leaflet-icon">
 19 | 	<style>
 20 | 		:host {display: none;}
 21 | 	</style>
 22 | 	<template>
 23 | 	</template>
 24 | 	<script>
 25 | 	"use strict";
 26 | 
 27 | 	Polymer({
 28 | 		is: 'leaflet-icon',
 29 | 
 30 | 		properties: {
 31 | 
 32 | 			/**
 33 | 			 * The `icon-url` attribute sets the URL to the icon image (absolute or relative to your script path).
 34 | 			 * 
 35 | 			 * @attribute icon-url
 36 | 			 * @type string 
 37 | 			 */
 38 | 			iconUrl: {
 39 | 				type: String,
 40 | 				observer: '_attributeChanged'
 41 | 			},
 42 | 	
 43 | 			/**
 44 | 			 * 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.
 45 | 			 * 
 46 | 			 * @attribute icon-retina-url
 47 | 			 * @type string
 48 | 			 */
 49 | 			iconRetinaUrl: {
 50 | 				type: String,
 51 | 				observer: '_attributeChanged'
 52 | 			},
 53 | 
 54 | 			/**
 55 | 			 * The `icon-width` attribute sets the size of the icon image in pixels. 
 56 | 			 * 
 57 | 			 * @attribute icon-width
 58 | 			 * @type number
 59 | 			 */
 60 | 			iconWidth: {
 61 | 				type: Number,
 62 | 				observer: '_attributeChanged'
 63 | 			},
 64 | 
 65 | 			/**
 66 | 			 * The `icon-height` attribute sets the size of the icon image in pixels.
 67 | 			 * 
 68 | 			 * @attribute icon-height
 69 | 			 * @type number
 70 | 			 */
 71 | 			iconHeight: {
 72 | 				type: Number,
 73 | 				observer: '_attributeChanged'
 74 | 			},
 75 | 
 76 | 			/**
 77 | 			 * 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.
 78 | 			 * 
 79 | 			 * @attribute icon-anchor-x
 80 | 			 * @type number
 81 | 			 */
 82 | 			iconAnchorX: {
 83 | 				type: Number,
 84 | 				observer: '_attributeChanged'
 85 | 			},
 86 | 
 87 | 			/**
 88 | 			 * 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.
 89 | 			 * 
 90 | 			 * @attribute icon-anchor-y
 91 | 			 * @type number
 92 | 			 */
 93 | 			iconAnchorY: {
 94 | 				type: Number,
 95 | 				observer: '_attributeChanged'
 96 | 			},
 97 | 
 98 | 			/**
 99 | 			 * The `shadow-url` attribute sets the URL to the icon shadow image. If not specified, no shadow image will be created.
100 | 			 * 
101 | 			 * @attribute shadow-url
102 | 			 * @type string
103 | 			 */
104 | 			shadowUrl: {
105 | 				type: String,
106 | 				observer: '_attributeChanged'
107 | 			},
108 | 
109 | 			/**
110 | 			 * 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.
111 | 			 * 
112 | 			 * @attribute shadow-retina-url
113 | 			 * @type string
114 | 			 */
115 | 			shadowRetinaUrl: {
116 | 				type: String,
117 | 				observer: '_attributeChanged'
118 | 			},
119 | 
120 | 			/**
121 | 			 * The `shadow-width` attribute sets the size of the shadow image in pixels.
122 | 			 * 
123 | 			 * @attribute shadow-width
124 | 			 * @type number
125 | 			 */
126 | 			shadowWidth: {
127 | 				type: Number,
128 | 				observer: '_attributeChanged'
129 | 			},
130 | 
131 | 			/**
132 | 			 * The `shadow-height` attribute sets the size of the shadow image in pixels.
133 | 			 * 
134 | 			 * @attribute shadow-height
135 | 			 * @type number
136 | 			 */
137 | 			shadowHeight: {
138 | 				type: Number,
139 | 				observer: '_attributeChanged'
140 | 			},
141 | 
142 | 			/**
143 | 			 * 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).
144 | 			 * 
145 | 			 * @attribute shadow-anchor-x
146 | 			 * @type number
147 | 			 */
148 | 			shadowAnchorX: {
149 | 				type: Number,
150 | 				observer: '_attributeChanged'
151 | 			},
152 | 
153 | 			/**
154 | 			 * 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).
155 | 			 * 
156 | 			 * @attribute shadow-anchor-y
157 | 			 * @type number
158 | 			 */
159 | 			shadowAnchorY: {
160 | 				type: Number,
161 | 				observer: '_attributeChanged'
162 | 			},
163 | 
164 | 			/**
165 | 			 * The `popup-anchor-x` attribute sets the coordinates of the point from which popups will "open", relative to the icon anchor.
166 | 			 * 
167 | 			 * @attribute popup-anchor-x
168 | 			 * @type number
169 | 			 */
170 | 			popupAnchorX: {
171 | 				type: Number,
172 | 				observer: '_attributeChanged'
173 | 			},
174 | 
175 | 			/**
176 | 			 * The `popupanchory` attribute sets the coordinates of the point from which popups will "open", relative to the icon anchor.
177 | 			 * 
178 | 			 * @attribute popup-anchor-y
179 | 			 * @type number
180 | 			 */
181 | 			popupAnchorY: {
182 | 				type: Number,
183 | 				observer: '_attributeChanged'
184 | 			},
185 | 
186 | 
187 | 			/**
188 | 			 * The `class-name` attribute sets a custom class name to assign to both icon and shadow images. Empty by default.
189 | 			 * 
190 | 			 * @attribute class-name
191 | 			 * @type string
192 | 			 */
193 | 			className: {
194 | 				type: String,
195 | 				value: '',
196 | 				observer: '_attributeChanged'
197 | 			},
198 | 		},
199 | 
200 | 		icon_: null,
201 | 
202 | 		getIcon: function() {
203 | 			if (this.icon_) {
204 | 				return this.icon_;
205 | 			}
206 | 			var icon = {
207 | 				iconUrl: this.iconUrl,
208 | 				iconRetinaUrl: this.iconRetinaUrl,
209 | 				shadowUrl: this.shadowUrl,
210 | 				shadowRetinaUrl: this.shadowRetinaUrl,
211 | 				className: this.className
212 | 			};
213 | 			if (this.iconWidth && this.iconHeight) {
214 | 				icon.iconSize = L.point(this.iconWidth, this.iconHeight);
215 | 			}
216 | 			if (this.iconAnchorX && this.iconAnchorY) {
217 | 				icon.iconAnchor = L.point(this.iconAnchorX, this.iconAnchorY);
218 | 			}
219 | 			if (this.shadowWidth && this.shadowHeight) {
220 | 				icon.shadowSize = L.point(this.shadowWidth, this.shadowHeight);
221 | 			}
222 | 			if (this.shadowAnchorX && this.shadowAnchorY) {
223 | 				icon.shadowAnchor = L.point(this.shadowAnchorX, this.shadowAnchorY);
224 | 			}
225 | 			if (this.popupAnchorX && this.popupAnchorY) {
226 | 				icon.popupAnchor = L.point(this.popupAnchorX, this.popupAnchorY);
227 | 			}
228 | 			
229 | 			this.icon_ = L.icon(icon);
230 | 			return this.icon_;
231 | 		},
232 | 		
233 | 		_attributeChanged: function() {
234 | 			this.icon_ = null;
235 | 		}
236 | 	});
237 | 	</script>
238 | </dom-module>
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | <!--
246 | Element which defines an divicon template for markers (<a href="http://leafletjs.com/reference.html#divicon">Leaflet Reference</a>).
247 | 
248 | ##### Example
249 | 
250 |     <leaflet-divicon id="myicon" class-name="name">
251 |         <a href="https://leaflet-extras.github.io/leaflet-map/demo.html">Demo</a>
252 |     </leaflet-divicon>
253 | 
254 | @element leaflet-divicon
255 | @blurb element which defines an divicon template for markers.
256 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
257 | @homepage https://leaflet-extras.github.io/leaflet-map/
258 | -->
259 | <dom-module id="leaflet-divicon">
260 | 	<style>
261 | 		:host {display: none;}
262 | 	</style>
263 | 	<template>
264 | 	</template>
265 | 	<script>
266 | 	"use strict";
267 | 
268 | 	Polymer({
269 | 		is: 'leaflet-divicon',
270 | 		properties: {
271 | 
272 | 			/**
273 | 			 * The `icon-width` attribute sets the size of the icon image in pixels. 
274 | 			 * 
275 | 			 * @attribute icon-width
276 | 			 * @type number
277 | 			 */
278 | 			iconWidth: {
279 | 				type: Number,
280 | 				observer: '_attributeChanged'
281 | 			},
282 | 	
283 | 			/**
284 | 			 * The `icon-height` attribute sets the size of the icon image in pixels.
285 | 			 * 
286 | 			 * @attribute icon-height
287 | 			 * @type number
288 | 			 */
289 | 			iconHeight: {
290 | 				type: Number,
291 | 				observer: '_attributeChanged'
292 | 			},
293 | 	
294 | 			/**
295 | 			 * 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.
296 | 			 * 
297 | 			 * @attribute icon-anchor-x
298 | 			 * @type number
299 | 			 */
300 | 			iconAnchorX: {
301 | 				type: Number,
302 | 				observer: '_attributeChanged'
303 | 			},
304 | 	
305 | 			/**
306 | 			 * 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.
307 | 			 * 
308 | 			 * @attribute icon-anchor-y
309 | 			 * @type number
310 | 			 */
311 | 			iconAnchorY: {
312 | 				type: Number,
313 | 				observer: '_attributeChanged'
314 | 			},
315 | 	
316 | 			/**
317 | 			 * The `class-name` attribute sets a custom class name to assign to both icon and shadow images. Empty by default.
318 | 			 * 
319 | 			 * @attribute class-name
320 | 			 * @type string
321 | 			 */
322 | 			className: {
323 | 				type: String,
324 | 				value: '',
325 | 				observer: '_attributeChanged'
326 | 			},
327 | 		},
328 | 
329 | 		icon_: null,
330 | 
331 | 		getIcon: function() {
332 | 			if (this.icon_) {
333 | 				return this.icon_;
334 | 			}
335 | 			var icon = {
336 | 				className: this.className,
337 | 				html: Polymer.dom(this).innerHTML
338 | 			};
339 | 			if (this.iconWidth && this.iconHeight) {
340 | 				icon.iconSize = L.point(this.iconWidth, this.iconHeight);
341 | 			}
342 | 			if (this.iconAnchorX && this.iconAnchorY) {
343 | 				icon.iconAnchor = L.point(this.iconAnchorX, this.iconAnchorY);
344 | 			}
345 | 			this.icon_ = L.divIcon(icon);
346 | 			return this.icon_;
347 | 		},
348 | 
349 | 		_attributeChanged: function() {
350 | 			this.icon_ = null;
351 | 		}
352 | 	});
353 | 	</script>
354 | </dom-module>
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | <!--
365 | Element which defines a maker  (<a href="http://leafletjs.com/reference.html#marker">Leaflet Reference</a>).
366 | 
367 | ##### Example
368 | 
369 |     <leaflet-marker latitude="51.5" longitude="-0.10" title="Some title">
370 |         <b>Popup text</b>
371 |     </leaflet-marker>
372 | 
373 | ##### Example
374 | 
375 |     <leaflet-icon id="myicon" icon-url="https://stendhalgame.org/images/mapmarker/me.png"></leaflet-icon>
376 | 
377 |     <leaflet-marker latitude="51.5" longitude="-0.10" title="Some title" icon="myicon">
378 |     </leaflet-marker>
379 | 
380 | @element leaflet-marker
381 | @blurb element which defines a marker. The content is used as popup window, unless it is empty.
382 | @demo https://leaflet-extras.github.io/leaflet-map/demo.html
383 | @homepage https://leaflet-extras.github.io/leaflet-map/
384 | -->
385 | <dom-module id="leaflet-marker">
386 | 	<style>
387 | 		:host {display: none;}
388 | 	</style>
389 | 	<template>
390 | 	</template>
391 | 	<script>
392 | 	"use strict";
393 | 
394 | 	Polymer({
395 | 		is: 'leaflet-marker',
396 | 		behaviors: [leafletMap.LeafletPopupContent],
397 | 
398 | 		/**
399 | 		 * Fired when the user clicks (or taps) the marker.
400 | 		 * 
401 | 		 * @event click
402 | 		 * @type MouseEvent
403 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
404 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
405 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
406 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
407 | 		 */
408 | 
409 | 		/**
410 | 		 * Fired when the user double-clicks (or double-taps) the marker.
411 | 		 * 
412 | 		 * @event dblclick
413 | 		 * @type MouseEvent
414 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
415 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
416 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
417 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
418 | 		 */
419 | 
420 | 		/**
421 | 		 * Fired when the user pushes the mouse button on the marker.
422 | 		 * 
423 | 		 * @event mousedown
424 | 		 * @type MouseEvent
425 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
426 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
427 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
428 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
429 | 		 */
430 | 
431 | 		/**
432 | 		 * Fired when the mouse enters the marker.
433 | 		 * 
434 | 		 * @event mouseover
435 | 		 * @type MouseEvent
436 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
437 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
438 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
439 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
440 | 		 */
441 | 		
442 | 		/**
443 | 		 * Fired when the mouse leaves the marker.
444 | 		 * 
445 | 		 * @event mouseout
446 | 		 * @type MouseEvent
447 | 		 * @param {LatLng} latlng The geographical point where the mouse event occured.
448 | 		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
449 | 		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
450 | 		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
451 | 		 */
452 | 		
453 | 		/**
454 | 		 * Fired when the user right-clicks on the marker.
455 | 		 * 
456 | 		 * @event contextmenu
457 | 		 * @type MouseEvent
458 | 		 */
459 | 
460 | 		/**
461 | 		 * Fired when the user starts dragging the marker.
462 | 		 * 
463 | 		 * @event dragstart
464 | 		 */
465 | 
466 | 		/**
467 | 		 * Fired repeatedly while the user drags the marker.
468 | 		 * 
469 | 		 * @event drag
470 | 		 */
471 | 
472 | 		/**
473 | 		 * Fired when the user stops dragging the marker.
474 | 		 * 
475 | 		 * @event dragend
476 | 		 * @type DragEndEvent
477 | 		 * @param {number} distance The distance in pixels the draggable element was moved by.
478 | 		 */
479 | 
480 | 		/**
481 | 		 * Fired when the marker is moved via setLatLng. New coordinate include in event arguments.
482 | 		 * 
483 | 		 * @event move
484 | 		 * @type 
485 | 		 */
486 | 
487 | 		/**
488 | 		 * Fired when the marker is added to the map.
489 | 		 * 
490 | 		 * @event add
491 | 		 * @type 
492 | 		 */
493 | 
494 | 		/**
495 | 		 * Fired when the marker is removed from the map.
496 | 		 * 
497 | 		 * @event remove
498 | 		 */
499 | 
500 | 		/**
501 | 		 * Fired when a popup bound to the marker is open.
502 | 		 * 
503 | 		 * @event popupopen
504 | 		 * @type PopupEvent
505 | 		 * @param {Popup} popup The popup that was opened or closed.
506 | 		 */
507 | 
508 | 		 /**
509 | 		 * Fired when a popup bound to the marker is closed.
510 | 		 * 
511 | 		 * @event popupclose
512 | 		 * @type PopupEvent
513 | 		 * @param {Popup} popup The popup that was opened or closed.
514 | 		 */
515 | 
516 | 		properties: {
517 | 			/**
518 | 			 * The `latitude` attribute sets the positions of the marker.
519 | 			 *
520 | 			 * @attribute latitude
521 | 			 * @type number
522 | 			 */
523 | 			latitude: {
524 | 				type: Number,
525 | 				value: null,
526 | 				reflectToAttribute: true,
527 | 				notify: true,
528 | 				observer: '_positionChanged'
529 | 			},
530 | 
531 | 			/**
532 | 			 * The `longitude` attribute sets the positions of the marker.
533 | 			 *
534 | 			 * @attribute longitude
535 | 			 * @type number
536 | 			 */
537 | 			longitude: {
538 | 				type: Number,
539 | 				value: null,
540 | 				reflectToAttribute: true,
541 | 				notify: true,
542 | 				observer: '_positionChanged'
543 | 			},
544 | 
545 | 			/**
546 | 			 * The `icon` attribute sets the Icon class to use for rendering the marker. 
547 | 			 * This attribute may be refer to an id-attribute of an leaflet-icon-element,
548 | 			 * contain json syntax or it be assigned an instance of L.icon.
549 | 			 * See Icon documentation for details on how to customize the marker icon. Set to new L.Icon.Default() by default.
550 | 			 * 
551 | 			 * @attribute icon
552 | 			 * @type string, json or L.icon
553 | 			 */
554 | 			icon: {
555 | 				type: Object,
556 | 				observer: '_iconChanged'
557 | 			},
558 | 
559 | 			/**
560 | 			 * The `no-clickable` disables emitting mouse events and will act as a part of the underlying map.
561 | 			 * 
562 | 			 * @attribute no-clickable
563 | 			 * @type bool
564 | 			 */
565 | 			noClickable: {
566 | 				type: Boolean,
567 | 				value: false
568 | 			},
569 | 
570 | 			/**
571 | 			 * The `draggable` attribute sets the whether the marker is draggable with mouse/touch or not.
572 | 			 * 
573 | 			 * @attribute draggable
574 | 			 * @type bool
575 | 			 */
576 | 			draggable: {
577 | 				type: Boolean,
578 | 				value: false
579 | 			},
580 | 
581 | 			/**
582 | 			 * The `no-keyboard` attribute disables whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
583 | 			 * 
584 | 			 * @attribute no-keyboard
585 | 			 * @type bool
586 | 			 */
587 | 			noKeyboard: {
588 | 				type: Boolean,
589 | 				value: false
590 | 			},
591 | 
592 | 			/**
593 | 			 * The `title` attribute sets the text for the browser tooltip that appear on marker hover (no tooltip by default).
594 | 			 * 
595 | 			 * @attribute title
596 | 			 * @type string
597 | 			 */
598 | 			title: {
599 | 				type: String,
600 | 				value: ''
601 | 			},
602 | 
603 | 			/**
604 | 			 * The `alt` attribute sets the text for the alt attribute of the icon image (useful for accessibility).
605 | 			 * 
606 | 			 * @attribute alt
607 | 			 * @type string
608 | 			 */
609 | 			alt: {
610 | 				type: String,
611 | 				value: ''
612 | 			},
613 | 
614 | 			/**
615 | 			 * The `z-index-offset` attribute sets the zIndexOffset. By default, marker images zIndex is set automatically based on its latitude
616 | 			 * 
617 | 			 * @attribute z-index-offset
618 | 			 * @type number
619 | 			 */
620 | 			zIndexOffset: {
621 | 				type: Number,
622 | 				value: 0,
623 | 				observer: '_zIndexOffsetChanged'
624 | 			},
625 | 
626 | 			/**
627 | 			 * The `opacity` attribute sets the opacity of the marker.
628 | 			 * 
629 | 			 * @attribute opacity
630 | 			 * @type number
631 | 			 */
632 | 			opacity: {
633 | 				type: Number,
634 | 				value: 1.0,
635 | 				observer: '_opacityChanged'
636 | 			},
637 | 
638 | 			/**
639 | 			 * The `rise-on-hover` attribute sets the whether the marker will get on top of others when you hover the mouse over it. 
640 | 			 * 
641 | 			 * @attribute rise-on-hover
642 | 			 * @type bool
643 | 			 */
644 | 			riseOnHover: {
645 | 				type: Boolean,
646 | 				value: false
647 | 			},
648 | 
649 | 			/**
650 | 			 * The `rise-offset` attribute sets the z-index offset used for the riseOnHover feature.
651 | 			 * 
652 | 			 * @attribute rise-offset
653 | 			 * @type number
654 | 			 */
655 | 			riseoffset: {
656 | 				type: Number,
657 | 				value: 250
658 | 			},
659 | 
660 | 			container: {
661 | 				type: Object,
662 | 				observer: '_containerChanged'
663 | 			}
664 | 		},
665 | 
666 | 		feature: undefined,
667 | 
668 | 		observer_: undefined,
669 | 
670 | 		_containerChanged: function() {
671 | 			if (this.container) {
672 | 
673 | 				var feature = L.marker([this.latitude, this.longitude], {
674 | 					clickable: !this.noClickable,
675 | 					draggable: this.draggable,
676 | 					keyboard: !this.noKeyboard,
677 | 					title: this.title,
678 | 					alt: this.alt,
679 | 					zIndexOffset: this.zIndexOffset,
680 | 					opacity: this.opacity,
681 | 					riseOnHover: this.riseOnHover,
682 | 					riseOffset: this.riseOffset,
683 | 				});
684 | 				this.feature = feature;
685 | 				this._iconChanged();
686 | 
687 | 				// forward events
688 | 				feature.on('click dblclick mousedown mouseover mouseout contextmenu dragstart drag dragend move add remove popupopen popupclose', function(e) {
689 | 					this.fire(e.type, e);
690 | 				}, this);
691 | 
692 | 				this.updatePopupContent();
693 | 				this.feature.addTo(this.container);
694 | 			}
695 | 		},
696 | 
697 | 		_iconChanged: function() {
698 | 			// icon support
699 | 			var iconOption;
700 | 			if (this.icon) {
701 | 				if (typeof this.icon == "string") {
702 | 					var iconElement = document.getElementById(this.icon);
703 | 					if (iconElement != null) {
704 | 						if (iconElement.getIcon) {
705 | 							iconOption = iconElement.getIcon();
706 | 						}
707 | 					} else {
708 | 						try {
709 | 							iconOption = L.icon(JSON.parse(this.icon));
710 | 						} catch (e) {
711 | 							iconOption = new L.Icon.Default();
712 | 						}
713 | 					}
714 | 				}
715 | 				if (typeof this.icon == "object") {
716 | 					if (this.icon.options) {
717 | 						iconOption = this.icon;
718 | 					} else {
719 | 						iconOption = L.icon(this.icon);
720 | 					}
721 | 				}
722 | 			}
723 | 			if (!iconOption) {
724 | 				iconOption = new L.Icon.Default();
725 | 			}
726 | 			if (this.feature) {
727 | 				this.feature.setIcon(iconOption);
728 | 			}
729 | 		},
730 | 
731 | 		_positionChanged: function() {
732 | 			if (this.feature) {
733 | 				this.feature.setLatLng(L.latLng(this.latitude, this.longitude));
734 | 			}
735 | 		},
736 | 
737 | 		_zIndexOffsetChanged: function() {
738 | 			if (this.feature) {
739 | 				this.feature.setZIndexOffset(this.zIndexOffset);
740 | 			}
741 | 		},
742 | 
743 | 		_opacityChanged: function() {
744 | 			if (this.feature) {
745 | 				this.feature.setOpacity(this.opacity);
746 | 			}
747 | 		},
748 | 
749 | 		detached: function() {
750 | 			if (this.container && this.feature) {
751 | 				this.container.removeLayer(this.feature);
752 | 			}
753 | 		}
754 | 
755 | 	});
756 | 	</script>
757 | </dom-module>
758 | 


--------------------------------------------------------------------------------
/leaflet-popup.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | "use strict";
 3 | 
 4 | var leafletMap = leafletMap || {};
 5 | leafletMap.LeafletPopupContent = {
 6 | 	attached: function() {
 7 | 		if (MutationObserver && !this.observer_) {
 8 | 			this.observer_ = new MutationObserver(this.updatePopupContent.bind(this));
 9 | 			this.observer_.observe(this, {childList: true, characterData: true, attributes: true, subtree: true});
10 | 		}
11 | 	},
12 | 
13 | 	updatePopupContent: function() {
14 | 		if (!this.feature) {
15 | 			return;
16 | 		}
17 | 		this.feature.unbindPopup();
18 | 		// TODO: Hack, ignore <leaflet-point>-tag
19 | 		var content = Polymer.dom(this).innerHTML.replace(/<\/?leaflet-point[^>]*>/g, "").trim();
20 | 		if (content) {
21 | 			this.feature.bindPopup(content);
22 | 		}
23 | 	},
24 | 	
25 | 	detached: function() {
26 | 		if (this.observer_) {
27 | 			this.observer_.disconnect();
28 | 		}
29 | 	}
30 | }
31 | </script>


--------------------------------------------------------------------------------
/metadata.html:
--------------------------------------------------------------------------------
 1 | <x-meta id="leaflet-map" label="Leaflet Map" group="Leaflet Map" isContainer="true">
 2 | 
 3 |   <template>
 4 |      <leaflet-map latitude="51.505" longitude="-0.09" zoom="13" style="width: 400px; height: 400px; display: block;"> </leaflet-map>
 5 |   </template>
 6 | 
 7 |   <template id="imports">
 8 |     <link rel="import" href="leaflet-map.html">
 9 |   </template>
10 | 
11 | </x-meta>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leaflet-extras/leaflet-map/2ca9d9c83bef85a1b857070399e26b23d1ad3b63/preview.png


--------------------------------------------------------------------------------