Move Points of interest to use tiles

.github/workflows/ci.yml

@@ -34,8 +34,8 @@ jobs:
         run: |
           cd IsraelHiking.Web
           npm ci
-          npx ng lint
           npm run test-ci
+          npx ng lint
       - name: Codecov upload
         if: always()
         uses: codecov/codecov-action@v4

IsraelHiking.Web/package.json

@@ -28,7 +28,7 @@
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mapbox/polyline": "^1.2.1",
     "@mapbox/vector-tile": "^1.3.1",
-    "@maplibre/ngx-maplibre-gl": "^18.0.0",
+    "@maplibre/ngx-maplibre-gl": "^18.1.2",
     "@ng-idle/core": "^15.0.0",
     "@ngxs/store": "^18.1.1",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
@@ -72,7 +72,7 @@
     "linear-interpolator": "^1.0.2",
     "lodash-es": "^4.17.21",
     "lottie-web": "^5.12.2",
-    "maplibre-gl": "^4.6.0",
+    "maplibre-gl": "^4.7.0",
     "minisearch": "^7.1.0",
     "ngx-infinite-scroll": "^18.0.0",
     "ngx-lottie": "^12.0.0",

IsraelHiking.Web/src/application/application.module.ts

@@ -97,6 +97,8 @@ import { OverpassTurboService } from "./services/overpass-turbo.service";
 import { ImageAttributionService } from "./services/image-attribution.service";
 import { PmTilesService } from "./services/pmtiles.service";
 import { ApplicationUpdateService } from "./services/application-update.service";
+import { INatureService } from "./services/inature.service";
+import { WikidataService } from "./services/wikidata.service";
 import { OsmAddressesService } from "./services/osm-addresses.service";
 import { LocationService } from "./services/location.service";
 // interactions
