Add a marker at the device position

This commit is contained in:
Frederic Junod
2013-02-04 10:52:29 +01:00
parent 6675de437f
commit 114280e60e
2 changed files with 21 additions and 0 deletions

View File

@@ -21,6 +21,12 @@
padding: 0 0.5em 0.5em 0.5em;
border-radius: 4px;
}
#geolocation {
background-color: white;
border: 1px solid #222;
border-radius: 10px 10px 10px 0;
padding: 3px;
}
@media only screen and (max-width: 600px) {
#text {
display: none;
@@ -31,6 +37,7 @@
</head>
<body>
<div id="map">
<div id="geolocation" style="display: none">you are here</div>
<div id="text">
<h1 id="title">Full-screen example</h1>
<div id="shortdesc">Example of a full-screen map.</div>

View File

@@ -1,8 +1,11 @@
goog.require('goog.debug.Console');
goog.require('goog.debug.Logger');
goog.require('goog.debug.Logger.Level');
goog.require('goog.style');
goog.require('ol.AnchoredElement');
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Geolocation');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
@@ -28,3 +31,14 @@ var map = new ol.Map({
zoom: 0
})
});
var geolocation = new ol.Geolocation();
geolocation.bindTo('projection', map.getView());
var element = document.getElementById('geolocation');
var marker = new ol.AnchoredElement({
map: map,
element: element
});
marker.bindTo('position', geolocation);
goog.style.showElement(element, true);