map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container,{maxZoom: 13,
minZoom: 13,dragging: false,}).setView([52.51, 13.395], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
const customIcon = L.divIcon({
className: "custom-icon",
iconSize: [30, 30],
html: '<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="10" fill="#FF69B4" opacity="0.9" /></svg>'
});
const otherland = L.marker([52.4888918, 13.3945464], {
icon: customIcon
}).addTo(map);
const customTextIconOtherland = L.divIcon({
className: "custom-text-icon",
html: '<h4 style="background-color: rgba(255, 105, 180, 0.7); padding: 5px; border-radius: 5px;">Otherland</h4>',
iconSize: [100, 20]
});
const otherlandText = L.marker([52.4858918, 13.3945464], {
icon: customTextIconOtherland
}).addTo(map);
const buchhandlung = L.marker([52.521494, 13.400556], {
icon: customIcon
}).addTo(map);
const customTextIconBuchhandlung = L.divIcon({
className: "custom-text-icon",
html: '<h4 style="background-color: rgba(255, 105, 180, 0.7); padding: 5px; border-radius: 5px;">Buchhandlung Walther König</h4>',
iconSize: [100, 20]
});
const buchhandlungText = L.marker([52.521494, 13.411556], {
icon: customTextIconBuchhandlung
}).addTo(map);
const doYouReadMe = L.marker([52.527144, 13.3976713], {
icon: customIcon
}).addTo(map);
const customTextIconDoYouReadMe = L.divIcon({
className: "custom-text-icon",
html: '<h4 style="background-color: rgba(255, 105, 180, 0.7); padding: 5px; border-radius: 5px;">Do You Read Me?!</h4>',
iconSize: [100, 20]
});
const doYouReadMeText = L.marker([52.533144, 13.3976713], {
icon: customTextIconDoYouReadMe
}).addTo(map);
const dussmann = L.marker([52.5183607, 13.388755], { icon: customIcon }).addTo(
map
);
const customTextIconDussmann = L.divIcon({
className: "custom-text-icon",
html: '<h4 style="background-color: rgba(255, 105, 180, 0.7); padding: 5px; border-radius: 5px;">Dussmann das KulturKaufhaus</h3>',
iconSize: [100, 20]
});
const dussmannText = L.marker([52.5183607, 13.3755], {
icon: customTextIconDussmann
}).addTo(map);
const polylineCoordinates = [
[52.48891, 13.39463],
[52.48892, 13.39454],
[52.48902, 13.39454],
[52.48901, 13.39476],
[52.48901, 13.39476],
[52.48896, 13.39574],
[52.48898, 13.39575],
[52.48906, 13.3959],
[52.4893, 13.39597],
[52.48935, 13.39598],
[52.4894, 13.39599],
[52.48943, 13.396],
[52.48963, 13.39606],
[52.49093, 13.39646],
[52.49105, 13.3965],
[52.49109, 13.39648],
[52.4912, 13.39652],
[52.49124, 13.39651],
[52.49136, 13.39655],
[52.49298, 13.397],
[52.49305, 13.39702],
[52.49384, 13.39724],
[52.49503, 13.39771],
[52.49504, 13.39768],
[52.49507, 13.39762],
[52.49517, 13.39767],
[52.4953, 13.39775],
[52.49638, 13.39867],
[52.49646, 13.3987],
[52.49705, 13.39871],
[52.49718, 13.39874],
[52.49745, 13.3989],
[52.49827, 13.39951],
[52.49842, 13.39962],
[52.49875, 13.39986],
[52.49945, 13.40039],
[52.50025, 13.40102],
[52.50106, 13.40168],
[52.50402, 13.40425],
[52.50485, 13.40498],
[52.50506, 13.40519],
[52.50515, 13.4053],
[52.50524, 13.40524],
[52.5054, 13.40556],
[52.50622, 13.40508],
[52.50709, 13.4045],
[52.50762, 13.4042],
[52.50782, 13.40451],
[52.50794, 13.40443],
[52.5082, 13.40381],
[52.50892, 13.40458],
[52.51025, 13.40302],
[52.5104, 13.40285],
[52.5108, 13.40236],
[52.51085, 13.40247],
[52.51131, 13.40254],
[52.51143, 13.40263],
[52.51171, 13.40298],
[52.51179, 13.4031],
[52.51218, 13.40275],
[52.51222, 13.40266],
[52.51231, 13.40255],
[52.51236, 13.4025],
[52.51239, 13.40256],
[52.51252, 13.40288],
[52.51254, 13.40293],
[52.51281, 13.40265],
[52.51364, 13.40183],
[52.51383, 13.40163],
[52.51419, 13.40129],
[52.51453, 13.401],
[52.5149, 13.40068],
[52.5159, 13.39999],
[52.51619, 13.40067],
[52.51622, 13.4008],
[52.51632, 13.40078],
[52.51699, 13.40002],
[52.51753, 13.39934],
[52.51756, 13.39949],
[52.51759, 13.39956],
[52.51806, 13.40082],
[52.51809, 13.4008],
[52.51816, 13.40072],
[52.51818, 13.40071],
[52.51825, 13.40063],
[52.51827, 13.40061],
[52.51834, 13.40078],
[52.51839, 13.40092],
[52.51923, 13.40003],
[52.51931, 13.40023],
[52.51955, 13.40018],
[52.51999, 13.39999],
[52.52017, 13.39994],
[52.52038, 13.39993],
[52.52056, 13.40038],
[52.52073, 13.40081],
[52.52076, 13.40089],
[52.52083, 13.40099],
[52.52084, 13.40103],
[52.52097, 13.40093],
[52.5211, 13.40085],
[52.52131, 13.40077],
[52.52162, 13.40066],
[52.52213, 13.40072],
[52.52211, 13.40054],
[52.52209, 13.40038],
[52.52208, 13.40034],
[52.52223, 13.40028],
[52.52226, 13.40026],
[52.52272, 13.40003],
[52.52277, 13.39994],
[52.52318, 13.39888],
[52.52326, 13.39873],
[52.52333, 13.39877],
[52.52346, 13.39849],
[52.5237, 13.39865],
[52.52368, 13.39908],
[52.52364, 13.39908],
[52.52363, 13.39944],
[52.52365, 13.39945],
[52.5237, 13.39945],
[52.52372, 13.39945],
[52.52372, 13.39952],
[52.52477, 13.39911],
[52.52545, 13.3988],
[52.52548, 13.39878],
[52.52718, 13.39801],
[52.52714, 13.3978],
[52.52718, 13.39801],
[52.52553, 13.39876],
[52.52507, 13.39609],
[52.52457, 13.39551],
[52.52445, 13.39537],
[52.52446, 13.39534],
[52.52428, 13.3952],
[52.5243, 13.39514],
[52.5243, 13.39512],
[52.52344, 13.39467],
[52.52334, 13.39459],
[52.52258, 13.3942],
[52.52251, 13.39417],
[52.52217, 13.39397],
[52.52206, 13.39391],
[52.52196, 13.39378],
[52.52182, 13.39351],
[52.52176, 13.3934],
[52.52121, 13.39417],
[52.52117, 13.3941],
[52.52077, 13.39464],
[52.52051, 13.39404],
[52.52042, 13.39379],
[52.52031, 13.39341],
[52.52025, 13.39317],
[52.52018, 13.39279],
[52.52012, 13.39208],
[52.52006, 13.39209],
[52.52005, 13.39199],
[52.52005, 13.39187],
[52.51995, 13.39026],
[52.51972, 13.3903],
[52.51892, 13.39044],
[52.51882, 13.39027],
[52.51879, 13.39012],
[52.51871, 13.3887],
[52.51865, 13.3887],
[52.51865, 13.38866],
[52.51834, 13.38871]
];
const polyline = L.polyline(polylineCoordinates, { color: "red" }).addTo(map);
L.Control.CustomTitle = L.Control.extend({
onAdd: function (map) {
const title = L.DomUtil.create("div", "custom-title");
title.innerHTML =
'<div style="background-color: rgba(255, 105, 180, 0.7); padding: 5px; width: 350px; height: 65px;"><h1>6.7 km journey in search of new books</h1></div>';
return title;
}
});
L.control.customTitle = function (opts) {
return new L.Control.CustomTitle(opts);
};
L.control.customTitle({ position: "topleft" }).addTo(map);
}
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
