61 lines
2.1 KiB
PHP
61 lines
2.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSummit Restaurants Map</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""/>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#map {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
<script>
|
|
var map = L.map('map').setView([38.7686, -9.0940], 15);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
var webSummitIcon = L.icon({
|
|
iconUrl: 'https://img.icons8.com/color/48/000000/filled-star.png',
|
|
iconSize: [48, 48],
|
|
iconAnchor: [24, 48],
|
|
popupAnchor: [0, -48]
|
|
});
|
|
|
|
var webSummitMarker = L.marker([38.7686, -9.0940], {icon: webSummitIcon}).addTo(map);
|
|
webSummitMarker.bindPopup("<b>Web Summit @ MEO Arena</b>").openPopup();
|
|
|
|
const restaurants = [
|
|
{ name: 'Cantinho do Avillez', lat: 38.77, lng: -9.095 },
|
|
{ name: 'Senhor Peixe', lat: 38.765, lng: -9.092 },
|
|
{ name: 'D\'Bacalhau', lat: 38.769, lng: -9.098 },
|
|
{ name: 'The Old House', lat: 38.767, lng: -9.091 },
|
|
{ name: 'ZeroZero Pizzeria', lat: 38.771, lng: -9.096 },
|
|
{ name: 'Butchers', lat: 38.766, lng: -9.099 },
|
|
{ name: 'Honorato', lat: 38.764, lng: -9.093 }
|
|
];
|
|
|
|
restaurants.forEach(restaurant => {
|
|
var marker = L.marker([restaurant.lat, restaurant.lng]).addTo(map);
|
|
marker.bindPopup(`<b>${restaurant.name}</b>`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |