Public
Edited
May 22, 2023
container = html`<div style="height:750px;">`;
// // Define the location-based photos with metadata
// {
// const photos = [
// {
// photo: "IMG_0077.jpeg",
// latitude: 51.517070,
// longitude: -0.071350
// }
// // {
// // photo: "IMG_0078.jpeg",
// // latitude: 51.517237,
// // longitude: -0.071472
// // }
// ];
// // Add location markers for each photo
// photos.forEach(photo => {
// // const marker = new mapboxgl.Marker({
// // draggable: false,
// // anchor: "bottom" // Set the anchor point of the marker
// // })
// // .setLngLat([photo.longitude, photo.latitude])
// // .addTo(map);
// // create the popup
// const popup = new mapboxgl.Popup({ offset: 25 }).setText(
// 'Construction on the Washington Monument began in 1848.'
// );
// // create DOM element for the marker
// const el = document.createElement('div');
// el.id = 'marker';
// // create the marker
// const marker = new mapboxgl.Marker(el)
// .setLngLat([photo.longitude, photo.latitude])
// .setPopup(popup) // sets a popup on this marker
// .addTo(map);
// marker.togglePopup(); // toggle popup open or closed
// // // Create a popup box with the photo
// // const popup = d3.select(DOM.element()).append("div")
// // .style("position", "absolute")
// // .style("left", "0")
// // .style("top", "0")
// // .style("visibility", "hidden")
// // .style("background-color", "#fff")
// // .style("padding", "10px")
// // .style("z-index", "1");
// // Add click event listener to show the popup
// // marker.getElement().addEventListener("click", () => {
// // popup.style("visibility", "visible")
// // .html(`<img src="${photo.photo}" alt="Photo" style="width: 300px; height: auto;">`);
// // });
// // Close the popup when the map is clicked
// // map.on("click", () => {
// // popup.style("visibility", "hidden")
// // .html("");
// // });
// });
// }
{
var photo1 = FileAttachment("IMG_0077.jpeg").image();
photo1 = {
latitude: 51.517070,
longitude: -0.071350
}
// Define the location-based photos with metadata
const photos = [
{
photo: photo1,
latitude: 51.517070,
longitude: -0.071350
}
];
// Add location markers for each photo
// Function to create the marker element
function createMarkerElement(photoUrl) {
const markerElement = d3.select(document.createElement('div'))
.style('width', '50px')
.style('height', '50px')
.style('background-color', 'red')
.style('border-radius', '50%')
.style('cursor', 'pointer');
return markerElement.node();
}
// Add location markers for each photo
photos.forEach(photo => {
// Create the popup content
const popupContent = html`
<div>
<img src="${photo1}" alt="Photo1" style="width: 300px; height: 300px;">
</div>
`;
// Create the popup
const popup = new mapboxgl.Popup({ anchor: 'center', maxWidth: container.offsetWidth, maxHeight: container.offsetHeight}).setDOMContent(popupContent);
// Create the marker
const marker = new mapboxgl.Marker(createMarkerElement(photo.photo))
.setLngLat([photo.longitude, photo.latitude])
.setPopup(popup)
.addTo(map);
});
}
{
var photo1 = FileAttachment("IMG_0077.jpeg").image();
console.log(FileAttachment("IMG_0077.jpeg").url())
}
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.
