Rolandstraße 83
50677 Köln
Telefon: +49 221 800 334-0
mapz.com allows the creation of interactive maps for online use, which can also be printed in high resolution. Established in 1999.
info@mapz.com www.mapz.comDisplay text and an optional picture beside the marker. The position of the box can be controlled via the "offset" Javascript parameter.
<body>
<div id="map" class="map">
<div id="popup" class="ol-popup">
<div class="close-button"></div>
<div id="popup-content">
<img class="picture" src="https://mapz.com/api/images/Fassade.jpg"/>
<div>
<h4>Kober-Kümmerly+Frey Media AG</h4>
<p>
Rolandstraße 83<br>
50677 Köln<br>
Telefon: +49 221 800 334-0<br>
</p>
<p>mapz.com allows the creation of interactive maps for online use, which can also be printed in high resolution. Established in 1999.</p>
<a href="mailto:info@mapz.com">info@mapz.com</a>
<a href="http://www.mapz.com">www.mapz.com</a>
<img class="logo" src="https://mapz.com/static/assets/images/logo.png" />
</div>
</div>
</div>
</div>
</body>
<script>
// Create background layer
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [new ol.Attribution({
html: '© 2022 <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 iconFeature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.transform([6.955458882700669, 50.91922321769121], 'EPSG:4326', 'EPSG:3857')
)
});
iconFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
src: 'https://mapz.com/map/marker/svg/M_marker_heart_150910.svg',
// Set imgSize to fix IE11-Bug
imgSize: [39.69, 39.69],
scale: 2
}))
}));
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [iconFeature]
})
});
// Create overlay with html div "popup"
// You can change the layout from the popup in the css
var popupOverlay = new ol.Overlay(({
element: document.getElementById('popup'),
position: iconFeature.getGeometry().getCoordinates(),
offset: [0, -30],
autoPan: true,
autoPanMargin: 5,
autoPanAnimation: {
duration: 250
}
}));
var map = new ol.Map({
target: document.getElementById('map'),
logo: false,
layers: [
baseLayer,
vectorLayer
],
overlays: [popupOverlay],
view: new ol.View({
center: ol.proj.transform([6.95982, 50.92098], 'EPSG:4326', 'EPSG:3857'),
zoom: 16
})
});
map.on('click', function(evt) {
// When click in map, look for a feature
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
}
);
// Show the popup
if (feature && popup.style.display == 'none') {
popup.style.display = '';
popupOverlay.setPosition(feature.getGeometry().getCoordinates());
// Hide the popup
} else {
popup.style.display = 'none';
}
});
popup.getElementsByClassName('close-button')[0].addEventListener('click', function() {
popup.style.display = 'none';
});
</script>
<style>
/* styles the popup container */
.ol-popup {
position: absolute;
background-color: white;
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
width: 545px;
}
/* The next three definitions styles the popup
* position flag
*/
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
/* styles the white part of the position flag.
* Position of flag can be changed by changing
* "left" value
*/
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
/* styles the gray part (border) of the position flag.
* Position of flag can be changed by changing
* "left" value
*/
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
/* The next two definitions styles the
* popup close button
*/
.ol-popup .close-button {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
color: #cccccc;
font-weight: bold;
}
.ol-popup .close-button:before {
content: "x";
}
/* Definitions below styles the content
* elements.
*/
#popup-content h4 {
color: #ef8214;
font-weight: 400;
margin-bottom: 10px;
margin-top: 0;
}
#popup-content p {
font-size: 14px;
line-height: 20px;
color: #464646;
}
#popup-content a,
#popup-content a:visited
#popup-content a:hover {
color: #ef8214;
line-height: 20px;
font-size: 14px;
text-decoration: none;
display: block;
}
#popup-content .picture {
width: 200px;
float: left;
margin-right: 20px;
border: 1px solid #cccccc;
}
#popup-content .logo {
height: 20px;
bottom: 47px;
height: 20px;
position: absolute;
right: 30px;
left: auto;
}
/* styling for devices with screen width less than 575px */
@media (max-width: 575px) {
.ol-popup {
width: 330px;
left: -25px;
}
.ol-popup::before {
left: 24px;
}
.ol-popup::after {
left: 24px;
}
.ol-popup .close-button {
font-size: 10px;
}
#popup-content h4 {
font-size: 10px;
margin-bottom: 5px;
}
#popup-content p {
margin-bottom: 5px;
}
#popup-content p,
#popup-content a,
#popup-content a:visited
#popup-content a:hover {
font-size: 9px;
line-height: 12px;
}
#popup-content .picture {
width: 130px;
margin-right: 10px;
}
#popup-content .logo {
height: 12px;
bottom: 34px;
right: 20px;
}
}
.map {
height: 400px;
font-family: "HelveticaNeue", "Helvetica";
}
</style>
<html>
<head>
<link rel='stylesheet' href='https://mapz.com/api/css/ol.css' />
<script src='https://mapz.com/api/javascript/lib/3.15.1/openlayers.js' type='text/javascript'></script>
<style>
/* styles the popup container */
.ol-popup {
position: absolute;
background-color: white;
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
width: 545px;
}
/* The next three definitions styles the popup
* position flag
*/
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
/* styles the white part of the position flag.
* Position of flag can be changed by changing
* "left" value
*/
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
/* styles the gray part (border) of the position flag.
* Position of flag can be changed by changing
* "left" value
*/
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
/* The next two definitions styles the
* popup close button
*/
.ol-popup .close-button {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
color: #cccccc;
font-weight: bold;
}
.ol-popup .close-button:before {
content: "x";
}
/* Definitions below styles the content
* elements.
*/
#popup-content h4 {
color: #ef8214;
font-weight: 400;
margin-bottom: 10px;
margin-top: 0;
}
#popup-content p {
font-size: 14px;
line-height: 20px;
color: #464646;
}
#popup-content a,
#popup-content a:visited
#popup-content a:hover {
color: #ef8214;
line-height: 20px;
font-size: 14px;
text-decoration: none;
display: block;
}
#popup-content .picture {
width: 200px;
float: left;
margin-right: 20px;
border: 1px solid #cccccc;
}
#popup-content .logo {
height: 20px;
bottom: 47px;
height: 20px;
position: absolute;
right: 30px;
left: auto;
}
/* styling for devices with screen width less than 575px */
@media (max-width: 575px) {
.ol-popup {
width: 330px;
left: -25px;
}
.ol-popup::before {
left: 24px;
}
.ol-popup::after {
left: 24px;
}
.ol-popup .close-button {
font-size: 10px;
}
#popup-content h4 {
font-size: 10px;
margin-bottom: 5px;
}
#popup-content p {
margin-bottom: 5px;
}
#popup-content p,
#popup-content a,
#popup-content a:visited
#popup-content a:hover {
font-size: 9px;
line-height: 12px;
}
#popup-content .picture {
width: 130px;
margin-right: 10px;
}
#popup-content .logo {
height: 12px;
bottom: 34px;
right: 20px;
}
}
.map {
height: 400px;
font-family: "HelveticaNeue", "Helvetica";
}
</style>
</head>
<body>
<div id="map" class="map">
<div id="popup" class="ol-popup">
<div class="close-button"></div>
<div id="popup-content">
<img class="picture" src="https://mapz.com/api/images/Fassade.jpg"/>
<div>
<h4>Kober-Kümmerly+Frey Media AG</h4>
<p>
Rolandstraße 83<br>
50677 Köln<br>
Telefon: +49 221 800 334-0<br>
</p>
<p>mapz.com allows the creation of interactive maps for online use, which can also be printed in high resolution. Established in 1999.</p>
<a href="mailto:info@mapz.com">info@mapz.com</a>
<a href="http://www.mapz.com">www.mapz.com</a>
<img class="logo" src="https://mapz.com/static/assets/images/logo.png" />
</div>
</div>
</div>
</div>
<script>
// Create background layer
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [new ol.Attribution({
html: '© 2022 <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 iconFeature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.transform([6.955458882700669, 50.91922321769121], 'EPSG:4326', 'EPSG:3857')
)
});
iconFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
src: 'https://mapz.com/map/marker/svg/M_marker_heart_150910.svg',
// Set imgSize to fix IE11-Bug
imgSize: [39.69, 39.69],
scale: 2
}))
}));
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [iconFeature]
})
});
// Create overlay with html div "popup"
// You can change the layout from the popup in the css
var popupOverlay = new ol.Overlay(({
element: document.getElementById('popup'),
position: iconFeature.getGeometry().getCoordinates(),
offset: [0, -30],
autoPan: true,
autoPanMargin: 5,
autoPanAnimation: {
duration: 250
}
}));
var map = new ol.Map({
target: document.getElementById('map'),
logo: false,
layers: [
baseLayer,
vectorLayer
],
overlays: [popupOverlay],
view: new ol.View({
center: ol.proj.transform([6.95982, 50.92098], 'EPSG:4326', 'EPSG:3857'),
zoom: 16
})
});
map.on('click', function(evt) {
// When click in map, look for a feature
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
}
);
// Show the popup
if (feature && popup.style.display == 'none') {
popup.style.display = '';
popupOverlay.setPosition(feature.getGeometry().getCoordinates());
// Hide the popup
} else {
popup.style.display = 'none';
}
});
popup.getElementsByClassName('close-button')[0].addEventListener('click', function() {
popup.style.display = 'none';
});
</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