Fixes #2080 - Some public routes don't show on the map

IsraelHikingMap · Nov 30, 2024 · 268acf0 · 268acf0
1 parent bd581bb
commit 268acf0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.html b/IsraelHiking.Web/src/application/components/map/layers-view.component.html
@@ -36,8 +36,8 @@
 <mgl-popup *ngIf="selectedCluster" [lngLat]="selectedCluster.geometry.coordinates" (popupClose)="clearSelectedClusterPopup()" [closeOnClick]="true">
     <cluster-overlay [features]="clusterFeatures" (closed)="clearSelectedClusterPopup()"></cluster-overlay>
 </mgl-popup>
-<mgl-popup *ngIf="hoverFeature && !isCoordinatesFeature(hoverFeature)" [lngLat]="hoverFeature.geometry.coordinates" [closeButton]="false" [offset]="[0, -30]">
-    <span [dir]="resources.getDirection(getTitle(hoverFeature))">{{getTitle(hoverFeature)}}</span>
+<mgl-popup *ngIf="hoverFeature && !isCoordinatesFeature(hoverFeature)" [lngLat]="hoverFeature.geometry.coordinates" [closeButton]="false" [offset]="[0, -30]" class="text-right">
+    <div [dir]="resources.getDirection(getTitle(hoverFeature))">{{getTitle(hoverFeature)}}</div>
 </mgl-popup>
 <mgl-popup *ngIf="isShowCoordinatesPopup && selectedPoiFeature && isCoordinatesFeature(selectedPoiFeature)" [lngLat]="selectedPoiFeature.geometry.coordinates" [offset]="[0, -30]" (popupClose)="isShowCoordinatesPopup = false">
     <div class="flex flex-row">

diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.ts b/IsraelHiking.Web/src/application/components/map/layers-view.component.ts
@@ -26,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.Geometry>;
+    public poiGeoJsonData: GeoJSON.FeatureCollection<GeoJSON.Point>;
     public selectedPoiFeature: GeoJSON.Feature<GeoJSON.Point> = null;
     public selectedPoiGeoJson: Immutable<GeoJSON.FeatureCollection> = {
         type: "FeatureCollection",

diff --git a/IsraelHiking.Web/src/application/services/poi.service.spec.ts b/IsraelHiking.Web/src/application/services/poi.service.spec.ts
@@ -125,7 +125,7 @@ describe("Poi Service", () => {
         }
     )));
 
