diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.html b/IsraelHiking.Web/src/application/components/map/layers-view.component.html index 86b3b37e2..d60e95043 100644 --- 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 @@ - - {{getTitle(hoverFeature)}} + +
{{getTitle(hoverFeature)}}
diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.ts b/IsraelHiking.Web/src/application/components/map/layers-view.component.ts index 5ee5255cf..ccd4adb85 100644 --- 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; + public poiGeoJsonData: GeoJSON.FeatureCollection; public selectedPoiFeature: GeoJSON.Feature = null; public selectedPoiGeoJson: Immutable = { type: "FeatureCollection", diff --git a/IsraelHiking.Web/src/application/services/poi.service.spec.ts b/IsraelHiking.Web/src/application/services/poi.service.spec.ts index 59cbffa5c..28d383504 100644 --- 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 index bc6cc5b8f..ebbf42731 100644 --- 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; - public poiGeojsonFiltered: GeoJSON.FeatureCollection = { + public poiGeojsonFiltered: GeoJSON.FeatureCollection = { 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) { + private adjustGeolocationBasedOnTileData(id: string, poi: GeoJSON.Feature) { if (poi.geometry.type === "Point") { return; } @@ -300,7 +300,7 @@ export class PoiService { } } - private getPoisFromTiles(): GeoJSON.Feature[] { + private getPoisFromTiles(): GeoJSON.Feature[] { 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 = { + 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.Feature[] { + private filterFeatures(features: GeoJSON.Feature[]): GeoJSON.Feature[] { 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") {