Move Points of interest to use tiles

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";
 // interactions
 import { RouteEditPoiInteraction } from "./components/intercations/route-edit-poi.interaction";
 import { RouteEditRouteInteraction } from "./components/intercations/route-edit-route.interaction";
@@ -309,6 +311,8 @@ const initializeApplication = (injector: Injector) => async () => {
         ImageAttributionService,
         PmTilesService,
         ApplicationUpdateService,
+        INatureService,
+        WikidataService,
         AudioPlayerFactory,
         FileSystemWrapper,
         // eslint-disable-next-line

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

@@ -16,6 +16,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({
@@ -26,7 +27,7 @@ import type { ApplicationState, LatLngAlt, LinkData, Overlay } from "../../model
 export class LayersViewComponent extends BaseMapComponent 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>;
     public selectedPoiGeoJson: Immutable<GeoJSON.FeatureCollection>;
     public selectedCluster: GeoJSON.Feature<GeoJSON.Point>;
@@ -132,11 +133,11 @@ export class LayersViewComponent extends BaseMapComponent 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

@@ -3,8 +3,8 @@ import { Router } from "@angular/router";
 
 import { BaseMapComponent } from "../base-map.component";
 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",
@@ -20,18 +20,17 @@ export class ClusterOverlayComponent extends BaseMapComponent {
     public closed: EventEmitter<void>;
 
     constructor(resources: ResourcesService,
-                private readonly router: Router,
-                private readonly poiService: PoiService) {
+                private readonly router: Router) {
         super(resources);
         this.closed = new EventEmitter();
     }
 
     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/categories-group.component.html

@@ -5,7 +5,7 @@
                 <p class="w-full">{{resources.translate(categoriesGroup.type)}}</p>
             </div>
             <div class="w-1/5">
-                <button class="w-full !h-full" mat-button (click)="toggleVisibility($event)" angulartics2On="click" angularticsCategory="Layers" angularticsAction="Toggle visiblity of category layer {{categoriesGroup.type}}">
+                <button class="w-full !h-full" mat-button (click)="toggleVisibility($event)" angulartics2On="click" angularticsCategory="Layers" angularticsAction="Toggle visibility of category layer {{categoriesGroup.type}}">
                     <i class="fa fa-lg" [ngClass]="{'icon-eye': categoriesGroup.visible, 'icon-eye-slash': !categoriesGroup.visible}"></i>
                 </button>
             </div>

IsraelHiking.Web/src/application/components/sidebar/layers-sidebar.component.html

@@ -46,7 +46,7 @@
             </mat-expansion-panel-header>
             <div *ngFor="let overlay of (overlays$ | async)">
                 <div class="flex flex-row">
-                    <button mat-button class="row-button flex-1 !justify-start" (click)="toggleVisibility(overlay)" angulartics2On="click" angularticsCategory="Layers" angularticsAction="Toggle overlay visiblity {{overlay.key}}">
+                    <button mat-button class="row-button flex-1 !justify-start" (click)="toggleVisibility(overlay)" angulartics2On="click" angularticsCategory="Layers" angularticsAction="Toggle overlay visibility {{overlay.key}}">
                         <span><i class="fa" [ngClass]="{'icon-eye': overlay.visible, 'icon-eye-slash': !overlay.visible}"></i></span>
                         <span class="break-all">{{resources.translate(overlay.key)}}</span>
                     </button>

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

@@ -25,6 +25,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,
@@ -181,13 +182,13 @@ export class PublicPoiSidebarComponent extends BaseMapComponent implements OnDes
 
     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[] {
@@ -228,8 +229,8 @@ export class PublicPoiSidebarComponent extends BaseMapComponent implements OnDes
             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;
         }
@@ -326,8 +327,8 @@ export class PublicPoiSidebarComponent extends BaseMapComponent implements OnDes
     }
 
     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);
     }
 

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

@@ -164,7 +164,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;
@@ -54,11 +52,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);
@@ -129,55 +124,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> {

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

@@ -262,7 +262,7 @@ export class FileService {
     public async writeStyle(styleFileName: string, styleText: string) {
         await this.fileSystemWrapper.writeFile(this.fileSystemWrapper.dataDirectory, styleFileName, styleText,
             { append: false, replace: true, truncate: 0 });
-        this.loggingService.info(`[Files] Write style finished succefully: ${styleFileName}`);
+        this.loggingService.info(`[Files] Write style finished successfully: ${styleFileName}`);
     }
 
     public async compressTextToBase64Zip(contents: {name: string; text: string}[]): Promise<string> {

IsraelHiking.Web/src/application/services/fit-bounds.service.spec.ts

@@ -32,6 +32,7 @@ describe("FitBoundsService", () => {
             const spy = jasmine.createSpy();
             mapService.map.fitBounds = spy;
             await service.fitBounds({ northEast: { lat: 1, lng: 1}, southWest: { lat: 2, lng: 2}});
+            console.log(spy.calls.all()[0].args[1]);
             expect(spy.calls.all()[0].args[1].padding.left).toBe(400);
     }));