-    it("Should initialize and show pois tiles", (inject([PoiService, HttpTestingController, Store, RunningContextService, MapService],
+    it("Should initialize and show poi tiles, and update when changing language", (inject([PoiService, HttpTestingController, Store, RunningContextService, MapService],
         async (poiService: PoiService, mockBackend: HttpTestingController, store: Store, runningContextService: RunningContextService, mapServiceMock: MapService) => {
 
             store.reset({
@@ -194,12 +194,13 @@ describe("Poi Service", () => {
                 {
                     id: "21",
                     geometry: {
-                        type: "Point",
-                        coordinates: [0, 0]
+                        type: "MultiLineString",
+                        coordinates: [[[1, 1], [2, 2]]]
                     },
                     properties: {
                         natural: "spring",
-                        "name:he": "name"
+                        "name:he": "name",
+                        poiGeolocation: "{\"lat\": 1.1, \"lon\": 1.1 }"
                     }
                 }
             ] as any;
@@ -209,6 +210,8 @@ describe("Poi Service", () => {
             await new Promise((resolve) => setTimeout(resolve, 100)); // this is in order to let the code continue to run to the next await
 
             expect(poiService.poiGeojsonFiltered.features.length).toBe(2);
+            expect(poiService.poiGeojsonFiltered.features.every(f => f.geometry.type === "Point")).toBeTruthy();
+            expect(poiService.poiGeojsonFiltered.features[1].geometry.coordinates).toEqual([1.1, 1.1]);
 
             return promise;
         }

diff --git a/IsraelHiking.Web/src/application/services/poi.service.ts b/IsraelHiking.Web/src/application/services/poi.service.ts
@@ -88,7 +88,7 @@ export class PoiService {
     private queueIsProcessing: boolean = false;
     private offlineState: Immutable<OfflineState>;
 
-    public poiGeojsonFiltered: GeoJSON.FeatureCollection<GeoJSON.Geometry, PoiProperties> = {
+    public poiGeojsonFiltered: GeoJSON.FeatureCollection<GeoJSON.Point, PoiProperties> = {
         type: "FeatureCollection",
         features: []
     };
@@ -286,7 +286,7 @@ export class PoiService {
      * @param id - the id of the poi, for example OSM_way_1234
      * @param poi - the point of interest to adjust
      */
-    private adjustGeolocationBasedOnTileDate(id: string, poi: GeoJSON.Feature<GeoJSON.Geometry, PoiProperties>) {
+    private adjustGeolocationBasedOnTileData(id: string, poi: GeoJSON.Feature<GeoJSON.Geometry, PoiProperties>) {
         if (poi.geometry.type === "Point") {
             return;
         }
@@ -300,7 +300,7 @@ export class PoiService {
         }
     }
 
-    private getPoisFromTiles(): GeoJSON.Feature<GeoJSON.Geometry, PoiProperties>[] {
+    private getPoisFromTiles(): GeoJSON.Feature<GeoJSON.Point, PoiProperties>[] {
         let features: MapGeoJSONFeature[] = [];
         for (const source of Object.keys(PoiService.POIS_MAP)) {
             features = features.concat(this.mapService.map.querySourceFeatures(source, {sourceLayer: PoiService.POIS_MAP[source].sourceLayer}));
@@ -311,7 +311,19 @@ export class PoiService {
             }
         }
         const hashSet = new Set();
-        let pois = features.map(feature => this.convertFeatureToPoi(feature, this.osmTileFeatureToPoiIdentifier(feature)))
+        let pois = features.map(feature => {
+            const poi = this.convertFeatureToPoi(feature, this.osmTileFeatureToPoiIdentifier(feature));
+            // convert to point for clustering
+            const pointFeature: GeoJSON.Feature<GeoJSON.Point, PoiProperties> = {
+                type: "Feature",
+                properties: {...poi.properties},
+                geometry: {
+                    type: "Point",
+                    coordinates: [poi.properties.poiGeolocation.lon, poi.properties.poiGeolocation.lat]
+                }
+            };
+            return pointFeature;
+        });
         pois = pois.filter(p => {
             if (hashSet.has(p.properties.poiId)) {
                 return false;
@@ -347,13 +359,16 @@ export class PoiService {
         poi.properties.identifier = poi.properties.identifier || id;
         poi.properties.poiSource = poi.properties.poiSource || "OSM";
         poi.properties.poiId = poi.properties.poiId || poi.properties.poiSource + "_" + poi.properties.identifier;
+        if (typeof poi.properties.poiGeolocation === "string") {
+            poi.properties.poiGeolocation = JSON.parse(poi.properties.poiGeolocation);
+        }
         poi.properties.poiGeolocation = poi.properties.poiGeolocation || this.getGeolocation(feature);
         poi.properties.poiLanguage = poi.properties.poiLanguage || "all";
         OsmTagsService.setIconColorCategory(feature, poi);
         return poi;
     }
 
-    private filterFeatures(features: GeoJSON.Feature<GeoJSON.Geometry, PoiProperties>[]): GeoJSON.Feature<GeoJSON.Geometry, PoiProperties>[] {
+    private filterFeatures(features: GeoJSON.Feature<GeoJSON.Point, PoiProperties>[]): GeoJSON.Feature<GeoJSON.Point, PoiProperties>[] {
         const visibleFeatures = [];
         const visibleCategories = this.getVisibleCategories();
         const language = this.resources.getCurrentLanguageCodeSimplified();
@@ -500,7 +515,7 @@ export class PoiService {
                     feature.geometry = SpatialService.mergeLines(longGeojson.features) as GeoJSON.Geometry;
                 }
                 const poi = this.convertFeatureToPoi(feature, id);
-                this.adjustGeolocationBasedOnTileDate(id, poi);
+                this.adjustGeolocationBasedOnTileData(id, poi);
                 this.poisCache.splice(0, 0, poi);
                 return cloneDeep(poi);
             } else if (source === "iNature") {