Skip to content
leaflet JS + openstreetmap
custom map with one pin:
<style>
/* Ensure the map has a proper height */
#map {
height: 100%;
width: 100%;
}
/* Customize Leaflet popup styles */
.leaflet-popup-tip,
.leaflet-popup-content-wrapper {
background: var(--base-color-brand--light-orange) !important;
}
</style>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const lat = 41.1698714, lng = -96.0944888;
const infoWindowContent = "<h2 style='font-size:18px; margin:0; color:#0044cc;'>A place where <br> your dog will be <br> happy is here</h2><p></p>";
const map = L.map('map').setView([lat, lng], 15);
// Blue map tile layer from Carto
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://carto.com/">CARTO</a>',
subdomains: 'abcd'
}).addTo(map);
// Custom blue marker icon
const blueMarker = L.icon({
iconUrl: 'https://cdn.prod.website-files.com/67d5b44607369b75b7f3660a/67d749612a9764c6d4036de8_pointer.png', // Blue pin icon
iconSize: [40, 40],
iconAnchor: [40, 40],
popupAnchor: [0, -35]
});
L.marker([lat, lng], { icon: blueMarker })
.addTo(map)
.bindPopup(infoWindowContent)
.openPopup();
// Shift location only if screen width is greater than 710px
if (window.innerWidth > 710) {
const mapSize = map.getSize();
const shiftX = mapSize.x * 0.3;
const shiftY = -mapSize.y * 0.1;
map.panBy([shiftX, shiftY]);
} else {
// Small screens: Down 30% only
const shiftY = -mapSize.y * 0.3;
map.panBy([0, shiftY]);
}
});
</script>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.