Add a marker at the device position
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user