diff --git a/public/basemaps-icons/harbor.png b/public/basemaps-icons/harbor.png index 1f3c05b..f3ba9c3 100644 Binary files a/public/basemaps-icons/harbor.png and b/public/basemaps-icons/harbor.png differ diff --git a/public/basemaps-icons/incident.png b/public/basemaps-icons/incident.png index 87a968c..de9107d 100644 Binary files a/public/basemaps-icons/incident.png and b/public/basemaps-icons/incident.png differ diff --git a/public/basemaps-icons/shipwreck.png b/public/basemaps-icons/shipwreck.png index 655298c..97139b3 100644 Binary files a/public/basemaps-icons/shipwreck.png and b/public/basemaps-icons/shipwreck.png differ diff --git a/public/basemaps-icons/srr.png b/public/basemaps-icons/srr.png index 413e3b8..cc12173 100644 Binary files a/public/basemaps-icons/srr.png and b/public/basemaps-icons/srr.png differ diff --git a/src/assets/CartONG_logo.svg b/src/assets/CartONG_logo.svg new file mode 100644 index 0000000..db011cf --- /dev/null +++ b/src/assets/CartONG_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Cartong_logo.png b/src/assets/Cartong_logo.png index 3cf0234..ee01e7a 100644 Binary files a/src/assets/Cartong_logo.png and b/src/assets/Cartong_logo.png differ diff --git a/src/assets/comments.svg b/src/assets/comments.svg new file mode 100644 index 0000000..4633f7e --- /dev/null +++ b/src/assets/comments.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/shipwreck.svg b/src/assets/shipwreck.svg new file mode 100644 index 0000000..3b92bf5 --- /dev/null +++ b/src/assets/shipwreck.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/warning.svg b/src/assets/warning.svg new file mode 100644 index 0000000..d0154c9 --- /dev/null +++ b/src/assets/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/classes/BaseMap.ts b/src/classes/BaseMap.ts index dcf7473..f8514aa 100644 --- a/src/classes/BaseMap.ts +++ b/src/classes/BaseMap.ts @@ -1,13 +1,12 @@ /* eslint-disable no-return-assign */ import { OpsData } from "./data/OpsData" import { MapboxGLButtonControl } from "./MapboxGLButtonControl" -import { GeoJSONSource, LngLatBounds, LngLatLike, Map, MapMouseEvent, NavigationControl, Popup } from "mapbox-gl" -// import { showOperationPopUp } from "./PopUpAndStats" -import { FeatureCollection, Point } from "geojson" +import { GeoJSONSource, LngLatBounds, Map, MapMouseEvent, NavigationControl, Popup } from "mapbox-gl" +import { FeatureCollection } from "geojson" import "mapbox-gl/dist/mapbox-gl.css" import { BaseMapPickerControl } from "./BaseMapPickerControl" import { opsDataToGeoJSON } from "@/utils/arrayToGeojson" -import { ref } from "vue" +import { ref, reactive } from "vue" import { Store } from "@/Store" import { store } from "@/main" import { DataState, PopUpType } from "./State" @@ -43,7 +42,15 @@ export const BASEMAPS: Array = [{ // Global variable used for setting on/off map event like click on operations layer // Explanation here: https://stackoverflow.com/questions/63036623/how-to-disable-an-event-listener-in-mapbox let map: Map -const popup = new Popup({ closeOnClick: false, closeButton: false }) +// const popup = new Popup({ closeOnClick: false, closeButton: false, className: "harborPopUp" }) +export const harborPopUp = reactive({ + visible: false, + content: "", + coordinates: { + x: 0, + y: 0 + } +}) export class BaseMap { private map!: Map @@ -194,6 +201,8 @@ export class BaseMap { "#F03E1B", "Transfer", "#9CA3AF", + "Medevac", + "#1A2747", /* other */ "#000" ] } @@ -227,7 +236,7 @@ export class BaseMap { type: "circle", source: "Deaths", paint: { - "circle-radius": ["step", ["zoom"], 6, 6, 8, 7.5, 10, 9, 12], + "circle-radius": ["step", ["zoom"], 4, 6, 6, 7.5, 8, 9, 10], "circle-color": "#000000" } }) @@ -241,7 +250,7 @@ export class BaseMap { layout: { "text-field": ["get", "deathNumber"], // "text-size": ["step", ["zoom"], 0, 13, 15], - "text-size": 12, + "text-size": 10, "text-justify": "auto", "text-font": ["Open Sans Semibold"] } @@ -255,7 +264,7 @@ export class BaseMap { source: "Shipwrecks", layout: { "icon-image": "shipwreck", - "icon-size": 0.5, + "icon-size": ["step", ["zoom"], 0.2, 6, 0.3, 7.5, 0.4, 9, 0.5], "icon-allow-overlap": true } }) @@ -263,8 +272,15 @@ export class BaseMap { private clickOnDataLayer (e: MapMouseEvent) { const data = map.queryRenderedFeatures(e.point)[0].properties - data!.imageSrc = data!.imageSrc ? data!.imageSrc.split(";").filter((x: any) => x !== "") : "" - data!.videoSrc = data!.videoSrc ? data!.videoSrc.split(";").filter((x: any) => x !== "") : "" + data!.imageSrc = data!.imageSrc ? data!.imageSrc.split(";").filter((x: any) => x !== "") : [] + data!.videoSrc = data!.videoSrc ? data!.videoSrc.split(";").filter((x: any) => x !== "") : [] + if (data!.testimonyName) { + data!.testimonyName = data!.testimonyName !== "[]" ? data!.testimonyName.split(";").filter((x: any) => x !== "") : [] + data!.testimonySrc = data!.testimonySrc !== "[]" ? data!.testimonySrc.split(";").filter((x: any) => x !== "") : [] + } else { + data!.testimonyName = [] + data!.testimonySrc = [] + } let type = PopUpType.OPS if (data?.type && data.type === OtherDataTypes.INCIDENT) type = PopUpType.INCIDENT if (data?.type && data.type === OtherDataTypes.DEATH) type = PopUpType.DEAD @@ -279,7 +295,7 @@ export class BaseMap { source: "harbors", layout: { "icon-image": "harbor", - "icon-size": 0.35, + "icon-size": 0.45, "icon-allow-overlap": true } }) @@ -288,14 +304,13 @@ export class BaseMap { } private setHarborsPopUp (e: MapMouseEvent) { - const features = map.queryRenderedFeatures(e.point, { layers: ["harbors"] }) - popup - .setLngLat((features[0].geometry as Point).coordinates as LngLatLike) - .setHTML(`

