Loading...
OpenStreetMap is a map of the world, created by people like you and free to use under an open license.
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<div id="map"></div>/*change title font-size*/
#map { height: 380px; }
.leaflet-popup-content {
font-size:2em;
}
/*greyscale colour*/
.leaflet-tile-pane {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
} var map = L.map('map', {
//deactivate zoom control & function
doubleClickZoom: false,
closePopupOnClick: false,
dragging: false,
zoomSnap: false,
zoomDelta: false,
trackResize: false,
touchZoom: false,
scrollWheelZoom: false,
zoomControl:false,
});
map.setView([52.38098655157829, 9.74830265476368], 15);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//add pin
const redIcon = new L.Icon({
iconUrl:
"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
shadowUrl:
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
L.marker([52.38098655157829, 9.74830265476368],{
icon: redIcon,
tileSize: 512,
//add title
}).addTo(map)
.bindPopup('AUDITA Treuhand GmbH & Co. KG')
.openPopup();