@@ -309,6 +311,8 @@ const initializeApplication = (injector: Injector) => async () => {
         ImageAttributionService,
         PmTilesService,
         ApplicationUpdateService,
+        INatureService,
+        WikidataService,
         OsmAddressesService,
         LocationService,
         AudioPlayerFactory,

IsraelHiking.Web/src/application/components/map/layers-view.component.ts

@@ -15,6 +15,7 @@ import { SpatialService } from "../../services/spatial.service";
 import { NavigateHereService } from "../../services/navigate-here.service";
 import { SetSelectedPoiAction } from "../../reducers/poi.reducer";
 import { AddPrivatePoiAction } from "../../reducers/routes.reducer";
+import { GeoJSONUtils } from "../../services/geojson-utils";
 import type { ApplicationState, LatLngAlt, LinkData, Overlay } from "../../models/models";
 
 @Component({
@@ -25,7 +26,7 @@ import type { ApplicationState, LatLngAlt, LinkData, Overlay } from "../../model
 export class LayersViewComponent implements OnInit {
     private static readonly MAX_MENU_POINTS_IN_CLUSTER = 7;
 
-    public poiGeoJsonData: GeoJSON.FeatureCollection<GeoJSON.Point>;
+    public poiGeoJsonData: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
     public selectedPoiFeature: GeoJSON.Feature<GeoJSON.Point> = null;
     public selectedPoiGeoJson: Immutable<GeoJSON.FeatureCollection> = {
         type: "FeatureCollection",
@@ -127,11 +128,11 @@ export class LayersViewComponent implements OnInit {
     }
 
     public getTitle(feature: GeoJSON.Feature<GeoJSON.Point>): string {
-        return this.poiService.getTitle(feature, this.resources.getCurrentLanguageCodeSimplified());
+        return GeoJSONUtils.getTitle(feature, this.resources.getCurrentLanguageCodeSimplified());
     }
 
     public hasExtraData(feature: GeoJSON.Feature<GeoJSON.Point>): boolean {
-        return this.poiService.hasExtraData(feature, this.resources.getCurrentLanguageCodeSimplified());
+        return GeoJSONUtils.hasExtraData(feature, this.resources.getCurrentLanguageCodeSimplified());
     }
 
     public isCoordinatesFeature(feature: Immutable<GeoJSON.Feature>) {

IsraelHiking.Web/src/application/components/overlays/cluster-overlay.component.ts

@@ -2,8 +2,8 @@ import { Component, inject, input, output } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { ResourcesService } from "../../services/resources.service";
-import { PoiService } from "../../services/poi.service";
 import { RouteStrings } from "../../services/hash.service";
+import { GeoJSONUtils } from "../../services/geojson-utils";
 
 @Component({
     selector: "cluster-overlay",
@@ -18,14 +18,13 @@ export class ClusterOverlayComponent {
     public readonly resources = inject(ResourcesService);
 
     private readonly router = inject(Router);
-    private readonly poiService = inject(PoiService);
 
     public getTitle(feature: GeoJSON.Feature) {
-        return this.poiService.getTitle(feature, this.resources.getCurrentLanguageCodeSimplified());
+        return GeoJSONUtils.getTitle(feature, this.resources.getCurrentLanguageCodeSimplified());
     }
 
     public hasExtraData(feature: GeoJSON.Feature): boolean {
-        return this.poiService.hasExtraData(feature, this.resources.getCurrentLanguageCodeSimplified());
+        return GeoJSONUtils.hasExtraData(feature, this.resources.getCurrentLanguageCodeSimplified());
     }
 
     public clickOnItem(feature: GeoJSON.Feature) {

IsraelHiking.Web/src/application/components/sidebar/publicpoi/public-poi-sidebar.component.ts

@@ -23,6 +23,7 @@ import { GeoJsonParser } from "../../../services/geojson.parser";
 import { sidebarAnimate } from "../sidebar.component";
 import { AddRouteAction, AddPrivatePoiAction } from "../../../reducers/routes.reducer";
 import { SetSelectedPoiAction, SetUploadMarkerDataAction, SetSidebarAction } from "../../../reducers/poi.reducer";
+import { GeoJSONUtils } from "../../../services/geojson-utils";
 import type {
     LinkData,
     LatLngAlt,
@@ -176,13 +177,13 @@ export class PublicPoiSidebarComponent implements OnDestroy {
 
     private initFromFeature(feature: GeoJSON.Feature) {
         this.fullFeature = feature;
-        this.latlng = this.poiService.getLocation(feature);
+        this.latlng = GeoJSONUtils.getLocation(feature);
         this.sourceImageUrls = this.getSourceImageUrls(feature);
         this.shareLinks = this.poiService.getPoiSocialLinks(feature);
         this.contribution = this.poiService.getContribution(feature);
         this.info = this.poiService.getEditableDataFromFeature(feature);
         const language = this.resources.getCurrentLanguageCodeSimplified();
-        this.titleService.set(this.poiService.getTitle(feature, language));
+        this.titleService.set(GeoJSONUtils.getTitle(feature, language));
     }
 
     private getSourceImageUrls(feature: GeoJSON.Feature): SourceImageUrlPair[] {
@@ -224,8 +225,8 @@ export class PublicPoiSidebarComponent implements OnDestroy {
             return "";
         }
         const language = this.resources.getCurrentLanguageCodeSimplified();
-        const description = this.poiService.getDescription(this.fullFeature, language) ||
-            this.poiService.getExternalDescription(this.fullFeature, language);
+        const description = GeoJSONUtils.getDescription(this.fullFeature, language) ||
+            GeoJSONUtils.getExternalDescription(this.fullFeature, language);
         if (description) {
             return description;
         }
@@ -324,8 +325,8 @@ export class PublicPoiSidebarComponent implements OnDestroy {
     }
 
     public navigateHere() {
-        const location = this.poiService.getLocation(this.fullFeature);
-        const title = this.poiService.getTitle(this.fullFeature, this.resources.getCurrentLanguageCodeSimplified());
+        const location = GeoJSONUtils.getLocation(this.fullFeature);
+        const title = GeoJSONUtils.getTitle(this.fullFeature, this.resources.getCurrentLanguageCodeSimplified());
         this.navigateHereService.addNavigationSegment(location, title);
         this.close();
     }

IsraelHiking.Web/src/application/models/state/offline-state.d.ts

@@ -3,10 +3,6 @@
      * Maps last modified date
      */
     lastModifiedDate: Date;
-    /**
-     * Points of interest last modified date
-     */
-    poisLastModifiedDate: Date;
     /**
      * Shares last modified date
      */

IsraelHiking.Web/src/application/reducers/initial-state.ts

@@ -165,7 +165,6 @@ export const initialState =
         offlineState: {
             isOfflineAvailable: false,
             lastModifiedDate: null,
-            poisLastModifiedDate: null,
             shareUrlsLastModifiedDate: null,
             uploadPoiQueue: [],
             isPmtilesDownloaded: false

IsraelHiking.Web/src/application/reducers/offline.reducer.ts

@@ -15,11 +15,6 @@ export class SetOfflineMapsLastModifiedDateAction {
     constructor(public lastModifiedDate: Date) {}
 }
 
-export class SetOfflinePoisLastModifiedDateAction {
-    public static type = this.prototype.constructor.name;
-    constructor(public lastModifiedDate: Date) {}
-}
-
 export class SetShareUrlsLastModifiedDateAction {
     public static type = this.prototype.constructor.name;
     constructor(public lastModifiedDate: Date) {}
@@ -59,14 +54,6 @@ export class OfflineReducer {
         }));
     }
 
-    @Action(SetOfflinePoisLastModifiedDateAction)
-    public setOfflinePoisLastModifiedDate(ctx: StateContext<OfflineState>, action: SetOfflinePoisLastModifiedDateAction) {
-        ctx.setState(produce(ctx.getState(), lastState => {
-            lastState.poisLastModifiedDate = action.lastModifiedDate;
-            return lastState;
-        }));
-    }
-
     @Action(SetShareUrlsLastModifiedDateAction)
     public setShareUrlsLastModifiedDate(ctx: StateContext<OfflineState>, action: SetShareUrlsLastModifiedDateAction) {
         ctx.setState(produce(ctx.getState(), lastState => {

IsraelHiking.Web/src/application/services/database.service.ts

@@ -23,11 +23,9 @@ export class DatabaseService {
     private static readonly STATE_DB_NAME = "State";
     private static readonly STATE_TABLE_NAME = "state";
     private static readonly STATE_DOC_ID = "state";
-    private static readonly POIS_DB_NAME = "PointsOfInterest";
-    private static readonly POIS_TABLE_NAME = "pois";
+    private static readonly POIS_UPLOAD_QUEUE_DB_NAME = "UploadQueue";
     private static readonly POIS_UPLOAD_QUEUE_TABLE_NAME = "uploadQueue";
     private static readonly POIS_ID_COLUMN = "properties.poiId";
-    private static readonly POIS_LOCATION_COLUMN = "[properties.poiGeolocation.lat+properties.poiGeolocation.lon]";
     private static readonly IMAGES_DB_NAME = "Images";
     private static readonly IMAGES_TABLE_NAME = "images";
     private static readonly SHARE_URLS_DB_NAME = "ShareUrls";
@@ -36,7 +34,7 @@ export class DatabaseService {
     private static readonly TRACES_TABLE_NAME = "traces";
 
     private stateDatabase: Dexie;
-    private poisDatabase: Dexie;
+    private uploadQueueDatabase: Dexie;
     private imagesDatabase: Dexie;
     private shareUrlsDatabase: Dexie;
     private tracesDatabase: Dexie;
@@ -52,11 +50,8 @@ export class DatabaseService {
         this.stateDatabase.version(1).stores({
             state: "id"
         });
-        this.poisDatabase = new Dexie(DatabaseService.POIS_DB_NAME);
-        this.poisDatabase.version(1).stores({
-            pois: DatabaseService.POIS_ID_COLUMN + "," + DatabaseService.POIS_LOCATION_COLUMN,
-        });
-        this.poisDatabase.version(2).stores({
+        this.uploadQueueDatabase = new Dexie(DatabaseService.POIS_UPLOAD_QUEUE_DB_NAME);
+        this.uploadQueueDatabase.version(1).stores({
             uploadQueue: DatabaseService.POIS_ID_COLUMN
         });
         this.imagesDatabase = new Dexie(DatabaseService.IMAGES_DB_NAME);
@@ -127,55 +122,16 @@ export class DatabaseService {
         }
     }
 
-    public storePois(pois: GeoJSON.Feature[]): Promise<any> {
-        return this.poisDatabase.table(DatabaseService.POIS_TABLE_NAME).bulkPut(pois);
-    }
-
-    public deletePois(poiIds: string[]): Promise<void> {
-        return this.poisDatabase.table(DatabaseService.POIS_TABLE_NAME).bulkDelete(poiIds);
-    }
-
-    public async getPoisForClustering(): Promise<GeoJSON.Feature<GeoJSON.Point>[]> {
-        this.loggingService.debug("[Database] Startting getting pois for clustering in chunks");
-        let features = [] as GeoJSON.Feature<GeoJSON.Point>[];
-        let index = 0;
-        const size = 2000;
-        let currentFeatures = [];
-        do {
-            currentFeatures = await this.poisDatabase.table(DatabaseService.POIS_TABLE_NAME).offset(index * size).limit(size).toArray();
-            features = features.concat(currentFeatures);
-            index++;
-        } while (currentFeatures.length !== 0);
-        this.loggingService.debug("[Database] Finished getting pois for clustering in chunks: " + features.length);
-        const pointFeatures = features.map((feature: GeoJSON.Feature) => {
-            const geoLocation = feature.properties.poiGeolocation;
-            const pointFeature = {
-                type: "Feature",
-                geometry: {
-                    type: "Point",
-                    coordinates: [parseFloat(geoLocation.lon), parseFloat(geoLocation.lat)]
-                },
-                properties: feature.properties
-            } as GeoJSON.Feature<GeoJSON.Point>;
-            return pointFeature;
-        });
-        return pointFeatures;
-    }
-
-    public getPoiById(id: string): Promise<GeoJSON.Feature> {
-        return this.poisDatabase.table(DatabaseService.POIS_TABLE_NAME).get(id);
-    }
-
     public addPoiToUploadQueue(feature: GeoJSON.Feature): Promise<any> {
-        return this.poisDatabase.table(DatabaseService.POIS_UPLOAD_QUEUE_TABLE_NAME).put(feature);
+        return this.uploadQueueDatabase.table(DatabaseService.POIS_UPLOAD_QUEUE_TABLE_NAME).put(feature);
     }
 
     public getPoiFromUploadQueue(featureId: string): Promise<GeoJSON.Feature> {
-        return this.poisDatabase.table(DatabaseService.POIS_UPLOAD_QUEUE_TABLE_NAME).get(featureId);
+        return this.uploadQueueDatabase.table(DatabaseService.POIS_UPLOAD_QUEUE_TABLE_NAME).get(featureId);
     }
 
     public removePoiFromUploadQueue(featureId: string): Promise<void> {
-        return this.poisDatabase.table(DatabaseService.POIS_UPLOAD_QUEUE_TABLE_NAME).delete(featureId);
+        return this.uploadQueueDatabase.table(DatabaseService.POIS_UPLOAD_QUEUE_TABLE_NAME).delete(featureId);
     }
 
     public storeImages(images: ImageUrlAndData[]): Promise<any> {