Public
Edited
Dec 20
1 fork
map = {
let container = DOM.element("div", {
style: `width:${width}px;height:${width / 1.6}px`
});
yield container;
const greenIcon = L.icon({
iconUrl: "https://cdn-icons-png.flaticon.com/512/7816/7816741.png",
iconSize: [32, 32], // adjust as needed
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
const redIcon = L.icon({
iconUrl:
"https://www.shutterstock.com/image-photo/insect-hotel-house-garden-environment-600nw-1143399131.jpg",
iconSize: [32, 32], // adjust as needed
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
var map = L.map(container).setView([63.430515, 10.395053], 11);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
//attribution:
//'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
data
.sort((a, b) => {
if (a.bol === b.bol) return 0;
return a.bol ? 1 : -1;
})
.forEach((k) => {
const icon = k.bol ? greenIcon : redIcon;
L.marker(k.geo, { icon: icon }).addTo(map).bindPopup(`Kasse ${k.ID}`);
//.openPopup();
});
// map.fitBounds(grandCentralLayer.getBounds());
}
map2 = {
// Create the container for the map
let container = DOM.element("div", {
style: `width:${width}px;height:${width / 1.6}px`
});
yield container;
// Set your Mapbox access token
mapboxgl.accessToken =
"pk.eyJ1IjoiYW5kcmVhc3NvbGJlcmciLCJhIjoiY200eGM3NG1oMGU3aTJrcjA3Y2JmczMybiJ9.fwIvTJNYY5Ot0t7k3eyupQ";
// Initialize the map
const map = new mapboxgl.Map({
container: container,
style: "mapbox://styles/mapbox/light-v10",
center: [10.325053, 63.430515], // Note the order: [lng, lat]
zoom: 10.2
});
// Create a green icon element
const greenIconEl = document.createElement("div");
greenIconEl.style.backgroundImage =
"url('http://public-andreassolberg.s3.eu-north-1.amazonaws.com/bee.png')";
greenIconEl.style.width = "64px";
greenIconEl.style.height = "64px";
greenIconEl.style.backgroundSize = "cover";
greenIconEl.style.backgroundPosition = "center";
// Create a red icon element
const redIconEl = document.createElement("div");
redIconEl.style.backgroundImage =
"url('http://public-andreassolberg.s3.eu-north-1.amazonaws.com/empty.png')";
redIconEl.style.width = "64px";
redIconEl.style.height = "64px";
redIconEl.style.backgroundSize = "cover";
redIconEl.style.backgroundPosition = "center";
// Sort and add markers
data
.sort((a, b) => {
// Keep the same sorting logic as before
if (a.bol === b.bol) return 0;
return a.bol ? 1 : -1;
})
.forEach((k) => {
const el = k.bol
? greenIconEl.cloneNode(true)
: redIconEl.cloneNode(true);
new mapboxgl.Marker({ element: el })
.setLngLat([k.geo[1], k.geo[0]]) // Note: swap lat/long to lng/lat
.setPopup(
new mapboxgl.Popup({ offset: 25 }).setText(`Kasse ${k.ID}. ${k.Art}`)
)
.addTo(map);
});
}
data.sort((a, b) => {
if (a.bol === b.bol) return 0;
return a.bol ? 1 : -1;
})
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g";
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
html`<style>
.labeled::after {
margin-left: 2em;
white-space: nowrap;
content: attr(aria-label);
}
</style>`
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.
