<open-map> element </open-map> Make Open Street Maps using declarative Polymer web components. To get started read the <open-doc></open-doc> or checkout the <open-demo></open-demo> .
<open-map></open-map> use:
Mapbox - Awesome library for use Open MapsPolymer - Awesome framework for web components.maki - Native icons for mapbox. <open-marker icon="{'icon':'restaurant'}"></open-marker>
Install open-map component using bower . $ bower install open-map#master
Configure Polymer and the new component. < head >
< script src ="../platform/platform.js "> </ script >
< link rel ="import " href ="../open-map/open-map.html ">
< style >
html , body {
margin : 0 ;
height : 100% ;
}
leaflet-map {
height : 100% ;
}
</ style >
</ head >
< body unresolved >
< open-map id ="map "
zoom ="15 "
latitude ="38.908847 "
mapID ="villeda.c4c63d13 "
longitude ="1.433900 ">
< 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 ">
( function ( document , navigator ) {
'use strict' ;
var me = document . querySelector ( '#me' ) ;
navigator . geolocation . watchPosition ( function ( pos ) {
me . latitude = pos . coords . latitude ;
me . longitude = pos . coords . longitude ;
} ) ;
} ( document , navigator ) ) ;
</ script >
</ body >
Attribute
Type
Default
mapIDString
gnurub.j3ee3mk2
geolocationUIBoolean
false
fullscreenUIBoolean
false
zoomNumber
10
disableZoomUIBoolean
false
zoomableBoolean
true
latitudeFloat
38.867847507701114
longitudeFloat
1.3109779357910156
maxZoomNumber
16
minZoomNumber
1
maxBoundsArray
null
Method
Function
clearRemove all markers.
Event
Function
open-map-readyFired when map is ready
open-map-zoomenedFired on zoom change
<open-marker></open-marker>
Attribute
Type
Default
latitudeFloat
null
longitudeFloat
null
iconObject
null
titleString
null
Param
Type
Default
iconString
null
iconUrlURL
null
iconRetinaUrlURL
null
iconSizeArray
[35, 45]
iconAnchorArray
[17, 42]
popupAnchorArray
[1, -32]
shadowUrlURL
null
shadowRetinaUrlURL
null
shadowSizeArray
[36, 16]
shadowAnchorArray
[10, 12]
markerColorString
'#ff0000'
Even
Function
dblclick-markerFired when double clicked
click-markerFired when clicked.
move-markerFired when the marker is moved via latitude/longitude
dragstart-markerFired when drag starts.
dragend-markerFired when drag ends.
drag-markerFired when dragged.
remove-markerFired when marker is removed.
popupopen-markerFired when the popup is opened.
popupclose-markerFired when the popup is closed.
<open-search></open-search>
Property
Type
Funtion
resultObject
Returns an object with the results
Attribute
Type
Function
queryArray
Array that contains the querys
accessTokenString
String whit the access token
Even
Function
open-search-resultsFired it when the result is available.
You can personalize the map using the MapBoxEditor or MapBoxStudio , introduce your map id in the attribute mapID.
MIT
