pitbuster/huellas
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity

Fix frontend

Browse source
This commit is contained in:
Felipe Contreras 2022-08-01 22:21:27 -04:00
parent ac3587f560
commit baef99cfe9
4 changed files with 29 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/client.js Symbolic link
View file

@ -0,0 +1 @@
../ts-client/build/client.js

114
static/index.html
View file

@ -36,118 +36,6 @@
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script src="client.js" onload="setupMap()"></script>
<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> </body>
</html> </html>

7
ts-client/client.ts
View file

@ -17,7 +17,10 @@ async function loadPlaces(): Promise<Array<PlaceModel>> {
} }
function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON { function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON {
let result: FeatureCollection; let result: FeatureCollection = {
type: "FeatureCollection",
features: new Array<Feature>(),
}
for (const place of backendPlaces) { for (const place of backendPlaces) {
result.features.push({ result.features.push({
"type": "Feature", "type": "Feature",
@ -37,7 +40,7 @@ function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON {
return result; return result;
} }
export default async function setupMap(): Promise<void> { async function setupMap(): Promise<void> {
const backendPlaces = await loadPlaces(); const backendPlaces = await loadPlaces();
const leafletPlaces = toLeafletPlaces(backendPlaces); const leafletPlaces = toLeafletPlaces(backendPlaces);

43
ts-client/tsconfig.json
View file

@ -1,23 +1,24 @@
{ {
"compilerOptions": { "compilerOptions": {
"typeRoots": ["node_modules/@types"], "typeRoots": ["node_modules/@types"],
"rootDir": ".", "rootDir": ".",
"outDir": "build", "outDir": "build",
"target": "es2020", "target": "es2022",
"lib": [ "module": "es2022",
"es2020", "lib": [
"dom", "es2022",
], "dom",
"types": [ ],
"leaflet", "types": [
"geojson", "leaflet",
], "geojson",
"moduleResolution": "node" ],
}, "moduleResolution": "node"
"include": [ },
"*.ts" "include": [
], "*.ts"
"exclude": [ ],
"node_modules" "exclude": [
] "node_modules"
]
} }