154 lines
4.2 KiB
HTML
154 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<title>Huellas</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
|
||
|
|
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
|
||
|
|
crossorigin=""/>
|
||
|
|
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
|
||
|
|
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
|
||
|
|
crossorigin=""></script>
|
||
|
|
|
||
|
|
<style type="text/css" media="screen">
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body, #map {
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leaflet-popup-content h3 {
|
||
|
|
margin-top: 1em;
|
||
|
|
margin-bottom: 0.5em;
|
||
|
|
}
|
||
|
|
.leaflet-popup-content ul{
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<script charset="utf-8">
|
||
|
|
async function loadPlaces ()
|
||
|
|
{
|
||
|
|
result = await fetch('places/').then(response => response.json());
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toLeafletPlaces(backendPlaces) {
|
||
|
|
const result = {
|
||
|
|
"type": "FeatureCollection",
|
||
|
|
"features": []
|
||
|
|
};
|
||
|
|
for (const place of backendPlaces) {
|
||
|
|
result.features.push({
|
||
|
|
"type": "Feature",
|
||
|
|
"properties": {
|
||
|
|
"name": place.name,
|
||
|
|
"address": place.address,
|
||
|
|
"open_hours": place.open_hours,
|
||
|
|
"icon": place.icon,
|
||
|
|
"description": place.description
|
||
|
|
},
|
||
|
|
"geometry": {
|
||
|
|
"type": "Point",
|
||
|
|
"coordinates": [place.latitude, place.longitude]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function setupMap() {
|
||
|
|
const backendPlaces = await loadPlaces();
|
||
|
|
const leafletPlaces = toLeafletPlaces(backendPlaces);
|
||
|
|
|
||
|
|
/* Set up the map*/
|
||
|
|
var map = new L.Map('map');
|
||
|
|
|
||
|
|
/* Create the tile layer with correct attribution*/
|
||
|
|
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||
|
|
var osmAttrib='Mapa © <a href="https://openstreetmap.org">OpenStreetMap</a>';
|
||
|
|
var osm = new L.TileLayer(osmUrl, {minZoom: 4, maxZoom: 20, attribution: osmAttrib});
|
||
|
|
|
||
|
|
/* Start the map in Santiago */
|
||
|
|
map.setView(new L.LatLng(-33.45,-70.666667),13);
|
||
|
|
/* Try to get user position, if not, put the map in Santiago again */
|
||
|
|
map.locate({setView: true, maxZoom: 16})
|
||
|
|
.on('locationerror', function(e) {
|
||
|
|
map.setView(new L.LatLng(-33.45,-70.666667),13);
|
||
|
|
});
|
||
|
|
map.addLayer(osm);
|
||
|
|
|
||
|
|
function onEachFeature(feature, layer)
|
||
|
|
{
|
||
|
|
if (feature.properties)
|
||
|
|
{
|
||
|
|
popupStr = "<h3>" + feature.properties.name + "</h3>";
|
||
|
|
popupStr += "<ul>"
|
||
|
|
if (feature.properties.address)
|
||
|
|
popupStr += "<li><b>Dirección:</b> " + feature.properties.address + "</li>";
|
||
|
|
if (feature.properties.open_hours)
|
||
|
|
popupStr += "<li><b>Horario:</b> " + feature.properties.open_hours + "</li>";
|
||
|
|
if (feature.properties.description)
|
||
|
|
popupStr += "<li>" + feature.properties.description + "</li>";
|
||
|
|
popupStr += "</ul>";
|
||
|
|
|
||
|
|
layer.bindPopup(popupStr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Icons */
|
||
|
|
var SVGIcon = L.Icon.extend({
|
||
|
|
options: {
|
||
|
|
iconSize: [36,36],
|
||
|
|
popupAnchor: [0, -18]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const icons = new Map();
|
||
|
|
icons.set('bar', new SVGIcon({iconUrl: 'icons/bar.svg'}));
|
||
|
|
icons.set('coffe', new SVGIcon({iconUrl: 'icons/coffe.svg'}));
|
||
|
|
icons.set('dining', new SVGIcon({iconUrl: 'icons/dining.svg'}));
|
||
|
|
icons.set('food', new SVGIcon({iconUrl: 'icons/food.svg'}));
|
||
|
|
icons.set('jazz', new SVGIcon({iconUrl: 'icons/saxophone.svg'}));
|
||
|
|
icons.set('library', new SVGIcon({iconUrl: 'icons/book.svg'}));
|
||
|
|
icons.set('marker', new SVGIcon({iconUrl: 'icons/marker.svg'}));
|
||
|
|
icons.set('museum', new SVGIcon({iconUrl: 'icons/museum.svg'}));
|
||
|
|
icons.set('shop', new SVGIcon({iconUrl: 'icons/store.svg'}));
|
||
|
|
|
||
|
|
function pointToLayer(feature, latlng)
|
||
|
|
{
|
||
|
|
var markerIcon = null;
|
||
|
|
if (feature.properties && feature.properties.icon)
|
||
|
|
{
|
||
|
|
markerIcon = icons.get(feature.properties.icon);
|
||
|
|
}
|
||
|
|
if (markerIcon != null && markerIcon != undefined)
|
||
|
|
return L.marker(latlng, {icon: markerIcon});
|
||
|
|
else
|
||
|
|
return L.marker(latlng);
|
||
|
|
}
|
||
|
|
|
||
|
|
map.addLayer(L.geoJSON(leafletPlaces, {
|
||
|
|
onEachFeature: onEachFeature,
|
||
|
|
pointToLayer: pointToLayer
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
setupMap();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|