Skip to content

Commit

Permalink
v1
Browse files Browse the repository at this point in the history
  • Loading branch information
GNURub committed Aug 16, 2014
1 parent 0ef1acb commit 30cb91b
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 56 deletions.
41 changes: 21 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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].
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
-------

Expand Down Expand Up @@ -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/
Expand Down
17 changes: 13 additions & 4 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
12 changes: 8 additions & 4 deletions open-map.html
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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
Expand Down
100 changes: 72 additions & 28 deletions open-marker.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@
zoom="15"
mapID="examples.map-i875kd35">
<open-marker
icon="{
'iconUrl': 'my-icon.png',
'iconRetinaUrl': '[email protected]',
'iconSize': [38, 95],
'iconAnchor': [22, 94],
'popupAnchor': [-3, -76],
'shadowUrl': 'my-icon-shadow.png',
'shadowRetinaUrl': '[email protected]',
'shadowSize': [68, 95],
'shadowAnchor': [22, 94]
}"
latitude="0"
longitude="0">
icon="{
'iconUrl': 'my-icon.png',
'iconRetinaUrl': '[email protected]',
'iconSize': [38, 95],
'iconAnchor': [22, 94],
'popupAnchor': [-3, -76],
'shadowUrl': 'my-icon-shadow.png',
'shadowRetinaUrl': '[email protected]',
'shadowSize': [68, 95],
'shadowAnchor': [22, 94]
}"
latitude="0"
longitude="0">
</open-marker>
</open-map>
@element open-marker
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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 )
Expand All @@ -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 () {
Expand Down

0 comments on commit 30cb91b

Please sign in to comment.