leaflet-map-component/leaflet-circle-component.html at master · schlm3/leaflet-map-component · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!--
The `leaflet-circle` element represents a circle on the map and is used as
a child element of the `leaflet-map` element.


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

@element leaflet-circle
@blurb Element for putting a circle on the map
@status alpha
@homepage http://prtksxna.github.io/leaflet-map-component/components/leaflet-map-component/
-->

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

<polymer-element name="leaflet-circle" attributes="latitude longitude radius">
  <template>
    <style>
      :host{ display: none; }
    </style>
  </template>
  <script>
   Polymer( 'leaflet-circle', {
     /**
      * A Leaflet circle object
      *
      * @property feature
      * @type L.circle
      * @default null
      */
     feature: null,

     /**
      * A Leaflet map object
      *
      * @property map
      * @type L.map
      * @default null
      */
     map: null,

     publish: {
       /**
	* The circle's longitude coordinate
	*
	* @attribute longitude
	* @type number
	* @default null
	*/
       longitude: { value: null, reflect: true },

       /**
	* The circle's latitude coordinate
	*
	* @attribute latitude
	* @type number
	* @default null
	*/
       latitude: { value: null, reflect: true },

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

     observe: {
       latitude: 'updatePosition',
       longitude: 'updatePosition',
       radius: 'updateRadius',
     },

     ready: function () {
       this.mapReady();
     },

     mapChanged: function () {
       this.mapReady();
     },

     mapReady: function () {
       if ( this.latitude && this.longitude && this.map ) {
         this.feature = L.circle( [this.latitude, this.longitude], this.radius, this.pathOptions );
         this.feature.addTo( this.map );
         this.contentChanged();
       }
     },

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

     updateRadius: function () {
       if ( this.feature && this.radius != null ) {
         this.feature.setRadius( this.radius );
       }
     },

     contentChanged: function () {
       this.onMutation( this, this.contentChanged );
       var content = this.innerHTML;
       this.feature.bindPopup( content );
     }
   } );
  </script>
</polymer-element>