A geotracking simulation from a pedestrian's perspective.
The code is a little more extensive when you have to simulate a user's journey. The abridged code for this function, which will account for a user's actual location – and is not a simulation –, can be found on our geotracking example page.
<body>
<div id="map" class="map"></div>
<button id="start-simulate" class="button-secondary">Start simulation</button>
<button id="stop-simulate" class="button-secondary" style="display: none">End simulation</button>
</body>
<script>
// create a background layer
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [new ol.Attribution({
html: '© 2021 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
- Map Data: <a target="_blank" href="http://openstreetmap.org" >OpenStreetMap</a>\
(<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'
})],
tilePixelRatio: 2,
url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_base_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
})
});
var map = new ol.Map({
target: document.getElementById('map'),
logo: false,
layers: [
baseLayer
],
view: new ol.View({
center: ol.proj.transform([5.868668798, 45.64444874417562], 'EPSG:4326', 'EPSG:3857'),
zoom: 17
})
});
// EnableHighAccuracy
var geolocation = new ol.Geolocation({
trackingOptions: {
enableHighAccuracy: true
}
});
// Create geotracker
var geoTracker = new ol.mapz.control.GeoTracker({
// define position symbol
marker: {
src: 'https://mapz.com/api/static/images/position.svg',
// Set imgSize to fix IE11-Bug
imgSize: [28.346, 28.346],
height: 60
},
// set style for recorded track
trackStyle: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 5,
color: 'rgba(239, 130, 20, 0.5)'
})
}),
//don't start tracking automatically
autostart: false,
// enable high accuracy
enableHighAccuracy: true
});
map.addControl(geoTracker);
/*
* All of the following code is used for simulating device movement
*/
// simulate device move
var simulationData;
var client = new XMLHttpRequest();
client.open('GET', 'https://mapz.com/api/static/data/geolocation-orientation.json');
/**
* Handle data loading.
*/
client.onload = function() {
simulationData = JSON.parse(client.responseText).data;
};
client.send();
// convert degrees to radians
function degToRad(deg) {
return deg * Math.PI * 2 / 360;
}
var startSimulateBtn = document.getElementById('start-simulate');
var stopSimulateBtn = document.getElementById('stop-simulate');
var geoTrackerBtn = document.getElementsByClassName('mapz-control-geotracker-button')[0];
var cancelSimulation = false;
startSimulateBtn.addEventListener('click', function() {
cancelSimulation = false;
startSimulateBtn.style.display = 'none';
stopSimulateBtn.style.display = '';
geoTracker.getGeolocation().setTracking(false);
var coordinates = simulationData;
var first = coordinates.shift();
simulatePositionChange(first);
var prevDate = first.timestamp;
function geolocate() {
if(cancelSimulation) {
return;
}
var position = coordinates.shift();
if (!position) {
return;
}
var newDate = position.timestamp;
simulatePositionChange(position);
window.setTimeout(function() {
prevDate = newDate;
geolocate();
}, (newDate - prevDate) / 0.5);
}
geolocate();
map.on('postcompose', function() {
map.render();
});
map.render();
}, false);
function stopSimulation() {
startSimulateBtn.style.display = '';
stopSimulateBtn.style.display = 'none';
cancelSimulation = true;
};
stopSimulateBtn.addEventListener('click', stopSimulation);
geoTrackerBtn.addEventListener('click', stopSimulation);
function simulatePositionChange(position) {
var coords = position.coords;
var geolocation = geoTracker.getGeolocation();
geolocation.set('accuracy', coords.accuracy);
geolocation.set('heading', degToRad(coords.heading));
var position_ = [coords.longitude, coords.latitude];
var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
'EPSG:3857');
geolocation.set('position', projectedPosition);
geolocation.set('speed', coords.speed);
geolocation.changed();
}
</script>
<style>
.mapz-control-geotracker {
display: none !important;
}
.map {
height: 400px;
font-family: "HelveticaNeue", "Helvetica";
}
</style>
<html>
<head>
<link rel='stylesheet' href='https://mapz.com/api/static/css/ol.css' />
<script src='https://mapz.com/api/static/javascript/lib/3.15.1/openlayers.js' type='text/javascript'></script>
<style>
.mapz-control-geotracker {
display: none !important;
}
.map {
height: 400px;
font-family: "HelveticaNeue", "Helvetica";
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<button id="start-simulate" class="button-secondary">Start simulation</button>
<button id="stop-simulate" class="button-secondary" style="display: none">End simulation</button>
<script>
// create a background layer
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [new ol.Attribution({
html: '© 2021 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
- Map Data: <a target="_blank" href="http://openstreetmap.org" >OpenStreetMap</a>\
(<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'
})],
tilePixelRatio: 2,
url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_base_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
})
});
var map = new ol.Map({
target: document.getElementById('map'),
logo: false,
layers: [
baseLayer
],
view: new ol.View({
center: ol.proj.transform([5.868668798, 45.64444874417562], 'EPSG:4326', 'EPSG:3857'),
zoom: 17
})
});
// EnableHighAccuracy
var geolocation = new ol.Geolocation({
trackingOptions: {
enableHighAccuracy: true
}
});
// Create geotracker
var geoTracker = new ol.mapz.control.GeoTracker({
// define position symbol
marker: {
src: 'https://mapz.com/api/static/images/position.svg',
// Set imgSize to fix IE11-Bug
imgSize: [28.346, 28.346],
height: 60
},
// set style for recorded track
trackStyle: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 5,
color: 'rgba(239, 130, 20, 0.5)'
})
}),
//don't start tracking automatically
autostart: false,
// enable high accuracy
enableHighAccuracy: true
});
map.addControl(geoTracker);
/*
* All of the following code is used for simulating device movement
*/
// simulate device move
var simulationData;
var client = new XMLHttpRequest();
client.open('GET', 'https://mapz.com/api/static/data/geolocation-orientation.json');
/**
* Handle data loading.
*/
client.onload = function() {
simulationData = JSON.parse(client.responseText).data;
};
client.send();
// convert degrees to radians
function degToRad(deg) {
return deg * Math.PI * 2 / 360;
}
var startSimulateBtn = document.getElementById('start-simulate');
var stopSimulateBtn = document.getElementById('stop-simulate');
var geoTrackerBtn = document.getElementsByClassName('mapz-control-geotracker-button')[0];
var cancelSimulation = false;
startSimulateBtn.addEventListener('click', function() {
cancelSimulation = false;
startSimulateBtn.style.display = 'none';
stopSimulateBtn.style.display = '';
geoTracker.getGeolocation().setTracking(false);
var coordinates = simulationData;
var first = coordinates.shift();
simulatePositionChange(first);
var prevDate = first.timestamp;
function geolocate() {
if(cancelSimulation) {
return;
}
var position = coordinates.shift();
if (!position) {
return;
}
var newDate = position.timestamp;
simulatePositionChange(position);
window.setTimeout(function() {
prevDate = newDate;
geolocate();
}, (newDate - prevDate) / 0.5);
}
geolocate();
map.on('postcompose', function() {
map.render();
});
map.render();
}, false);
function stopSimulation() {
startSimulateBtn.style.display = '';
stopSimulateBtn.style.display = 'none';
cancelSimulation = true;
};
stopSimulateBtn.addEventListener('click', stopSimulation);
geoTrackerBtn.addEventListener('click', stopSimulation);
function simulatePositionChange(position) {
var coords = position.coords;
var geolocation = geoTracker.getGeolocation();
geolocation.set('accuracy', coords.accuracy);
geolocation.set('heading', degToRad(coords.heading));
var position_ = [coords.longitude, coords.latitude];
var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
'EPSG:3857');
geolocation.set('position', projectedPosition);
geolocation.set('speed', coords.speed);
geolocation.changed();
}
</script>
</body>
</html>
<style>
.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
}
.ol-scale-line {
background: rgba(255, 255, 255, 0.85);
border-radius: 3px;
bottom: 10px;
left: 8px;
padding: 5px;
font-size: 11px;
position: absolute;
color: #464646;
}
.ol-scale-line-inner {
border: 1px solid #464646;
border-top: none;
text-align: center;
margin: 1px;
will-change: contents, width;
display: inline-block;
}
.ol-scale-line-zoom-inner {
display: inline-block;
margin-right: 10px;
width: auto;
}
.ol-scale-line-scale-inner {
display: inline-block;
margin-left: 10px;
width: auto;
}
.ol-overlay-container {
will-change: left,right,top,bottom;
}
.ol-unsupported {
display: none;
}
.ol-viewport .ol-unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ol-control {
position: absolute;
background-color: #eee;
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
.ol-control:hover {
background-color: rgba(255,255,255,0.6);
}
.ol-zoom {
top: .5em;
left: .5em;
}
.ol-rotate {
top: .5em;
right: .5em;
transition: opacity .25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
opacity: 0;
visibility: hidden;
transition: opacity .25s linear, visibility 0s linear .25s;
}
.ol-zoom-extent {
top: 4.643em;
left: .5em;
}
.ol-full-screen {
right: .5em;
top: .5em;
}
@media print {
.ol-control {
display: none;
}
}
.ol-control button {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 22px;
width: 22px;
line-height: .4em;
background-color: #7b98bc;
background-color: rgba(0,60,136,0.5);
border: none;
border-radius: 2px;
}
.ol-control button::-moz-focus-inner {
border: none;
padding: 0;
}
.ol-zoom-extent button {
line-height: 1.4em;
}
.ol-compass {
display: block;
font-weight: normal;
font-size: 1.2em;
will-change: transform;
}
.ol-touch .ol-control button {
font-size: 1.5em;
line-height: 1.2em;
}
.ol-touch .ol-zoom-extent {
top: 5.5em;
}
.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
background-color: #4c6079;
background-color: rgba(0,60,136,0.7);
}
.ol-zoom .ol-zoom-in {
border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px;
}
.ol-attribution {
text-align: right;
bottom: .5em;
right: .5em;
max-width: calc(100% - 1.3em);
}
.ol-attribution a {
text-decoration: none;
}
.ol-attribution ul {
margin: 0;
padding: 0 .5em;
font-size: .7rem;
line-height: 1.375em;
color: #000;
text-shadow: 0 0 2px #fff;
}
.ol-attribution li {
display: inline;
list-style: none;
line-height: inherit;
}
.ol-attribution li:not(:last-child):after {
content: " ";
}
.ol-attribution img {
max-height: 2em;
max-width: inherit;
}
.ol-attribution ul, .ol-attribution button {
display: inline-block;
}
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution.ol-logo-only ul {
display: block;
}
.ol-attribution:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-logo-only {
background: transparent;
bottom: .4em;
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-logo-only button,
.ol-attribution.ol-uncollapsible button {
display: none;
}
.ol-zoomslider {
top: 4.5em;
left: .5em;
width: 24px;
height: 200px;
}
.ol-zoomslider-thumb {
position: absolute;
background: #7b98bc;
background: rgba(0,60,136,0.5);
border-radius: 2px;
cursor: pointer;
height: 10px;
width: 22px;
margin: 3px;
}
.ol-touch .ol-zoomslider {
top: 5.5em;
width: 2.052em;
}
.ol-touch .ol-zoomslider-thumb {
width: 1.8em;
}
.ol-overviewmap {
left: 0.5em;
bottom: 0.5em;
}
.ol-overviewmap.ol-uncollapsible {
bottom: 0;
left: 0;
border-radius: 0 4px 0 0;
}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
display: inline-block;
}
.ol-overviewmap .ol-overviewmap-map {
border: 1px solid #7b98bc;
height: 150px;
margin: 2px;
width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button{
bottom: 1px;
left: 2px;
position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-overviewmap-box {
border: 2px dotted rgba(0,60,136,0.7);
}
/* mapz */
/* mapz style for controls */
.ol-control,
.ol-control:hover {
border-radius: 2px;
background-color: inherit;
}
/* mapz style for zoom buttons */
.ol-zoom button,
.ol-zoom button:hover {
background-color: rgba(39, 44, 49, 0.9);
color: white;
cursor: pointer;
}
/* end */
/* mapz style for attribution */
.ol-attribution,
.ol-attribution:hover {
background-clip: padding-box;
border-radius: 4px;
}
.ol-attribution:not(.ol-collapsed) {
background-color: rgba(255, 255, 255, 0.85);
}
.ol-attribution:not(.ol-collapsed) > ul {
padding: 0 5px 0 0 !important;
margin-bottom: 0px !important;
}
.ol-attribution:not(.ol-collapsed) > ul > li {
font-size: 11px !important;
}
.ol-attribution:not(.ol-collapsed) > ul > li > a {
color: #464646;
font-weight: 600;
font-size: 11px !important;
}
.ol-attribution.ol-control button {
background-color: rgba(39, 44, 49, 0.9);
cursor: pointer;
}
.ol-attribution.ol-control button span {
color: #fff;
}
.ol-attribution.ol-uncollapsible {
margin: 0 10px 10px 0;
border-radius: 3px;
padding: 5px;
box-sizing: content-box;
}
.ol-attribution.ol-uncollapsible > ul {
display: inline-block !important;
padding: 0 !important;
}
.ol-attribution.ol-uncollapsible > ul > li {
padding: 0 !important;
}
/* ol.mapz.control.Geolocate */
.mapz-control-geolocate {
position: absolute;
top: 70px;
left: 7px;
}
button.mapz-control-geolocate-button {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wcQCC0PcwOZEwAAAYVJREFUOMvtlE1LQkEUhp+5TSJCQmjkIlxaUFiXUpKgyIWLskX4P/whbdoEQZv6BUVRi4yIWhh2S+xjES0LUkECkUS63jvtiujDW9mudzlz5oE55z2v6B/SFW2Wxh/oH/ozTUSHmU8m2gMdDQ+wtLjA8vIK5XLpwxrpDKWIjAySSqVIJueQUpLJ7JI1Lr4PlcImOqaTSCSYmZnF6/UCYJoma2urn7/76NAtFbHxKNPTcSYnpwgEAm/ut7Y2yV/eOIP29XYTi8WIx+OEw8P4fL7XBiiFEIJqtcrGxvqXzXqBdrkFkcgYuq7jcrm4urrENE08Hg+hUAi/vweAnZ1tTs+vnUFrDUU2myWXy2FZFratsG2bYDBIOp3G7++hWLxnby/Tcqxvvl9+eHxXIO5uqdfrABweHnFydt7SiS19qmkaUnZSqVQ4ONjHUtrvN0oIDSk7KBQKHOcMR65uaX4pJaVSiXw+z5OltQfabJoYhoFhnDheZeEk+bvcglpDtTelvgP8szx9BiSpfm0R/9QCAAAAAElFTkSuQmCC');
background-color: inherit;
width: 21px;
height: 21px;
color: white;
cursor: pointer;
opacity: 0.9;
}
/* ol.mapz.control.LayerSwitcher */
.mapz-control-layerswitcher,
.mapz-control-layerswitcher:hover {
top: 10px;
right: 10px;
text-align: left;
padding: 0;
background-color: rgba(39, 44, 49, 0.9);
}
.mapz-control-layerswitcher .layers-container {
margin-top: 0px;
padding: 0 15px 10px 15px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.mapz-control-layerswitcher .layers-container:empty {
padding: 0;
}
.mapz-control-layerswitcher div.layers-container:first-of-type {
padding-top: 10px;
}
.mapz-control-layerswitcher .layers-container.closed {
display: none;
}
.mapz-control-layerswitcher .layers-container div.title {
color: white;
font-size: 0.9em;
font-weight: bold;
margin-bottom: 10px;
}
.mapz-control-layerswitcher input {
margin: 0.2em 0.7em 0.2em 0;
font-size: 0.75em;
line-height: 15px;
}
.mapz-control-layerswitcher label,
.mapz-control-layerswitcher label input {
cursor: pointer;
}
.mapz-control-layerswitcher span {
color: white;
font-weight: bold;
font-size: 0.75em;
line-height: 20px;
position: relative;
bottom: 1px;
}
.mapz-control-layerswitcher > button.toggle-button,
.mapz-control-layerswitcher > button.toggle-button:hover {
color: white;
float:right;
cursor: pointer;
padding: 5px;
line-height: 5px;
background-color: transparent;
height: 22px;
width: 22px;
}
.mapz-control-layerswitcher button.toggle-button:before {
content: 'x';
font-size: 12px;
}
.mapz-control-layerswitcher button.toggle-button.closed:before {
content: '';
}
.mapz-control-layerswitcher button.toggle-button.closed {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXRQTFRF////ITE8NUROM0JMIzI9NkVPJDM+M0NNN0VP5ObnITI8LTxGMD9JMkFLNENNIjE9NENM5efoKThDLDtFIjI9NkROJTQ/yMzPJjVAzM/SIjM98vPzKTdDJjZALz5IJDU/M0FMJTM/MUBLIzQ+KDdC5OboNkVOLTtFIzM+e4WLKThELj1HLz5JSVZgeIKJJTVAsba6eYKJfoeOJTRAMkFMLTxHYm52ys7RIzI+eIKIJDM/sLa6y87RfYeNMD9KKzlFOkhSJzZAKDZC5eboLDpGJzdBLDxGSFVfJjdBLj1IKjpEKztFr7S5yc3QKTlDZnF5JjVBJzhCKzpEW2ZuYGtzNkRQbHd/vMHEVmJrXGZvvcLFys7QMj9LJDQ/KDhCcHqBVGBob3mA8vP0W2dvbHd+cn2DfYaMNkRPzNDSeIGIX2tzsLW5eYOJRlNbRVJbbXh/b3mBRlNcoaito6qvys3Qe4SKKzpFr7W5WmZucnuDe4SLOkhTalR+ggAAATtJREFUeNpkzFVXQkEUBeBtIIJSXhXpbpDuDum0u7s7/7wzF1i48HuY2SfWgUgkGhnG52O4zWdBLpeP980S9I9EYDAYJqgVKaSfVquV5lgMGo1Gp9NtSUFJT/bmCb8fC8QVD328qEqlcruRzUYHTXawuNRuI5fz/muXy1Aqlfu3f454jUZjpwO73d5sck4bbLOxvnYxQ6FafagrUL9b3cHr9f2zAhtvy+k0ajWbiS7eHDJPHzTkbUyhAIvF8v7NDvL0MdkYhikWMUVljsLs7fDjT4aUwSAcjoO4AvFSKIFEqPRyjO1zR6UCtTopoYueTZfLQ4MkqXY6MU342EH38ZE6lYJerxcIBGcy9rbsa5cUgkAAYz2tS8haWq22W0EoFIoJLkGikP5csRijA3NEL8JsNnOIyR5O168AAwC4zzIECwP69gAAAABJRU5ErkJggg==');
background-color: rgba(39, 44, 49, 0.9);
}
/* ol.mapz.control.Search */
.mapz-control-search,
.mapz-control-search:hover {
text-align: left;
background-color: transparent;
position: relative;
}
.ol-control.mapz-control-search,
.ol-control.mapz-control-search:hover {
top: 5px;
right: 5px;
position: absolute;
}
.mapz-control-search input {
font-size: 13px;
font-weight: bold;
border-radius: 4px;
color: #464646;
height: 28px;
line-height: 28px;
padding: 0 0 0 6px;
vertical-align: middle;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fafafa 0%, #ffffff 100%) repeat scroll 0 0;
border: 1px solid rgba(0, 0, 0, 0.15);
outline: medium none;
width: 350px;
box-sizing: border-box;
}
.mapz-control-search .search-results {
margin-top: 5px;
background-clip: padding-box;
background-color: white;
border: 1px solid #d9d9d9;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(169, 169, 169, 0.5);
height: auto;
max-height: 200px;
overflow-y: auto;
padding: 5px 5px;
position: absolute;
width: 350px;
z-index: 1000;
box-sizing: border-box;
font-family: "HelveticaNeue", "Helvetica";
}
.ol-control.mapz-control-search .search-results {
position: relative;
}
.search-results div {
background-color: none;
padding: 5px 5px;
cursor: pointer;
margin: 5px 5px;
border-bottom: 1px solid #d9d9d9;
color: #464646;
font-size: 13px;
}
.search-results div span.name,
.search-results div span.description {
color: #464646;
font-size: 13px !important;
line-height: 15px;
display: block;
cursor: pointer;
}
.search-results div:hover {
background-color: #f2f2f2;
border-radius: 4px;
}
.search-results div.no-results,
.search-results div.no-results:hover {
/*,
.search-results div.requesting,
.search-results div.requesting:hover {*/
font-size: 13px;
border: 0;
}
.search-input-container {
position: relative;
width: 350px;
}
.search-input-container .clear-button,
.search-input-container .clear-button:hover,
.search-input-container .clear-button:focus,
.search-input-container .requesting {
background-color: transparent;
border: medium none;
position: absolute;
right: 5px;
top: 3px;
}
.search-input-container .clear-button,
.search-input-container .clear-button:hover,
.search-input-container .clear-button:focus {
cursor: pointer;
color: #cccccc;
font-weight: bold;
font-size: 13px;
}
.search-input-container .clear-button:before {
content: "x";
}
.search-input-container .requesting {
background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
height: 16px;
width: 16px;
}
.search-input-container .requesting:before {
content: " ";
}
@media (max-width: 400px) {
.mapz-control-search input,
.mapz-control-search .search-results,
.search-input-container {
width: 250px;
}
}
/* ol.mapz.controls.FileSearch */
.search-input-container span.twitter-typeahead {
width: 100%;
}
.search-results div.tt-dataset-result:hover,
.search-results div.tt-dataset-result {
border: 0;
background: white;
}
.search-results div.tt-selectable:hover {
background-color: #f2f2f2;
border-radius: 4px;
}
.search-results strong.tt-highlight {
font-weight: bold;
}
/* ol.mapz.controls.GeoTracker */
.mapz-control-geotracker {
position: absolute;
top: 55px;
left: 7px;
}
button.mapz-control-geotracker-button,
button.mapz-control-geotracker-button:hover,
button.mapz-control-geotracker-button:focus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wcQCC0PcwOZEwAAAYVJREFUOMvtlE1LQkEUhp+5TSJCQmjkIlxaUFiXUpKgyIWLskX4P/whbdoEQZv6BUVRi4yIWhh2S+xjES0LUkECkUS63jvtiujDW9mudzlz5oE55z2v6B/SFW2Wxh/oH/ozTUSHmU8m2gMdDQ+wtLjA8vIK5XLpwxrpDKWIjAySSqVIJueQUpLJ7JI1Lr4PlcImOqaTSCSYmZnF6/UCYJoma2urn7/76NAtFbHxKNPTcSYnpwgEAm/ut7Y2yV/eOIP29XYTi8WIx+OEw8P4fL7XBiiFEIJqtcrGxvqXzXqBdrkFkcgYuq7jcrm4urrENE08Hg+hUAi/vweAnZ1tTs+vnUFrDUU2myWXy2FZFratsG2bYDBIOp3G7++hWLxnby/Tcqxvvl9+eHxXIO5uqdfrABweHnFydt7SiS19qmkaUnZSqVQ4ONjHUtrvN0oIDSk7KBQKHOcMR65uaX4pJaVSiXw+z5OltQfabJoYhoFhnDheZeEk+bvcglpDtTelvgP8szx9BiSpfm0R/9QCAAAAAElFTkSuQmCC');
background-color: inherit;
width: 22px;
height: 22px;
color: white;
cursor: pointer;
opacity: 0.9;
}
</style>
Edit your email address or password, it's now just a click away! If you would like to update your personal data, then you'll get the opportunity to do so during your next download.
Select your language for mapz.com.
You have two options to generate your maps:
You can deactive your maps.com account here. Once you deactivated your account, you will lose access to your account and all of the information stored within your account will be deleted.
Deactivate account