First version of JS -> TS for client.
This commit is contained in:
Felipe Contreras
parent
bd19b463b7
commit
3c6f22b4a6
5 changed files with 214 additions and 0 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +1,4 @@
|
|||
/target
|
||||
/db
|
||||
node_modules
|
||||
build
|
||||
|
|
|
|||
109
ts-client/client.ts
Normal file
109
ts-client/client.ts
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import * as L from 'leaflet';
|
||||
import { Feature, FeatureCollection, GeoJSON } from 'geojson';
|
||||
|
||||
interface PlaceModel {
|
||||
name: string;
|
||||
address: string;
|
||||
open_hours: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
|
||||
}
|
||||
|
||||
async function loadPlaces(): Promise<Array<PlaceModel>> {
|
||||
return await fetch('places/').then(response => response.json());
|
||||
}
|
||||
|
||||
function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON {
|
||||
let result: FeatureCollection;
|
||||
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;
|
||||
}
|
||||
|
||||
export default async function setupMap(): Promise<void> {
|
||||
const backendPlaces = await loadPlaces();
|
||||
const leafletPlaces = toLeafletPlaces(backendPlaces);
|
||||
|
||||
/* Set up the map*/
|
||||
const map = new L.Map('map');
|
||||
|
||||
/* Create the tile layer with correct attribution*/
|
||||
const osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
const osmAttrib = 'Mapa © <a href="https://openstreetmap.org">OpenStreetMap</a>';
|
||||
const 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(_event: L.LocationEvent) {
|
||||
map.setView(new L.LatLng(-33.45, -70.666667), 13);
|
||||
});
|
||||
map.addLayer(osm);
|
||||
|
||||
function onEachFeature(feature: Feature, layer: L.Layer) {
|
||||
if (feature.properties) {
|
||||
let 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 */
|
||||
const icons = new Map<string, L.Icon>();
|
||||
icons.set('bar', new L.Icon({ iconUrl: 'icons/bar.svg' }));
|
||||
icons.set('coffe', new L.Icon({ iconUrl: 'icons/coffe.svg' }));
|
||||
icons.set('dining', new L.Icon({ iconUrl: 'icons/dining.svg' }));
|
||||
icons.set('food', new L.Icon({ iconUrl: 'icons/food.svg' }));
|
||||
icons.set('jazz', new L.Icon({ iconUrl: 'icons/saxophone.svg' }));
|
||||
icons.set('library', new L.Icon({ iconUrl: 'icons/book.svg' }));
|
||||
icons.set('marker', new L.Icon({ iconUrl: 'icons/marker.svg' }));
|
||||
icons.set('museum', new L.Icon({ iconUrl: 'icons/museum.svg' }));
|
||||
icons.set('shop', new L.Icon({ iconUrl: 'icons/store.svg' }));
|
||||
|
||||
for (let [name, icon] of icons) {
|
||||
icon.options.iconSize = [36, 36];
|
||||
icon.options.popupAnchor = [0, -18];
|
||||
}
|
||||
|
||||
function pointToLayer(feature: Feature, latlng: L.LatLng) {
|
||||
let 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
|
||||
}));
|
||||
}
|
||||
71
ts-client/package-lock.json
generated
Normal file
71
ts-client/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"name": "ts-client",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"geojson": "^0.5.0",
|
||||
"leaflet": "^1.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "^1.7.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/geojson": {
|
||||
"version": "7946.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
|
||||
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/leaflet": {
|
||||
"version": "1.7.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
|
||||
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/geojson": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
|
||||
"integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
|
||||
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/geojson": {
|
||||
"version": "7946.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
|
||||
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/leaflet": {
|
||||
"version": "1.7.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
|
||||
"integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"geojson": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
|
||||
"integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ=="
|
||||
},
|
||||
"leaflet": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
|
||||
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
|
||||
}
|
||||
}
|
||||
}
|
||||
9
ts-client/package.json
Normal file
9
ts-client/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "^1.7.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"geojson": "^0.5.0",
|
||||
"leaflet": "^1.8.0"
|
||||
}
|
||||
}
|
||||
23
ts-client/tsconfig.json
Normal file
23
ts-client/tsconfig.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"rootDir": ".",
|
||||
"outDir": "build",
|
||||
"target": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom",
|
||||
],
|
||||
"types": [
|
||||
"leaflet",
|
||||
"geojson",
|
||||
],
|
||||
"moduleResolution": "node"
|
||||
},
|
||||
"include": [
|
||||
"*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue