Fix frontend
This commit is contained in:
Felipe Contreras
parent
ac3587f560
commit
baef99cfe9
4 changed files with 29 additions and 136 deletions
1
static/client.js
Symbolic link
1
static/client.js
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../ts-client/build/client.js
|
||||
|
|
@ -36,118 +36,6 @@
|
|||
</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>
|
||||
|
||||
<script src="client.js" onload="setupMap()"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@ async function loadPlaces(): Promise<Array<PlaceModel>> {
|
|||
}
|
||||
|
||||
function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON {
|
||||
let result: FeatureCollection;
|
||||
let result: FeatureCollection = {
|
||||
type: "FeatureCollection",
|
||||
features: new Array<Feature>(),
|
||||
}
|
||||
for (const place of backendPlaces) {
|
||||
result.features.push({
|
||||
"type": "Feature",
|
||||
|
|
@ -37,7 +40,7 @@ function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON {
|
|||
return result;
|
||||
}
|
||||
|
||||
export default async function setupMap(): Promise<void> {
|
||||
async function setupMap(): Promise<void> {
|
||||
const backendPlaces = await loadPlaces();
|
||||
const leafletPlaces = toLeafletPlaces(backendPlaces);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
"typeRoots": ["node_modules/@types"],
|
||||
"rootDir": ".",
|
||||
"outDir": "build",
|
||||
"target": "es2020",
|
||||
"target": "es2022",
|
||||
"module": "es2022",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"es2022",
|
||||
"dom",
|
||||
],
|
||||
"types": [
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue