debianforum.de - Eintrag ansehen

NoPaste

Karte

von uname

SNIPPET_TEXT:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Karte</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<style>
body, html, #map {
height: 100%;
margin: 0;
padding: 0;
}
.custom-popup .leaflet-popup-content-wrapper {
background: #fff;
color: #333;
font-size: 14px;
line-height: 24px;
border-radius: 5px;
padding: 10px;
text-align: center;
max-width: 250px;
}
.custom-popup .leaflet-popup-content {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.crosshair-icon {
display: block;
margin: auto;
width: 24px;
height: 24px;
}
.popup-button {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
text-decoration: none;
color: #333;
font-weight: bold;
text-align: center;
transition: background-color 0.3s;
background-color: #fff;
border: 1px solid #ccc;
font-size: 12px;
}
.actions {
display: flex;
justify-content: center;
}
.locate-button {
background: white;
padding: 5px;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.number-icon {
background-color: #3388ff;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 4px 8px;
white-space: nowrap;
min-width: 80px;
max-width: 120px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
.popup-content h3 {
margin: 0 0 10px 0;
font-size: 16px;
text-align: center;
}
.popup-content .actions {
display: flex;
justify-content: center;
gap: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-polylinedecorator@1.6.0/dist/leaflet.polylineDecorator.js"></script>
<script>
const locations = [
{ id: "01 Nationalpark Haus Baltrum", latlon: "53.7261269,7.367696" },
{ id: "02 Igelhütte", latlon: "53.7287549,7.40876823" },
{ id: "03 Westbake Baltrum", latlon: "53.7278049,7.36136" },
];
function getMapLink(latlon, zoom = 18) {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
return `geo:${latlon}?z=${zoom}`;
} else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return `comgooglemaps://?center=${latlon}&zoom=${zoom}`;
} else {
return `https://maps.google.com/maps?q=${latlon}&z=${zoom}`;
}
}
function isMobile() {
return /Mobi|Android/i.test(navigator.userAgent);
}
function truncateText(text, maxLength = 20) {
if (text.length <= maxLength) {
return text;
}
return text.slice(0, maxLength - 3) + "...";
}
const map = L.map("map");
const osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: "© OpenStreetMap",
}).addTo(map);
const esriLayer = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
maxZoom: 20,
attribution: "Tiles © Esri",
});
L.control.layers({ OSM: osmLayer, "Esri Satellite": esriLayer }).addTo(map);
const bounds = L.latLngBounds();
const latLngs = [];
locations.forEach(function (location) {
const [lat, lon] = location.latlon.split(",").map(parseFloat);
latLngs.push([lat, lon]);
const popupContent = `
<div class="popup-content">
<h3>${location.id}</h3>
<div class="actions">
<a href="${getMapLink(location.latlon)}" target="_blank" class="popup-button">
<svg viewBox="0 0 24 24" class="crosshair-icon">
<path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
</svg>
</a>
</div>
</div>
`;
L.marker([lat, lon], {
icon: L.divIcon({
className: "number-icon",
html: truncateText(location.id),
iconSize: [Math.max(80, location.id.length * 8), 30],
iconAnchor: [Math.max(40, location.id.length * 4) / 2, 15],
}),
})
.addTo(map)
.bindPopup(L.popup({
maxWidth: 300,
closeButton: true,
className: "custom-popup"
}).setContent(popupContent));
bounds.extend([lat, lon]);
});
map.fitBounds(bounds, { padding:[30,30] });
const polyline = L.polyline(latLngs, { color:"blue" }).addTo(map);
L.polylineDecorator(polyline, {
patterns:[{
offset:"0",
repeat:"100",
symbol:L.Symbol.arrowHead({
pixelSize:"15",
polygon:false,
pathOptions:{ stroke:true, color:"#3388ff" },
}),
}],
}).addTo(map);
const locateControl = L.control({ position:"topright" });
locateControl.onAdd = function (map) {
const div = L.DomUtil.create("div", "locate-button");
div.innerHTML = `
<svg viewBox="0 0 24 24">
<path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
</svg>
`;
div.addEventListener("click", function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
const { latitude:userLat, longitude:userLng } = position.coords;
map.setView([userLat, userLng],15);
L.circle([userLat,userLng],{ color:"blue", fillColor:"#30f", fillOpacity:"0.5", radius:"10", }).addTo(map);
L.marker([userLat, userLng], {
icon: L.divIcon({
className: "crosshair-icon",
html: `
<svg viewBox="0 0 24 24">
<path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
</svg>
`,
iconSize: [24, 24],
iconAnchor: [12, 12],
}),
}).addTo(map);
},
function (error) {
console.error("Geolocation error:", error.message);
alert("Standort konnte nicht bestimmt werden:" + error.message);
},
{ enableHighAccuracy:true, timeout:"5000", maximumAge:"0" }
);
} else {
alert("Geolocation wird von Ihrem Browser nicht unterstützt.");
}
});
return div;
};
locateControl.addTo(map);
</script>
</body>
</html>

Quellcode

Hier kannst du den Code kopieren und ihn in deinen bevorzugten Editor einfügen. PASTEBIN_DOWNLOAD_SNIPPET_EXPLAIN

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Karte</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <style>
        body, html, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

.custom-popup .leaflet-popup-content-wrapper {
            background: #fff;
            color: #333;
            font-size: 14px;
            line-height: 24px;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
            max-width: 250px;
        }

.custom-popup .leaflet-popup-content {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.crosshair-icon {
            display: block; 
            margin: auto; 
            width: 24px;
            height: 24px;
        }

.popup-button {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            text-align: center;
            transition: background-color 0.3s;
            background-color: #fff;
            border: 1px solid #ccc;
            font-size: 12px;
        }

.actions {
            display: flex; 
            justify-content: center;
        }

.locate-button {
            background: white;
            padding: 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 20px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

.number-icon {
            background-color: #3388ff;
            border-radius: 5px;
            border: 2px solid #fff;
            text-align: center;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
            padding: 4px 8px;
            white-space: nowrap;
            min-width: 80px;
            max-width: 120px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.popup-content h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            text-align: center;
        }

.popup-content .actions {
            display: flex;
            justify-content: center; 
            gap: 10px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-polylinedecorator@1.6.0/dist/leaflet.polylineDecorator.js"></script>
    <script>
        const locations = [
            { id: "01 Nationalpark Haus Baltrum", latlon: "53.7261269,7.367696" },
            { id: "02 Igelhütte", latlon: "53.7287549,7.40876823" },
            { id: "03 Westbake Baltrum", latlon: "53.7278049,7.36136" },
        ];

function isMobile() {
            return /Mobi|Android/i.test(navigator.userAgent);
        }

function truncateText(text, maxLength = 20) {
            if (text.length <= maxLength) {
                return text;
            }
            return text.slice(0, maxLength - 3) + "...";
        }

const map = L.map("map");
        const osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            maxZoom: 19,
            attribution: "© OpenStreetMap",
        }).addTo(map);

const esriLayer = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
            maxZoom: 20,
            attribution: "Tiles © Esri",
        });

L.control.layers({ OSM: osmLayer, "Esri Satellite": esriLayer }).addTo(map);

const bounds = L.latLngBounds();
        const latLngs = [];

locations.forEach(function (location) {
            const [lat, lon] = location.latlon.split(",").map(parseFloat);
            latLngs.push([lat, lon]);

const popupContent = `
                <div class="popup-content">
                    <h3>${location.id}</h3>
                    <div class="actions">
                        <a href="${getMapLink(location.latlon)}" target="_blank" class="popup-button">
                            <svg viewBox="0 0 24 24" class="crosshair-icon">
                                <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            `;

L.marker([lat, lon], {
    icon: L.divIcon({
        className: "number-icon",
        html: truncateText(location.id),
        iconSize: [Math.max(80, location.id.length * 8), 30], 
        iconAnchor: [Math.max(40, location.id.length * 4) / 2, 15], 
    }),
})
            .addTo(map)
            .bindPopup(L.popup({
                maxWidth: 300,
                closeButton: true,
                className: "custom-popup"
            }).setContent(popupContent));

bounds.extend([lat, lon]);
        });

map.fitBounds(bounds, { padding:[30,30] });

const polyline = L.polyline(latLngs, { color:"blue" }).addTo(map);

L.polylineDecorator(polyline, {
            patterns:[{
                offset:"0",
                repeat:"100",
                symbol:L.Symbol.arrowHead({
                    pixelSize:"15",
                    polygon:false,
                    pathOptions:{ stroke:true, color:"#3388ff" },
                }),
            }],
        }).addTo(map);

const locateControl = L.control({ position:"topright" });

locateControl.onAdd = function (map) {
            const div = L.DomUtil.create("div", "locate-button");
            div.innerHTML = `
                <svg viewBox="0 0 24 24">
                    <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
                </svg>
            `;

div.addEventListener("click", function () {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        function (position) {
                            const { latitude:userLat, longitude:userLng } = position.coords;
                            map.setView([userLat, userLng],15);
                            L.circle([userLat,userLng],{ color:"blue", fillColor:"#30f", fillOpacity:"0.5", radius:"10", }).addTo(map);
                          
                            L.marker([userLat, userLng], {
                                icon: L.divIcon({
                                    className: "crosshair-icon",
                                    html: `
                                        <svg viewBox="0 0 24 24">
                                            <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
                                    </svg>
                                    `,
                                    iconSize: [24, 24],
                                    iconAnchor: [12, 12],
                                }),
                            }).addTo(map);
                        },
                        function (error) {
                            console.error("Geolocation error:", error.message);
                            alert("Standort konnte nicht bestimmt werden:" + error.message);
                        },
                        { enableHighAccuracy:true, timeout:"5000", maximumAge:"0" }
                    );
                } else {
                    alert("Geolocation wird von Ihrem Browser nicht unterstützt.");
                }
            });

return div;
        };

locateControl.addTo(map);
    </script>
</body>
</html>

LATEST_SNIPPETS

Vivaldi (09.02.2025 16:37:30, Siebenhof)
1.qemuBefehle (27.01.2025 20:29:41, KP97)
qemuText (27.01.2025 17:32:51, KP97)
increment_test_simple_loc… (21.01.2025 15:56:49, heisenberg)
increment_test_flock (21.01.2025 15:55:57, heisenberg)
locking_test_script (21.01.2025 15:54:53, heisenberg)
virtualbox ssh manage scr… (20.01.2025 19:04:51, speefak)
apvlv autoremove (17.01.2025 14:46:13, hikaru)
Karte (12.01.2025 10:43:21, uname)
Auszug aus Config Repo (05.01.2025 09:43:22, schorsch_76)
quelltext wikiseite (03.01.2025 22:13:36, rodney)
Diff vom Quelltext Wikise… (03.01.2025 22:11:01, rodney)
pmOS_pq-paella_inxi-F (24.12.2024 00:41:20, hikaru)
pmOS_pq-paella_lsblk (24.12.2024 00:39:44, hikaru)
pmOS_pq-paella_lscpu (24.12.2024 00:37:30, hikaru)
Upgrade Plasma 6 (23.12.2024 13:54:38, thunder11)
bbcode.lua (22.12.2024 06:31:07, paedubucher)
nqueens_cc (21.12.2024 05:45:09, wanne)
F4 readme_de.txt (20.12.2024 12:54:41, Dengo)
reschl-rand_0.pas (17.12.2024 22:29:27, TuxPeter)

NoPaste

NoPaste

Karte

Quellcode

Verlinken

LATEST_SNIPPETS