From 30cb91b1ddf7a1722e4e43e77fb50b33f6915db2 Mon Sep 17 00:00:00 2001
From: Ruben Cid <rubencidlara@gmail.com>
Date: Sat, 16 Aug 2014 14:52:01 +0200
Subject: [PATCH] v1

---
 README.md        |  41 +++++++++----------
 demo.html        |  17 ++++++--
 open-map.html    |  12 ++++--
 open-marker.html | 100 ++++++++++++++++++++++++++++++++++-------------
 4 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index c1db32f..c654dcb 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,8 @@ Tech
 `<open-map></open-map>` use:
 * [Mapbox] - Awesome library for use Open Maps
 * [Polymer] - Awesome framework for web components.
-* [FortAwesome] - Icons for markers, you can set it into `icon` attribute or also you can use [maki] icons.
- 
+* [maki] - Native icons for mapbox. `<open-marker icon={'icon':'restaurant'}></open-marker>`
+
 Use guide
 --------------
 ##### Install open-map component using [bower].
@@ -44,11 +44,11 @@ $ bower install open-map#master
             longitude="1.433900">
         <open-marker title="School Bus" latitude="38.908847"
             longitude="1.433900"
-            icon="{'icon':'bus', 'markerColor':'black'}"
+            icon="{'icon':'bus', 'markerColor':'#ff0000'}"
             draggable="true">
         </open-marker>
         <open-marker id="me" title="Me"
-            icon="{'icon':'fa-child', 'markerColor':'black'}">
+            icon="{'icon':'pitch', 'markerColor':'#000'}">
         </open-marker>
     </open-map>
     <script type="text/javascript">
@@ -81,21 +81,6 @@ Attributes
 | `maxZoom`       | Number  | 16                 |
 | `minZoom`       | Number  | 1                  |
 
-##### Params for Icon
-| Param             | Type    | Default   |
-| ----------------- | :-----: | --------: |
-| `'icon'`          | String  | 'home'    |
-| `'iconUrl'`       | URL     |  null     |
-| `'iconRetinaUrl'` | URL     |  null     |
-| `'iconSize'`      | Array   | [35, 45]  |
-| `'iconAnchor'`    | Array   | [17, 42]  |
-| `'popupAnchor'`   | Array   | [1, -32]  |
-| `'shadowUrl'`     | URL     | null      |
-| `shadowRetinaUrl'`| URL     | null      |
-| `'shadowSize'`    | Array   | [36, 16]  |
-| `'shadowAnchor'`  | Array   | [10, 12]  |
-| `'markerColor'`   | String  | 'blue'    |
-| `'iconColor'`     | String  | 'white'   |
 
 
 Methods
@@ -123,6 +108,23 @@ Attributes
 | `icon`          | Object  | null               |
 | `title`         | String  | null               |
 
+
+##### Params for Icon
+| Param             | Type    | Default   |
+| ----------------- | :-----: | --------: |
+| `'icon'`          | String  |  null     |
+| `'iconUrl'`       | URL     |  null     |
+| `'iconRetinaUrl'` | URL     |  null     |
+| `'iconSize'`      | Array   | [35, 45]  |
+| `'iconAnchor'`    | Array   | [17, 42]  |
+| `'popupAnchor'`   | Array   | [1, -32]  |
+| `'shadowUrl'`     | URL     | null      |
+| `shadowRetinaUrl'`| URL     | null      |
+| `'shadowSize'`    | Array   | [36, 16]  |
+| `'shadowAnchor'`  | Array   | [10, 12]  |
+| `'markerColor'`   | String  | '#ff0000' |
+
+
 Methods
 -------
 
@@ -152,7 +154,6 @@ MIT
 [&lt;open-demo&gt;&lt;/open-demo&gt;]:https://ruben96.github.io/open-map/components/open-map/demo.html
 [&lt;open-doc&gt;&lt;/open-doc&gt;]:https://ruben96.github.io/open-map
 [Polymer]:http://www.polymer-project.org/
-[FortAwesome]:https://fortawesome.github.io/Font-Awesome/icons/
 [MapBoxEditor]:https://www.mapbox.com/editor
 [Mapbox]:https://www.mapbox.com/
 [maki]:https://www.mapbox.com/maki/
diff --git a/demo.html b/demo.html
index b1100aa..a2fd9ff 100644
--- a/demo.html
+++ b/demo.html
@@ -25,12 +25,21 @@
             latitude="38.908847"
             longitude="1.433900">
 
-    <open-marker title="School Bus" latitude="38.908847"
-            longitude="1.433900"
-            icon="{'marker-symbol':'bus', 'marker-color':'#ff0000', 'marker-size':'large'}"
-            draggable="true">
 
+    <open-marker title="School Bus" latitude="38.909847"
+            longitude="1.435900"
+            icon="{'icon':'bus', 'markerColor':'#ff0000'}"
+            draggable="true">
+    </open-marker>
+    <open-marker id="me" title="Me" icon="{'icon':'pitch', 'markerColor':'#000'}" >
     </open-marker>
   </open-map>
+  <script type="text/javascript">
+    var me = document.querySelector('#me');
+    navigator.geolocation.watchPosition(function(pos){
+        me.latitude = pos.coords.latitude;
+        me.longitude = pos.coords.longitude;
+    });
+  </script>
 </body>
 </html>
diff --git a/open-map.html b/open-map.html
index 40b28d4..3fbd617 100644
--- a/open-map.html
+++ b/open-map.html
@@ -1,5 +1,6 @@
 <!--
