Ergänzen Sie Ihr Cluster um eine Callout-Box mit Informationen zu den Standorten.
<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>Rotweine:</i>
<span class="red-wines"></span>
</div>
<div>
<i>Weißweine:</i>
<span class="white-wines"></span>
</div>
<h5>Kontakt</h5>
<div class="address"></div>
<div class="phone-container">
Telefon:
<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>Telefon:</span>
<span class="phone"></span>
<span>Telefax:</span>
<span class="fax"></span>
</div>
<a class="detail-info">
Detail-Informationen
</a>
</div>
</div>
</div>
</body>
<script>
// Create background layer
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [new ol.Attribution({
html: '© 2019 <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
var 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/static/data/winegrowers.geojson",
format: new ol.format.GeoJSON()
})
}),
// Define cluster style
style: function(feature, resolution) {
var 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/static/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/static/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: -4,
rotation: 0,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#CCCCCC'
})
})
})];
}
});
var detailTemplate = $('.template-container .detail-template');
var overviewTemplate = $('.template-container .overview-template');
var popupOverlay = new ol.Overlay.Popup();
var 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(
[
8.15072930290222, 49.3761328277921,
8.18735018650818, 49.611902
],
'EPSG:4326', 'EPSG:3857'
), map.getSize());
function showPopUp(features) {
var 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);
}
var popupContent = popupOverlay.show(features[0].getGeometry().getCoordinates(), content.html());
// add container as javascript object to get click events
$(popupContent).empty().append(content);
}
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) {
var features = feature.get('features');
showPopUp(features);
// Hide the popup
} else {
popupOverlay.hide();
}
});
// change mouse cursor when over marker
map.on('pointermove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
var imageBaseUrl = 'https://www.mapz.com/api/static/images/winegrowers';
var createOverviewPopup = function(features) {
// Create a container
var container = $('<div></div>');
container.addClass('overview');
features.forEach(function(feature) {
// Clone the template
var overview = overviewTemplate.clone();
// Get feature properties
var name = feature.get('name');
var imageName = feature.get('imageName') + '_preview.png';
var contact = feature.get('contact');
// Fill the tempalte
overview.find('.image')
.attr('src', imageBaseUrl + '/' + imageName);
overview.find('.name')
.text(name);
overview.find('.address')
.text(contact.address);
overview.find('.phone')
.text(contact.phone);
overview.find('.fax')
.text(contact.fax);
overview.find('.detail-info')
.data('coordinates', feature.get('geometry').getCoordinates());
container.append(overview);
overview.find('.detail-info').click(function() {
map.once('moveend', function() {
showPopUp([feature]);
});
var coordinates = $(this).data('coordinates');
map.getView().setCenter(coordinates);
map.getView().setZoom(16);
})
});
var wrapper = $('<div></div>');
wrapper.append(container);
return wrapper;
};
var createDetailPopup = function(feature) {
// Clone the template
var details = detailTemplate.clone();
details.addClass('detail');
// Get feature properties
var name = feature.get('name');
var imageName = feature.get('imageName') + '.png';
var redWines = feature.get('redWines');
var whiteWines = feature.get('whiteWines');
var contact = feature.get('contact');
// Fill the tempalte
details.find('.image')
.attr('src', imageBaseUrl + '/' + imageName);
details.find('.name')
.text(name);
details.find('.red-wines')
.text(redWines);
details.find('.white-wines')
.text(whiteWines);
details.find('.address')
.text(contact.address);
details.find('.phone')
.text(contact.phone);
details.find('.fax')
.text(contact.fax);
details.find('.email')
.attr('href', 'mailto:' + contact.email)
.text(contact.email);
details.find('.homepage')
.attr('href', 'http://' + contact.homepage)
.text(contact.homepage);
var wrapper = $('<div></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/static/css/ol.css' />
<script src='https://www.mapz.com/api/static/javascript/lib/3.15.1/openlayers.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.11.0.min.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>Rotweine:</i>
<span class="red-wines"></span>
</div>
<div>
<i>Weißweine:</i>
<span class="white-wines"></span>
</div>
<h5>Kontakt</h5>
<div class="address"></div>
<div class="phone-container">
Telefon:
<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>Telefon:</span>
<span class="phone"></span>
<span>Telefax:</span>
<span class="fax"></span>
</div>
<a class="detail-info">
Detail-Informationen
</a>
</div>
</div>
</div>
<script>
// Create background layer
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [new ol.Attribution({
html: '© 2019 <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
var 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/static/data/winegrowers.geojson",
format: new ol.format.GeoJSON()
})
}),
// Define cluster style
style: function(feature, resolution) {
var 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/static/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/static/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: -4,
rotation: 0,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#CCCCCC'
})
})
})];
}
});
var detailTemplate = $('.template-container .detail-template');
var overviewTemplate = $('.template-container .overview-template');
var popupOverlay = new ol.Overlay.Popup();
var 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(
[
8.15072930290222, 49.3761328277921,
8.18735018650818, 49.611902
],
'EPSG:4326', 'EPSG:3857'
), map.getSize());
function showPopUp(features) {
var 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);
}
var popupContent = popupOverlay.show(features[0].getGeometry().getCoordinates(), content.html());
// add container as javascript object to get click events
$(popupContent).empty().append(content);
}
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) {
var features = feature.get('features');
showPopUp(features);
// Hide the popup
} else {
popupOverlay.hide();
}
});
// change mouse cursor when over marker
map.on('pointermove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
var imageBaseUrl = 'https://www.mapz.com/api/static/images/winegrowers';
var createOverviewPopup = function(features) {
// Create a container
var container = $('<div></div>');
container.addClass('overview');
features.forEach(function(feature) {
// Clone the template
var overview = overviewTemplate.clone();
// Get feature properties
var name = feature.get('name');
var imageName = feature.get('imageName') + '_preview.png';
var contact = feature.get('contact');
// Fill the tempalte
overview.find('.image')
.attr('src', imageBaseUrl + '/' + imageName);
overview.find('.name')
.text(name);
overview.find('.address')
.text(contact.address);
overview.find('.phone')
.text(contact.phone);
overview.find('.fax')
.text(contact.fax);
overview.find('.detail-info')
.data('coordinates', feature.get('geometry').getCoordinates());
container.append(overview);
overview.find('.detail-info').click(function() {
map.once('moveend', function() {
showPopUp([feature]);
});
var coordinates = $(this).data('coordinates');
map.getView().setCenter(coordinates);
map.getView().setZoom(16);
})
});
var wrapper = $('<div></div>');
wrapper.append(container);
return wrapper;
};
var createDetailPopup = function(feature) {
// Clone the template
var details = detailTemplate.clone();
details.addClass('detail');
// Get feature properties
var name = feature.get('name');
var imageName = feature.get('imageName') + '.png';
var redWines = feature.get('redWines');
var whiteWines = feature.get('whiteWines');
var contact = feature.get('contact');
// Fill the tempalte
details.find('.image')
.attr('src', imageBaseUrl + '/' + imageName);
details.find('.name')
.text(name);
details.find('.red-wines')
.text(redWines);
details.find('.white-wines')
.text(whiteWines);
details.find('.address')
.text(contact.address);
details.find('.phone')
.text(contact.phone);
details.find('.fax')
.text(contact.fax);
details.find('.email')
.attr('href', 'mailto:' + contact.email)
.text(contact.email);
details.find('.homepage')
.attr('href', 'http://' + contact.homepage)
.text(contact.homepage);
var wrapper = $('<div></div>');
wrapper.append(details);
return wrapper;
};
</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>
Hier können Sie Ihre Emailadresse und Ihr Passwort auf den letzten Stand bringen. Falls Sie Ihre Adressdaten aktualisieren möchten, so wird Ihnen diese Möglichkeit während Ihres nächsten Downloads angeboten.
Hier können Sie die Sprache einstellen in der Ihnen mapz.com angezeigt wird.
Sollen die Karteninhalte dynamisch an das von Ihnen gewählte Papierformat angepasst werden oder wollen Sie genau das Kartenbild herunterladen, das im Karteneditor für Ihren Ziel-Zoomlevel angezeigt wird?
Sie können Ihren Zugang hier stilllegen. Ihr Zugang wird damit deaktiviert und Sie werden keine weiteren Nachrichten von uns erhalten.
Account deaktivieren