Complete your clusters with a callout box containing information about the locations.
<body>
<div id="map" class="map">
</div>
<div class="template-container">
<div class="detail-template">
<img class="image" height="190px" width="160px"/>
<h4 class="name"></h4>
<div class="contact">
<div>
<i>Red Wines:</i>
<span class="red-wines"></span>
</div>
<div>
<i>White Wines:</i>
<span class="white-wines"></span>
</div>
<h5>Contact</h5>
<div class="address"></div>
<div class="phone-container">
Telephon:
<span class="phone">
</span>
</div>
<div class="fax-container">
Telefax:
<span class="fax">
</span>
</div>
<a class="email"></a>
<a class="homepage"></a>
</div>
</div>
<div class="overview-template">
<img class="image" height="71px" width="71px"/>
<h5 class="name"></h5>
<div class="contact">
<div>
<span class="address"></span>
</div>
<div>
<span>Telephon:</span>
<span class="phone"></span>
<span>Telefax:</span>
<span class="fax"></span>
</div>
<a class="detail-info">
Detailed information
</a>
</div>
</div>
</div>
</body>
<script>
// Create background layer
const baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: ['© 2023 <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'
})
});
// Create a vector layer with clustring source and add a styling
const clusters = new ol.layer.Vector({
// Wrap vector source in cluster source
source: new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector({
url: "https://www.mapz.com/api/data/winegrowers.geojson",
format: new ol.format.GeoJSON()
})
}),
// Define cluster style
style: function(feature, resolution) {
const size = feature.get('features').length;
if (size === 1) {
// Clustered features containing only one feature
// are treated as normal features
return [new ol.style.Style({
image: new ol.style.Icon({
src: 'https://www.mapz.com/api/images/wine.svg',
// Set imgSize to fix IE11-Bug
imgSize: [51.625, 72.039436],
scale: 0.5
})
})];
}
// Otherweise display number of clustered features
// in the icon
return [new ol.style.Style({
geometry: feature.getGeometry(),
image: new ol.style.Icon({
src: 'https://www.mapz.com/api/images/cluster_marker.svg',
// Set imgSize to fix IE11-Bug
imgSize: [51.613998, 72.042],
scale: 0.5
}),
text: new ol.style.Text({
text: size.toString(),
textAlign: 'center',
textBaseline: 'middle',
offsetX: 0,
offsetY: -5,
rotation: 0,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#CCCCCC'
})
})
})];
}
});
const detailTemplate = document.querySelector(
'.template-container .detail-template'
);
const overviewTemplate = document.querySelector(
'.template-container .overview-template'
);
const popupOverlay = new ol.mapz.Popup();
const map = new ol.Map({
logo: false,
target: document.getElementById('map'),
layers: [
baseLayer,
clusters
],
overlays: [popupOverlay],
view: new ol.View({
center: [0, 0],
zoom: 0,
maxZoom: 18
})
});
map.getView().fit(ol.proj.transformExtent(
[
7.826752725294061, 49.35609299283519,
8.517372767725169, 49.632138620987405
],
'EPSG:4326', 'EPSG:3857'
));
map.on('click', function (evt) {
// When clicked in map, look for a feature
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
// Show the popup
if (feature) {
const features = feature.get('features');
showPopUp(features);
// Hide the popup
} else {
popupOverlay.hide();
}
});
// change mouse cursor when over marker
map.on('pointermove', function(e) {
const pixel = map.getEventPixel(e.originalEvent);
map.getTarget().style.cursor = map.hasFeatureAtPixel(pixel) ? 'pointer' : '';
});
function showPopUp(features) {
let content;
// For 1 feature, show the detail popup
if (features.length === 1) {
content = createDetailPopup(features[0]);
}
// Otherwise show the overview popup
else {
content = createOverviewPopup(features);
}
const popupContent = popupOverlay.show(
features[0].getGeometry().getCoordinates(),
content.innerHTML
);
// add container as javascript object to get click events
popupContent.innerHTML = '';
popupContent.appendChild(content);
}
const imageBaseUrl = 'https://www.mapz.com/api/images/winegrowers';
function createOverviewPopup(features) {
// Create a container
const container = document.createElement('div');
container.className = 'overview';
features.forEach(function (feature) {
// Clone the template
const overview = overviewTemplate.cloneNode(true);
// Get feature properties
const name = feature.get('name');
const imageName = feature.get('imageName') + '_preview.png';
const contact = feature.get('contact');
// Fill the template
overview.querySelector('.image').src = imageBaseUrl + '/' + imageName;
overview.querySelector('.name').innerHTML = name;
overview.querySelector('.address').innerHTML = contact.address;
overview.querySelector('.phone').innerHTML = contact.phone;
overview.querySelector('.fax').innerHTML = contact.fax;
container.append(overview);
overview.querySelector('.detail-info').onclick = function () {
map.once('moveend', function () {
showPopUp([feature]);
});
map.getView().setCenter(feature.getGeometry().getCoordinates());
map.getView().setZoom(16);
};
});
const wrapper = document.createElement('div');
wrapper.append(container);
return wrapper;
}
function createDetailPopup(feature) {
// Clone the template
const details = detailTemplate.cloneNode(true);
details.className = 'detail';
// Get feature properties
const name = feature.get('name');
const imageName = feature.get('imageName') + '.png';
const redWines = feature.get('redWines');
const whiteWines = feature.get('whiteWines');
const contact = feature.get('contact');
// Fill the template
details.querySelector('.image').src = imageBaseUrl + '/' + imageName;
details.querySelector('.name').innerHTML = name;
details.querySelector('.red-wines').innerHTML = redWines;
details.querySelector('.white-wines').innerHTML = whiteWines;
details.querySelector('.address').innerHTML = contact.address;
details.querySelector('.phone').innerHTML = contact.phone;
details.querySelector('.fax').innerHTML = contact.fax;
details.querySelector('.email').href = 'mailto:' + contact.email;
details.querySelector('.email').innerHTML = contact.email;
details.querySelector('.homepage').href = 'http://' + contact.homepage;
details.querySelector('.homepage').innerHTML = contact.homepage;
const wrapper = document.createElement('div');
wrapper.append(details);
return wrapper;
}
</script>
<style>
.ol-popup {
display: none;
position: absolute;
background-color: white;
padding: 15px 25px 15px 15px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-content {
min-width: 170px;
max-height: 200px;
overflow-x: hidden;
}
.ol-popup-closer {
position: absolute;
top: 2px;
right: 2px;
padding: 0 4px;
color: #cccccc;
text-decoration: none;
font-weight: bold;
}
.ol-popup-closer:after {
content: "x";
}
/* Hide templates container */
.template-container {
display: none;
}
/* Definitions below styles the content
* elements.
*/
.ol-popup-content .detail {
width: 450px;
}
.ol-popup-content .overview {
width: 350px;
max-height: 200px;
}
.ol-popup-content div {
clear: both;
}
.ol-popup-content h4,
.ol-popup-content h5 {
color: #ef8214;
font-weight: 400;
margin-bottom: 9px;
margin-top: 0px;
}
.ol-popup-content h5 {
margin-top: 4px;
margin-bottom: 3px;
}
.ol-popup-content p,
.ol-popup-content i,
.ol-popup-content span,
.ol-popup-content .contact div,
.ol-popup-content a {
font-size: 11px;
line-height: 17px;
}
.ol-popup-content p {
color: #464646;
}
.ol-popup-content a,
.ol-popup-content a:visited
.ol-popup-content a:hover {
color: #ef8214;
text-decoration: none;
display: block;
}
.ol-popup-content img {
float: left;
margin-right: 20px;
border: 1px solid #cccccc;
}
.ol-popup-content .contact {
display: inline-block;
}
.ol-popup-content .overview img {
margin-bottom: 10px;
}
.ol-popup-content .overview > div > div:last-of-type > img {
margin-bottom: 0;
}
.detail-info {
cursor: pointer;
}
.ol-popup-content .detail div.phone-container,
.ol-popup-content .detail div.fax-container {
display: inline-block;
}
.ol-popup-content .detail .contact {
width: 260px;
}
@media (max-width: 575px) {
.ol-popup {
width: 330px;
left: -25px;
padding: 10px;
}
.ol-popup::before {
left: 24px;
}
.ol-popup::after {
left: 24px;
}
.ol-popup-closer {
font-size: 10px;
}
.ol-popup-content h4 {
font-size: 10px;
margin-bottom: 0;
}
.ol-popup-content h5 {
font-size: 9px;
margin-bottom: 0;
}
.ol-popup-content p {
margin-bottom: 5px;
}
.ol-popup-content p,
.ol-popup-content i,
.ol-popup-content span,
.ol-popup-content .contact div,
.ol-popup-content a {
font-size: 9px;
line-height: 12px;
}
.ol-popup-content .detail a {
margin-top: 2px;
}
.ol-popup-content img {
margin-right: 10px;
}
.ol-popup-content .detail .contact {
width: 180px;
line-height: 12px;
}
.ol-popup-content .overview h5,
.ol-popup-content .overview .contact div {
margin-bottom: 7px;
}
.ol-popup-content .detail .contact div {
display: inline-block;
}
.ol-popup-content .detail div.phone-container,
.ol-popup-content .detail div.fax-container {
display: block;
}
.ol-popup-content .overview h5 {
font-size: 10px;
}
.ol-popup-content .detail .image {
width: 120px;
height: auto;
}
.ol-popup-content .logo {
height: 12px;
bottom: 34px;
right: 20px;
}
}
.map {
height: 400px;
font-family: "HelveticaNeue", "Helvetica";
}
</style>
<html>
<head>
<link rel='stylesheet' href='https://www.mapz.com/api/css/ol/7.3.0/ol.css' />
<script src='https://www.mapz.com/api/javascript/lib/7.3.0/ol.js' type='text/javascript'></script>
<style>
.ol-popup {
display: none;
position: absolute;
background-color: white;
padding: 15px 25px 15px 15px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-content {
min-width: 170px;
max-height: 200px;
overflow-x: hidden;
}
.ol-popup-closer {
position: absolute;
top: 2px;
right: 2px;
padding: 0 4px;
color: #cccccc;
text-decoration: none;
font-weight: bold;
}
.ol-popup-closer:after {
content: "x";
}
/* Hide templates container */
.template-container {
display: none;
}
/* Definitions below styles the content
* elements.
*/
.ol-popup-content .detail {
width: 450px;
}
.ol-popup-content .overview {
width: 350px;
max-height: 200px;
}
.ol-popup-content div {
clear: both;
}
.ol-popup-content h4,
.ol-popup-content h5 {
color: #ef8214;
font-weight: 400;
margin-bottom: 9px;
margin-top: 0px;
}
.ol-popup-content h5 {
margin-top: 4px;
margin-bottom: 3px;
}
.ol-popup-content p,
.ol-popup-content i,
.ol-popup-content span,
.ol-popup-content .contact div,
.ol-popup-content a {
font-size: 11px;
line-height: 17px;
}
.ol-popup-content p {
color: #464646;
}
.ol-popup-content a,
.ol-popup-content a:visited
.ol-popup-content a:hover {
color: #ef8214;
text-decoration: none;
display: block;
}
.ol-popup-content img {
float: left;
margin-right: 20px;
border: 1px solid #cccccc;
}
.ol-popup-content .contact {
display: inline-block;
}
.ol-popup-content .overview img {
margin-bottom: 10px;
}
.ol-popup-content .overview > div > div:last-of-type > img {
margin-bottom: 0;
}
.detail-info {
cursor: pointer;
}
.ol-popup-content .detail div.phone-container,
.ol-popup-content .detail div.fax-container {
display: inline-block;
}
.ol-popup-content .detail .contact {
width: 260px;
}
@media (max-width: 575px) {
.ol-popup {
width: 330px;
left: -25px;
padding: 10px;
}
.ol-popup::before {
left: 24px;
}
.ol-popup::after {
left: 24px;
}
.ol-popup-closer {
font-size: 10px;
}
.ol-popup-content h4 {
font-size: 10px;
margin-bottom: 0;
}
.ol-popup-content h5 {
font-size: 9px;
margin-bottom: 0;
}
.ol-popup-content p {
margin-bottom: 5px;
}
.ol-popup-content p,
.ol-popup-content i,
.ol-popup-content span,
.ol-popup-content .contact div,
.ol-popup-content a {
font-size: 9px;
line-height: 12px;
}
.ol-popup-content .detail a {
margin-top: 2px;
}
.ol-popup-content img {
margin-right: 10px;
}
.ol-popup-content .detail .contact {
width: 180px;
line-height: 12px;
}
.ol-popup-content .overview h5,
.ol-popup-content .overview .contact div {
margin-bottom: 7px;
}
.ol-popup-content .detail .contact div {
display: inline-block;
}
.ol-popup-content .detail div.phone-container,
.ol-popup-content .detail div.fax-container {
display: block;
}
.ol-popup-content .overview h5 {
font-size: 10px;
}
.ol-popup-content .detail .image {
width: 120px;
height: auto;
}
.ol-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>
<div class="template-container">
<div class="detail-template">
<img class="image" height="190px" width="160px"/>
<h4 class="name"></h4>
<div class="contact">
<div>
<i>Red Wines:</i>
<span class="red-wines"></span>
</div>
<div>
<i>White Wines:</i>
<span class="white-wines"></span>
</div>
<h5>Contact</h5>
<div class="address"></div>
<div class="phone-container">
Telephon:
<span class="phone">
</span>
</div>
<div class="fax-container">
Telefax:
<span class="fax">
</span>
</div>
<a class="email"></a>
<a class="homepage"></a>
</div>
</div>
<div class="overview-template">
<img class="image" height="71px" width="71px"/>
<h5 class="name"></h5>
<div class="contact">
<div>
<span class="address"></span>
</div>
<div>
<span>Telephon:</span>
<span class="phone"></span>
<span>Telefax:</span>
<span class="fax"></span>
</div>
<a class="detail-info">
Detailed information
</a>
</div>
</div>
</div>
<script>
// Create background layer
const baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: ['© 2023 <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'
})
});
// Create a vector layer with clustring source and add a styling
const clusters = new ol.layer.Vector({
// Wrap vector source in cluster source
source: new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector({
url: "https://www.mapz.com/api/data/winegrowers.geojson",
format: new ol.format.GeoJSON()
})
}),
// Define cluster style
style: function(feature, resolution) {
const size = feature.get('features').length;
if (size === 1) {
// Clustered features containing only one feature
// are treated as normal features
return [new ol.style.Style({
image: new ol.style.Icon({
src: 'https://www.mapz.com/api/images/wine.svg',
// Set imgSize to fix IE11-Bug
imgSize: [51.625, 72.039436],
scale: 0.5
})
})];
}
// Otherweise display number of clustered features
// in the icon
return [new ol.style.Style({
geometry: feature.getGeometry(),
image: new ol.style.Icon({
src: 'https://www.mapz.com/api/images/cluster_marker.svg',
// Set imgSize to fix IE11-Bug
imgSize: [51.613998, 72.042],
scale: 0.5
}),
text: new ol.style.Text({
text: size.toString(),
textAlign: 'center',
textBaseline: 'middle',
offsetX: 0,
offsetY: -5,
rotation: 0,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#CCCCCC'
})
})
})];
}
});
const detailTemplate = document.querySelector(
'.template-container .detail-template'
);
const overviewTemplate = document.querySelector(
'.template-container .overview-template'
);
const popupOverlay = new ol.mapz.Popup();
const map = new ol.Map({
logo: false,
target: document.getElementById('map'),
layers: [
baseLayer,
clusters
],
overlays: [popupOverlay],
view: new ol.View({
center: [0, 0],
zoom: 0,
maxZoom: 18
})
});
map.getView().fit(ol.proj.transformExtent(
[
7.826752725294061, 49.35609299283519,
8.517372767725169, 49.632138620987405
],
'EPSG:4326', 'EPSG:3857'
));
map.on('click', function (evt) {
// When clicked in map, look for a feature
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
// Show the popup
if (feature) {
const features = feature.get('features');
showPopUp(features);
// Hide the popup
} else {
popupOverlay.hide();
}
});
// change mouse cursor when over marker
map.on('pointermove', function(e) {
const pixel = map.getEventPixel(e.originalEvent);
map.getTarget().style.cursor = map.hasFeatureAtPixel(pixel) ? 'pointer' : '';
});
function showPopUp(features) {
let content;
// For 1 feature, show the detail popup
if (features.length === 1) {
content = createDetailPopup(features[0]);
}
// Otherwise show the overview popup
else {
content = createOverviewPopup(features);
}
const popupContent = popupOverlay.show(
features[0].getGeometry().getCoordinates(),
content.innerHTML
);
// add container as javascript object to get click events
popupContent.innerHTML = '';
popupContent.appendChild(content);
}
const imageBaseUrl = 'https://www.mapz.com/api/images/winegrowers';
function createOverviewPopup(features) {
// Create a container
const container = document.createElement('div');
container.className = 'overview';
features.forEach(function (feature) {
// Clone the template
const overview = overviewTemplate.cloneNode(true);
// Get feature properties
const name = feature.get('name');
const imageName = feature.get('imageName') + '_preview.png';
const contact = feature.get('contact');
// Fill the template
overview.querySelector('.image').src = imageBaseUrl + '/' + imageName;
overview.querySelector('.name').innerHTML = name;
overview.querySelector('.address').innerHTML = contact.address;
overview.querySelector('.phone').innerHTML = contact.phone;
overview.querySelector('.fax').innerHTML = contact.fax;
container.append(overview);
overview.querySelector('.detail-info').onclick = function () {
map.once('moveend', function () {
showPopUp([feature]);
});
map.getView().setCenter(feature.getGeometry().getCoordinates());
map.getView().setZoom(16);
};
});
const wrapper = document.createElement('div');
wrapper.append(container);
return wrapper;
}
function createDetailPopup(feature) {
// Clone the template
const details = detailTemplate.cloneNode(true);
details.className = 'detail';
// Get feature properties
const name = feature.get('name');
const imageName = feature.get('imageName') + '.png';
const redWines = feature.get('redWines');
const whiteWines = feature.get('whiteWines');
const contact = feature.get('contact');
// Fill the template
details.querySelector('.image').src = imageBaseUrl + '/' + imageName;
details.querySelector('.name').innerHTML = name;
details.querySelector('.red-wines').innerHTML = redWines;
details.querySelector('.white-wines').innerHTML = whiteWines;
details.querySelector('.address').innerHTML = contact.address;
details.querySelector('.phone').innerHTML = contact.phone;
details.querySelector('.fax').innerHTML = contact.fax;
details.querySelector('.email').href = 'mailto:' + contact.email;
details.querySelector('.email').innerHTML = contact.email;
details.querySelector('.homepage').href = 'http://' + contact.homepage;
details.querySelector('.homepage').innerHTML = contact.homepage;
const wrapper = document.createElement('div');
wrapper.append(details);
return wrapper;
}
</script>
</body>
</html>
<style>
:root,
:host {
--ol-background-color: white;
--ol-accent-background-color: #F5F5F5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);
--ol-partial-background-color: rgba(255, 255, 255, 0.75);
--ol-foreground-color: #333333;
--ol-subtle-foreground-color: #666666;
--ol-brand-color: #00AAFF;
}
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 1.5px solid var(--ol-background-color);
background-color: var(--ol-partial-background-color);
}
.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
}
.ol-scale-line {
background: var(--ol-partial-background-color);
border-radius: 4px;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
}
.ol-scale-line-inner {
border: 1px solid var(--ol-subtle-foreground-color);
border-top: none;
color: var(--ol-foreground-color);
font-size: 10px;
text-align: center;
margin: 1px;
will-change: contents, width;
transition: all 0.25s;
}
.ol-scale-bar {
position: absolute;
bottom: 8px;
left: 8px;
}
.ol-scale-bar-inner {
display: flex;
}
.ol-scale-step-marker {
width: 1px;
height: 15px;
background-color: var(--ol-foreground-color);
float: right;
z-index: 10;
}
.ol-scale-step-text {
position: absolute;
bottom: -5px;
font-size: 10px;
z-index: 11;
color: var(--ol-foreground-color);
text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}
.ol-scale-text {
position: absolute;
font-size: 12px;
text-align: center;
bottom: 25px;
color: var(--ol-foreground-color);
text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}
.ol-scale-singlebar {
position: relative;
height: 10px;
z-index: 9;
box-sizing: border-box;
border: 1px solid var(--ol-foreground-color);
}
.ol-scale-singlebar-even {
background-color: var(--ol-subtle-foreground-color);
}
.ol-scale-singlebar-odd {
background-color: var(--ol-background-color);
}
.ol-unsupported {
display: none;
}
.ol-viewport,
.ol-unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.ol-viewport canvas {
all: unset;
}
.ol-selectable {
-webkit-touch-callout: default;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.ol-grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
.ol-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.ol-control {
position: absolute;
background-color: var(--ol-subtle-background-color);
border-radius: 4px;
}
.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;
}
.ol-control button {
display: block;
margin: 1px;
padding: 0;
color: var(--ol-subtle-foreground-color);
font-weight: bold;
text-decoration: none;
font-size: inherit;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
background-color: var(--ol-background-color);
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;
will-change: transform;
}
.ol-touch .ol-control button {
font-size: 1.5em;
}
.ol-touch .ol-zoom-extent {
top: 5.5em;
}
.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
outline: 1px solid var(--ol-subtle-foreground-color);
color: var(--ol-foreground-color);
}
.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);
display: flex;
flex-flow: row-reverse;
align-items: center;
}
.ol-attribution a {
color: var(--ol-subtle-foreground-color);
text-decoration: none;
}
.ol-attribution ul {
margin: 0;
padding: 1px .5em;
color: var(--ol-foreground-color);
text-shadow: 0 0 2px var(--ol-background-color);
font-size: 12px;
}
.ol-attribution li {
display: inline;
list-style: none;
}
.ol-attribution li:not(:last-child):after {
content: " ";
}
.ol-attribution img {
max-height: 2em;
max-width: inherit;
vertical-align: middle;
}
.ol-attribution button {
flex-shrink: 0;
}
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution:not(.ol-collapsed) {
background: var(--ol-partial-background-color);
}
.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-uncollapsible button {
display: none;
}
.ol-zoomslider {
top: 4.5em;
left: .5em;
height: 200px;
}
.ol-zoomslider button {
position: relative;
height: 10px;
}
.ol-touch .ol-zoomslider {
top: 5.5em;
}
.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: block;
}
.ol-overviewmap .ol-overviewmap-map {
border: 1px solid var(--ol-subtle-foreground-color);
height: 150px;
width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button {
bottom: 0;
left: 0;
position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
background: var(--ol-subtle-background-color);
}
.ol-overviewmap-box {
border: 1.5px dotted var(--ol-subtle-foreground-color);
}
.ol-overviewmap .ol-overviewmap-box:hover {
cursor: move;
}
/* mapz */
/* mapz style for controls */
.ol-control,
.ol-control:hover,
.ol-control:focus {
border-radius: 2px;
background-color: inherit;
}
.ol-control button,
.ol-control button:hover,
.ol-control button:focus {
background-color: rgba(39, 44, 49, 0.9);
color: white;
}
/* 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 > li {
font-size: 11px;
}
.ol-attribution:not(.ol-collapsed) > ul > li > a {
color: #464646;
font-weight: 600;
}
.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 {
padding: 0;
}
/* ol.mapz.control.Filesearch */
[hidden] {
display: none!important;
}
.mapz-control-search {
margin: 8px;
width: 40%;
min-width: 25em;
position: inherit;
}
.aa-Form {
display: flex;
}
.aa-InputWrapperPrefix {
display: none;
}
.aa-InputWrapper {
position: relative;
width: 100%;
}
.aa-Input {
border: 0;
font: inherit;
height: 2em;
padding: 0;
width: 100%;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
color: rgb(70, 70, 70);
padding: 0 0.5em;
background: white;
}
.aa-Input:focus {
border-color: none;
box-shadow: none;
outline: none;
}
.aa-Input::-webkit-search-decoration,
.aa-Input::-webkit-search-cancel-button,
.aa-Input::-webkit-search-results-button,
.aa-Input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
}
.aa-InputWrapperSuffix {
align-items: center;
display: flex;
height: 2em;
}
.aa-InputWrapperSuffix .aa-ClearButton {
margin: 0 0 0 8px;
}
.aa-InputWrapperSuffix .aa-ClearButton .aa-ClearIcon {
fill: white;
}
.aa-Panel {
margin: 8px 0 0 0;
background: white;
}
.aa-PanelLayout {
height: 100%;
margin: 0;
overflow-y: auto;
padding: 8px;
position: relative;
text-align: left;
}
.aa-Panel--scrollable {
margin: 0;
max-height: 30vh;
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: white #eaeaea;
scrollbar-width: thin;
}
.aa-List {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.aa-Item {
cursor: pointer;
padding: 0.2em;
}
/* ol.mapz.control.Geolocate */
.mapz-control-geolocate {
top: 4em;
left: 0.5em;
}
button.mapz-control-geolocate-button {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjM2OCwxOS4xMDJjMC4zNDksMS4wNDksMS4wMTEsMS4wODYsMS40NzgsMC4wODZsNS4zMDktMTEuMzc1YzAuNDY3LTEuMDAyLDAuMDM0LTEuNDM0LTAuOTY3LTAuOTY3TDQuODEyLDEyLjE1NCAgIGMtMS4wMDEsMC40NjctMC45NjMsMS4xMjksMC4wODUsMS40NzlMOSwxNUwxMC4zNjgsMTkuMTAyeiIvPjwvZz48L3N2Zz4=');
background-size: 1.375em;
}
/* ol.mapz.controls.GeoTracker */
.mapz-control-geotracker {
top: 4em;
left: 0.5em;
}
button.mapz-control-geotracker-button {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjM2OCwxOS4xMDJjMC4zNDksMS4wNDksMS4wMTEsMS4wODYsMS40NzgsMC4wODZsNS4zMDktMTEuMzc1YzAuNDY3LTEuMDAyLDAuMDM0LTEuNDM0LTAuOTY3LTAuOTY3TDQuODEyLDEyLjE1NCAgIGMtMS4wMDEsMC40NjctMC45NjMsMS4xMjksMC4wODUsMS40NzlMOSwxNUwxMC4zNjgsMTkuMTAyeiIvPjwvZz48L3N2Zz4=');
background-size: 1.375em;
}
/* ol.mapz.control.LayerSwitcher */
.mapz-control-layerswitcher,
.mapz-control-layerswitcher:hover {
top: 0.5em;
right: 0.5em;
text-align: left;
padding: 0;
background-color: rgba(39, 44, 49, 0.9);
}
.mapz-control-layerswitcher .heading-container {
display: flex;
}
.mapz-control-layerswitcher .heading-container .title {
color: white;
font-size: 0.9em;
font-weight: bold;
display: inline-flex;
align-items: center;
padding: 0.5em 1em;
width: 100%;
}
.mapz-control-layerswitcher .heading-container .title.closed {
display: none;
}
.mapz-control-layerswitcher .heading-container .toggle-button,
.mapz-control-layerswitcher .heading-container .toggle-button:hover {
color: white;
background-color: transparent;
flex-shrink: 0;
}
.mapz-control-layerswitcher .heading-container .toggle-button::before {
content: 'x';
}
.mapz-control-layerswitcher .heading-container .toggle-button.closed::before {
content: unset;
}
.mapz-control-layerswitcher .heading-container .toggle-button.closed {
display: block;
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0id2hpdGUiPjxwYXRoIHBvaW50cz0iNDgwIDE1MCAyNTYgNDggMzIgMTUwIDI1NiAyNTQgNDgwIDE1MCIgZD0iTTIwLjYyNSA2LjQ0NUwxMSAyLjA2M0wxLjM3NSA2LjQ0NUwxMSAxMC45MTRMMjAuNjI1IDYuNDQ1WiIvPjxwYXRoIHBvaW50cz0iMjU1LjcxIDM5Mi45NSAxMTAuOSAzMjYuNzUgMzIgMzYyIDI1NiA0NjQgNDgwIDM2MiA0MDEuMzEgMzI2LjcgMjU1LjcxIDM5Mi45NSIgZD0iTTEwLjk4OCAxNi44ODVMNC43NjUgMTQuMDRMMS4zNzUgMTUuNTU1TDExIDE5LjkzOEwyMC42MjUgMTUuNTU1TDE3LjI0NCAxNC4wMzhMMTAuOTg4IDE2Ljg4NVoiLz48cGF0aCBkPSJNMjAuNjI1IDExbC0zLjI0NSAtMS40NDFMMTEuMDA0IDEyLjQ4NyA0LjYxMiA5LjU1OCAxLjM3NSAxMSAxMSAxNS4zODMgMjAuNjI1IDExUzIwLjYyNSAxMSAyMC42MjUgMTFaIi8+PC9zdmc+');
background-color: rgba(39, 44, 49, 0.9);
}
.mapz-control-layerswitcher .layers-container {
margin-top: 0px;
padding: 0.5em 0.75em 0.5em 0.75em;
-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 .layers-container.closed {
display: none;
}
.mapz-control-layerswitcher input {
margin: 0.2em 0.7em 0.2em 0;
font-size: 0.75em;
cursor: pointer;
vertical-align: middle;
}
.mapz-control-layerswitcher label {
cursor: pointer;
}
.mapz-control-layerswitcher span {
color: white;
font-weight: bold;
font-size: 0.75em;
}
/* ol.mapz.control.Search */
.mapz-control-search {
margin: 8px;
width: 40%;
}
.mapz-control-search input {
border: 0;
font: inherit;
height: 2em;
padding: 0;
width: 100%;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
color: rgb(70, 70, 70);
padding: 0 0.5em;
background: white;
}
.mapz-control-search input:focus {
border-color: none;
box-shadow: none;
outline: none;
}
.search-input-container.nominatim {
display: flex;
}
.mapz-control-search .search-suffix-container {
align-items: center;
display: flex;
height: 2em;
}
.mapz-control-search .search-suffix-container .clear-button {
margin: 0 0 0 8px;
}
.search-input-container .search-suffix-container .requesting {
background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
background-position: center;
background-color: rgba(39, 44, 49, 0.9);
margin: 0 0 0 8px;
width: 1.375em;
height: 1.375em;
}
.search-input-container .search-suffix-container .clear-button {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZD0iTTUuMjkzIDYuNzA3bDUuMjkzIDUuMjkzLTUuMjkzIDUuMjkzYy0wLjM5MSAwLjM5MS0wLjM5MSAxLjAyNCAwIDEuNDE0czEuMDI0IDAuMzkxIDEuNDE0IDBsNS4yOTMtNS4yOTMgNS4yOTMgNS4yOTNjMC4zOTEgMC4zOTEgMS4wMjQgMC4zOTEgMS40MTQgMHMwLjM5MS0xLjAyNCAwLTEuNDE0bC01LjI5My01LjI5MyA1LjI5My01LjI5M2MwLjM5MS0wLjM5MSAwLjM5MS0xLjAyNCAwLTEuNDE0cy0xLjAyNC0wLjM5MS0xLjQxNCAwbC01LjI5MyA1LjI5My01LjI5My01LjI5M2MtMC4zOTEtMC4zOTEtMS4wMjQtMC4zOTEtMS40MTQgMHMtMC4zOTEgMS4wMjQgMCAxLjQxNHoiLz48L2c+PC9zdmc+');
background-position: center;
}
.mapz-control-search .search-results {
margin-top: 0.3em;
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: 30vh;
overflow-y: auto;
padding: 5px 5px;
width: 95%;
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: 16px;
}
.search-results div span.name,
.search-results div span.description {
display: block;
}
.search-results div:hover {
background-color: #f2f2f2;
border-radius: 4px;
}
.search-results div.no-results,
.search-results div.no-results:hover {
border: 0;
}
/* ol.mapz.control.Modal */
.mapz-control-modal,
.mapz-control-modal:focus,
.mapz-control-modal:hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0.5);
}
.mapz-control-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(254, 254, 254, 0.9);
border: 1px solid #d9d9d9;
border-radius: 8px;
box-shadow: 0 2px 8px 0 rgba(169, 169, 169, 0.5);
padding: 30px 30px;
width: 50%;
min-height: 30%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.mapz-control-modal-message {
text-align: center;
}
</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