-The `open-map` element renders a Open Map Street thanks to [Mapbox](http://mapbox.com/).
+The `open-map` element renders a Open Map Street thanks to
+ [Mapbox](http://mapbox.com/).
 
 ##### Example: Simple Map
     <style>
@@ -24,7 +25,8 @@
 <link rel="import" href="open-import.html">
 <link rel="import" href="open-marker.html">
 
-<polymer-element name="open-map" attributes="latitude longitude zoom minZoom maxZoom mapID disableZoomUI zoomable geolocationUI fullscreenUI">
+<polymer-element name="open-map" attributes="latitude longitude zoom minZoom
+              maxZoom mapID disableZoomUI zoomable geolocationUI fullscreenUI">
   <template>
     <link href='build/css/mapbox.min.css' rel='stylesheet'/>
     <style>
@@ -54,7 +56,8 @@
       map: null,
 
       /**
-       * The `mapID`, it is the identifier of the map in mapbox, you can create your own map in [Mapbox](http://mapbox.com/editor) or use the default.
+       * The `mapID`, it is the identifier of the map in mapbox, you can create
+       * your own map in [Mapbox](http://mapbox.com/editor) or use the default.
 
        *
 
@@ -230,7 +233,8 @@
           this.fire( 'open-map-zoomened', {data: e});
         }.bind( this ) );
         /**
-         * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+         * The `open-map-ready` event is fired when the Open Street Map API has
+         * fully loaded.
          *
          * @event open-map-ready
 
diff --git a/open-marker.html b/open-marker.html
index bf8c8c4..01f9b1b 100644
--- a/open-marker.html
+++ b/open-marker.html
@@ -14,19 +14,19 @@
               zoom="15"
               mapID="examples.map-i875kd35">
         <open-marker
-        icon="{
-            'iconUrl': 'my-icon.png',
-            'iconRetinaUrl': 'my-icon@2x.png',
-            'iconSize': [38, 95],
-            'iconAnchor': [22, 94],
-            'popupAnchor': [-3, -76],
-            'shadowUrl': 'my-icon-shadow.png',
-            'shadowRetinaUrl': 'my-icon-shadow@2x.png',
-            'shadowSize': [68, 95],
-            'shadowAnchor': [22, 94]
-        }"
-        latitude="0"
-        longitude="0">
+          icon="{
+              'iconUrl': 'my-icon.png',
+              'iconRetinaUrl': 'my-icon@2x.png',
+              'iconSize': [38, 95],
+              'iconAnchor': [22, 94],
+              'popupAnchor': [-3, -76],
+              'shadowUrl': 'my-icon-shadow.png',
+              'shadowRetinaUrl': 'my-icon-shadow@2x.png',
+              'shadowSize': [68, 95],
+              'shadowAnchor': [22, 94]
+          }"
+          latitude="0"
+          longitude="0">
         </open-marker>
     </open-map>
 @element open-marker
@@ -36,7 +36,9 @@
 -->
 <polymer-element name="open-marker" attributes="icon title">
   <template>
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link
+      href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
+      rel="stylesheet">
     <style>
         :host {
           display: none;
@@ -55,17 +57,42 @@
         * @default null
         */
         map: null,
-
+      /**
+        * A Mapbox marker object
+        *
+        * @property marker
+        * @type L.marker
+        * @default null
+        */
         marker: null,
-
+      /**
+        * A Mapbox marker object
+        *
+        * @attribute title
+        * @type String
+        * @default null
+        */
         title: '',
 
         publish:{
+        /**
+          * Latitude marker
+          *
+          * @attribute latitude
+          * @type float
+          * @default null
+          */
           latitude: {
             value: null,
             reflect: true
           },
-
+        /**
+          * Longitude marker
+          *
+          * @attribute longitude
+          * @type float
+          * @default null
+          */
           longitude: {
             value: null,
             reflect: true
@@ -92,7 +119,8 @@
               icon: this.createIcon()
             } ).addTo( this.map );
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open
+           * Street Map API has fully loaded.
            *
            * @event open-map-ready
 
@@ -102,56 +130,64 @@
             }
             this.marker.on( 'click', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'dblclick', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'move', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'dragstart', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'drag', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'dragend', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'remove', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
            */
             .on( 'popupopen', sendEvent.bind( this ))
           /**
-           * The `open-map-ready` event is fired when the Open Street Map API has fully loaded.
+           * The `open-map-ready` event is fired when the Open Street Map API
+           * has fully loaded.
            *
            * @event open-map-ready
 
@@ -162,7 +198,9 @@
         },
 
         updateMarker:function(){
-          var canUpdate = ( this.map && this.marker && this.latitude && this.longitude );
+          var canUpdate = ( this.map && this.marker &&
+            this.latitude &&
+            this.longitude );
           if( canUpdate )
             this.marker.setLatLng( [ this.latitude, this.longitude ] );
           else if( !this.marker )
@@ -177,7 +215,13 @@
         },
 
         createIcon:function  () {
-          return L.mapbox.marker.icon( this.icon )
+          this.icon['marker-symbol'] = this.icon['marker-symbol'] ||
+            this.icon.icon;
+          this.icon['marker-size'] = this.icon['marker-size'] ||
+            this.icon.size;
+          this.icon['marker-color'] = this.icon['marker-color'] ||
+            this.icon.markerColor;
+          return L.mapbox.marker.icon( this.icon );
         },
 
         mapChanged: function () {