${features[0].properties?.name}

`).addTo(map) + harborPopUp.coordinates = e.point + harborPopUp.content = map.queryRenderedFeatures(e.point, { layers: ["harbors"] })[0].properties?.name + harborPopUp.visible = true } private removeHarborsPopUp () { - popup.remove() + harborPopUp.visible = false } private addSarLayers () { @@ -325,7 +340,7 @@ export class BaseMap { this.map.off("mouseenter", "harbors", this.setHarborsPopUp) this.map.off("mouseleave", "harbors", this.removeHarborsPopUp) } - if (this.filtersState.rescue || this.filtersState.transfer) { + if (this.filtersState.rescue || this.filtersState.transfer || this.filtersState.medEvac) { if (!this.map.getLayer("Operation")) this.addOperationLayer() this.filterOperationsData() } else { @@ -365,6 +380,9 @@ export class BaseMap { if (!this.filtersState.transfer) { this.filteredOperationsData = this.operationsData.filter(x => x.typeOps !== "Transfer") } + if (!this.filtersState.medEvac) { + this.filteredOperationsData = this.operationsData.filter(x => x.typeOps !== "Medevac") + } (this.map.getSource("operations") as GeoJSONSource).setData(opsDataToGeoJSON(this.filteredOperationsData)) } diff --git a/src/classes/data/OpsData.ts b/src/classes/data/OpsData.ts index 2301411..49531d0 100644 --- a/src/classes/data/OpsData.ts +++ b/src/classes/data/OpsData.ts @@ -4,7 +4,8 @@ const dataRequestUrl = `https://sheets.googleapis.com/v4/spreadsheets/1opF61Qq2D export enum TypeOps { rescue = "Rescue", - transfer = "Transfer" + transfer = "Transfer", + medEvac = "Medevac" } export interface OpsData { @@ -28,8 +29,8 @@ export interface OpsData { imageSrc: string[] videoSrc: string[] portDisembarkation : string - testimonyName: string; - testimonySrc: string; + testimonyName: string[]; + testimonySrc: string[]; } const createDate = function (dateDayFirst: string) { @@ -86,8 +87,8 @@ const convertOpsData = function (rawOpsData: {[key: string]: string}, metadataEr res.imageSrc = rawOpsData.imageSrc ? rawOpsData.imageSrc.split(";") : [] res.videoSrc = rawOpsData.videoSrv ? rawOpsData.videoSrv.split(";") : [] res.portDisembarkation = rawOpsData.PortDisembarkation - res.testimonyName = rawOpsData.testimony_name - res.testimonySrc = rawOpsData.testimony_src + res.testimonyName = rawOpsData.testimony_name ? rawOpsData.testimony_name.split(";") : [] + res.testimonySrc = rawOpsData.testimony_src ? rawOpsData.testimony_src.split(";") : [] return res } diff --git a/src/classes/data/OtherData.ts b/src/classes/data/OtherData.ts index d373e99..5709fc1 100644 --- a/src/classes/data/OtherData.ts +++ b/src/classes/data/OtherData.ts @@ -87,8 +87,8 @@ export interface OtherData { incAction: string; shipwreckNumber: number; boatInvolved: string; - testimonyName: string; - testimonySrc: string; + testimonyName: string[]; + testimonySrc: string[]; imageSrc: string[]; videoSrc: string[]; } diff --git a/src/components/BaseMap.vue b/src/components/BaseMap.vue index 12ef931..146463e 100644 --- a/src/components/BaseMap.vue +++ b/src/components/BaseMap.vue @@ -1,8 +1,11 @@ + + diff --git a/src/components/Header.vue b/src/components/Header.vue index 5a5ee56..bc3eadd 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -39,8 +39,8 @@