namazu-ts 0.1.0 → 0.2.1

package/src/maputils.ts

@@ -2,13 +2,7 @@ import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import geojson from 'geojson';
 import { SismoMap } from './sismomap';
-import {
-    SisEvent,
-    EventFeature,
-    EventGeoJSON,
-    EventGeojsonDescriptionProperty,
-    mapLayers,
-} from './types';
+import { SisEvent, EventFeature, EventGeoJSON } from './types';
 import { isEventGeoJSONProperties } from './utils';
 
 /**
@@ -34,6 +28,8 @@ export async function createMap(
         container: containerID,
         style: style,
         center: [0, 0],
+        canvasContextAttributes: { antialias: true },
+        maxPitch: 60,
         zoom: 1, // Low value at the start so we get a "zoom in" animation when loading
         attributionControl: false,
     });
@@ -47,11 +43,14 @@ export async function createMap(
 
     // We use a promise so that people won't use the map before it's fully
     return new Promise<SismoMap>((resolve) => {
-        map.once('load', () => {
+        smap.map.once('load', () => {
+            // We remove these two layers because they're cluttering the visuals
+            smap.map.removeLayer('ferry');
+            smap.map.removeLayer('boundary_2_maritime');
             // We use that to have a flat map when zooming
             // 5 is the value chosen because it covers all the zones of renass.unistra.franceseisme
             // feel free to change to your liking if needed
-            map.setProjection({
+            smap.map.setProjection({
                 type: ['step', ['zoom'], 'vertical-perspective', 5, 'mercator'],
             });
 
@@ -59,39 +58,34 @@ export async function createMap(
                 map.fitBounds(bounds);
             }
 
-            mapLayers.forEach((title: string) => {
-                if (title != 'stations-layer') {
-                    smap.map.on('mouseenter', title, (e) => {
-                        smap.map.getCanvas().style.cursor = 'pointer';
-                        if (e.features == undefined) return;
-                        if (
-                            !isEventGeoJSONProperties(
-                                e.features[0].properties as any
-                            )
+            let titles = ['event-layer', 'station-layer'];
+            titles.forEach((title) => {
+                smap.map.on('mouseenter', title, (e) => {
+                    smap.map.getCanvas().style.cursor = 'pointer';
+                    if (e.features == undefined) return;
+                    if (
+                        !isEventGeoJSONProperties(
+                            e.features[0].properties as any
                         )
-                            return;
-                        let text = JSON.parse(
-                            e.features[0].properties.description
-                        );
-                        console.log(text);
+                    )
+                        return;
+                    let text = JSON.parse(e.features[0].properties.description);
 
-                        // Pretty ugly but as we know, it'll always be a point, we can do it like this
-                        const feature = e
-                            .features![0] as geojson.Feature<geojson.Point>;
-                        const [lng, lat] = feature.geometry.coordinates;
+                    // Pretty ugly but as we know, it'll always be a point, we can do it like this
+                    const feature = e
+                        .features![0] as geojson.Feature<geojson.Point>;
+                    const [lng, lat] = feature.geometry.coordinates;
 
-                        descPopup
-                            .setLngLat([lng, lat])
-                            .setHTML(text[lang])
-                            .addTo(smap.map);
-                    });
-                    smap.map.on('mouseleave', title, () => {
-                        descPopup.remove();
-                        smap.map.getCanvas().style.cursor = '';
-                    });
-                }
+                    descPopup
+                        .setLngLat([lng, lat])
+                        .setHTML(text[lang])
+                        .addTo(smap.map);
+                });
+                smap.map.on('mouseleave', title, () => {
+                    descPopup.remove();
+                    smap.map.getCanvas().style.cursor = '';
+                });
             });
-
             resolve(smap);
         });
     });

package/src/sismomap.ts

@@ -1,14 +1,30 @@
 import maplibregl from 'maplibre-gl';
-import { EventGeoJSON, mapLayers, SisEvent } from './types';
-import { isEventGeoJSONProperties, isEventGeoJSON } from './utils';
+import {
+    EventGeoJSON,
+    EventPhases,
+    SisEvent,
+    GeoJSON,
+    Station,
+    StationGeoJSON,
+    InfosPhase,
+    StationPhases,
+} from './types';
+import { isEventGeoJSON } from './utils';
+import { Client } from './client';
 import { bbox } from '@turf/turf';
 import { EventToEventGeoJSON } from './maputils';
+import { ok, err, Result } from 'neverthrow';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import * as MTP from '@dvt3d/maplibre-three-plugin';
 
 export class SismoMap {
     name: string;
     map: maplibregl.Map;
     descPopup: maplibregl.Popup;
-
+    _layers: string[];
+    _sources: string[];
+    _mapscene: MTP.MapScene;
     /**
      * Not meant to use, use createMap instead
      */
@@ -20,22 +36,149 @@ export class SismoMap {
         this.name = name;
         this.map = map;
         this.descPopup = descPopup;
+        this._layers = [];
+        this._sources = [];
+        this._mapscene = new MTP.MapScene(this.map as any);
+
+        this._mapscene.addLight(new THREE.AmbientLight(0xffffff, 0.8));
     }
 
     /**
      * Removes all user-made layers
      */
     clear() {
-        mapLayers.forEach((title) => {
-            if (this.map.getLayer(title)) {
-                this.map.removeLayer(title);
+        this._layers.forEach((layer: string) => {
+            if (this.map.getLayer(layer)) {
+                this.map.removeLayer(layer);
             }
-            if (this.map.getSource('src')) {
-                this.map.removeSource('src');
+        });
+
+        this._sources.forEach((source: string) => {
+            if (this.map.getSource(source)) {
+                this.map.removeSource(source);
             }
         });
     }
 
+    async displayStations(
+        client: Client,
+        event: SisEvent | EventGeoJSON,
+        moveView: boolean = true,
+        clear: boolean = true,
+        stationOnly: boolean = false,
+        model3D: boolean = true
+    ) {
+        let eventGeo: EventGeoJSON;
+        // Type guard to distincting the overloading cases
+        if (isEventGeoJSON(event)) {
+            eventGeo = event;
+        } else {
+            eventGeo = EventToEventGeoJSON(event);
+        }
+
+        if (eventGeo.features.length != 1) {
+            return Promise.reject(
+                Error(
+                    'If passing a EventGeoJSON, it should only have one feature'
+                )
+            );
+        }
+
+        if (!stationOnly) this.displayEvents(eventGeo, false, clear);
+
+        // I put the await later because it doesn't have dependencies when creating the station,string map
+        let phasesPromise = client.getEventPhases(eventGeo);
+        let zone = await client.getZoneNameByEvent(eventGeo);
+        let stationList = await client.getStationsByZoneName(zone);
+
+        // We create a map with the stations so our search is o(1) with just a o(n) to create the map
+        let stationsMap: Map<string, StationPhases> = new Map<
+            string,
+            StationPhases
+        >();
+        stationList.features.forEach((station: Station) => {
+            let stationPhase: StationPhases = station as StationPhases;
+            stationPhase.properties.phases = [];
+            stationsMap.set(stationPhase.properties.stationcode, stationPhase);
+        });
+
+        let phases: EventPhases = await phasesPromise;
+        let absentStations: InfosPhase[] = [];
+        let stationsGeoJSON: StationGeoJSON = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+
+        phases.forEach((phase: InfosPhase) => {
+            let station = stationsMap.get(phase.stationCode);
+            if (station == undefined) {
+                absentStations.push(phase);
+                return;
+            }
+            station?.properties.phases.push(phase);
+        });
+
+        stationsMap.forEach((station) => {
+            if (station.properties.phases.length == 0) return;
+            station.properties.description = {
+                fr: station.properties.stationcode,
+                en: station.properties.stationcode,
+            };
+            stationsGeoJSON.features.push(station);
+        });
+
+        console.log('Absent stations : ');
+        console.log(absentStations);
+
+        if (model3D) {
+            stationsGeoJSON.features.forEach((station: StationPhases) => {
+                this.addStation(station.geometry.coordinates);
+            });
+            if (moveView) {
+                this.centerView(stationsGeoJSON);
+            }
+        } else {
+            const svgImage = new Image(20, 20);
+            const triangleSVG = `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+            <polygon points="12,2 22,22 2,22" fill="blue" />
+          </svg>`;
+
+            const encodedSVG = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(triangleSVG)}`;
+
+            svgImage.src = encodedSVG;
+
+            svgImage.onload = () => {
+                this.map.addImage('triangle', svgImage);
+            };
+
+            let layerSpec: maplibregl.AddLayerObject = {
+                id: 'station-layer',
+                source: 'stat',
+
+                type: 'symbol',
+                layout: {
+                    'icon-image': 'triangle',
+                    'icon-allow-overlap': true,
+                    'icon-size': 0.8,
+                },
+            };
+
+            if (
+                this.displayGeoJSON(
+                    stationsGeoJSON,
+                    'stat',
+                    layerSpec,
+                    moveView,
+                    false
+                ).isErr()
+            )
+                return Promise.reject();
+        }
+
+        return Promise.resolve();
+    }
+
     /**
      * @param eventOrList Can either be a single Event (via /events API) or a FDSN GeoJSON
      * @param moveView True = The view moves on the events' bounding box while displaying (does not affect user's possible behaviour on the map)
@@ -48,21 +191,144 @@ export class SismoMap {
     ) {
         let eventList: EventGeoJSON;
 
-        // Type guard to disting the overloading cases
+        // Type guard to distincting the overloading cases
         if (isEventGeoJSON(eventOrList)) {
             eventList = eventOrList;
         } else {
             eventList = EventToEventGeoJSON(eventOrList as SisEvent);
         }
+        let layerSpec: maplibregl.AddLayerObject = {
+            id: 'event-layer',
+            source: 'src',
+            type: 'circle',
+            paint: {
+                // Inspired by https://renass.unistra.fr/js/events.js
+                'circle-radius': ['*', 8, ['ln', ['+', 1, ['get', 'mag']]]],
+                'circle-color': '#B42222',
+                'circle-opacity': 0.8,
+                'circle-stroke-width': 1,
+                'circle-stroke-opacity': 0.9,
+            },
+        };
+
+        this.displayGeoJSON(eventList, 'src', layerSpec, moveView, clear);
+    }
+
+    // Updates a source by appending new data
+    // Take care to add the good type, dangerous function and should be
+    private updateSource(sourceName: string, newData: GeoJSON) {
+        let source: maplibregl.GeoJSONSource | undefined =
+            this.map.getSource(sourceName);
+        let data = source?._data.geojson;
+        if (data === undefined) return;
+        let geojson: GeoJSON = data as GeoJSON;
+
+        geojson.features = (geojson.features as any).concat(newData.features);
+        source?.setData(geojson as any); // It's good but can't do better as stated in line 104
+    }
+
+    private centerView(geojson: GeoJSON) {
+        if (geojson.features.length == 1) {
+            let lng: number = geojson.features[0].geometry.coordinates[0];
+            let lat: number = geojson.features[0].geometry.coordinates[1];
+            this.map.flyTo({ center: [lng, lat], zoom: 6 });
+        } else {
+            // Inter-library operability is annoying, this line will always work with the types i'll give it
+            // but i'm sorry for the double cast as any, can't do better :(
+            let bounds = bbox(geojson as any);
+            let margin = [-0.5, -0.5, 0.5, 0.5];
+            for (let i = 0; i < 4; i++) {
+                bounds[i] += margin[i];
+            }
+
+            this.map.fitBounds(bounds as any);
+        }
+    }
+
+    private displayGeoJSON(
+        geojson: GeoJSON,
+        sourceName: string,
+        layerSpec: maplibregl.AddLayerObject,
+        moveView: boolean,
+        clear: boolean
+    ): Result<null, Error> {
+        if (geojson.features.length == 0) return ok(null);
 
         if (clear) {
             this.clear();
+            this.map.addSource(sourceName, {
+                type: 'geojson',
+                data: geojson as any,
+            });
+
+            this.map.addLayer(layerSpec);
+        } else if (!clear && !this.map.getSource(sourceName)) {
+            this.map.addSource(sourceName, {
+                type: 'geojson',
+                data: geojson as any,
+            });
+            this.map.addLayer(layerSpec);
+        } else {
+            this.updateSource(sourceName, geojson);
+        }
+        if (moveView) {
+            this.centerView(geojson);
+        }
+
+        this._sources.push(sourceName);
+        this._layers.push(layerSpec.id);
+
+        return ok(null);
+    }
+
+    private addStation(coord: number[]) {
+        const geometry = new THREE.ConeGeometry(50, 100, 3);
+        const material = new THREE.MeshPhongMaterial({
+            color: 0x0000ff,
+            shininess: 100,
+            side: THREE.DoubleSide,
+        });
+        let cone = new THREE.Mesh(geometry, material);
+
+        cone = cone.rotateX(THREE.MathUtils.degToRad(90));
+        cone.scale.set(50, 50, 50);
+        cone.position.y = 50;
+
+        const scale = MTP.SceneTransform.projectedUnitsPerMeter(48.58);
+        const rtcGroup = MTP.Creator.createRTCGroup(
+            coord,
+            [0, 0, 0],
+            [scale, scale, scale]
+        );
+
+        rtcGroup.add(cone);
+        this._mapscene.addObject(rtcGroup);
+    }
+
+    getEventNumber(): Result<number, Error> {
+        let source = this.getSourceGeoJSON();
+        let length = 0;
+        if (source.isErr()) return err(source.error);
+        source.map((s: EventGeoJSON) => {
+            length = s.features.length;
+        });
+
+        return ok(length);
+    }
+
+    getSourceGeoJSON(): Result<EventGeoJSON, Error> {
+        let source: maplibregl.GeoJSONSource | undefined =
+            this.map.getSource('src');
+        let data = source?._data.geojson;
+        if (data === undefined) {
+            return err(Error('Source not defined yet'));
         }
-        if (eventList.features.length == 0) return;
+        return ok(data as EventGeoJSON);
+    }
+}
 
-        this.map.addSource('src', { type: 'geojson', data: eventList as any });
-        eventList.features.forEach((feature) => {
-            let eventType: string;
+/*
+ let eventType: string;
             let typeName: string;
             if (!isEventGeoJSONProperties(feature.properties)) {
                 eventType = feature.properties.eventType;
@@ -73,36 +339,5 @@ export class SismoMap {
             }
             let layerName = eventType == null ? 'event' : eventType;
             if (this.map.getLayer(layerName)) return;
-            this.map.addLayer({
-                id: layerName,
-                source: 'src',
-                type: 'circle',
-                paint: {
-                    // Inspired by https://renass.unistra.fr/js/events.js
-                    'circle-radius': ['*', 8, ['ln', ['+', 1, ['get', 'mag']]]],
-                    'circle-color': '#B42222',
-                    'circle-opacity': 0.8,
-                    'circle-stroke-width': 1,
-                    'circle-stroke-opacity': 0.9,
-                },
-                filter: ['==', eventType, ['get', typeName]],
-            });
-        });
-        if (moveView) {
-            if (eventList.features.length == 1) {
-                let lng: number = eventList.features[0].geometry.coordinates[0];
-                let lat: number = eventList.features[0].geometry.coordinates[1];
-                this.map.flyTo({ center: [lng, lat], zoom: 6 });
-            } else {
-                // Inter-library operability is annoying, this line will always work with the types i'll give it
-                let bounds = bbox(eventList as any);
-                let margin = [-0.5, -0.5, 0.5, 0.5];
-                for (let i = 0; i < 4; i++) {
-                    bounds[i] += margin[i];
-                }
-
-                this.map.fitBounds(bounds as any);
-            }
-        }
-    }
-}
+
+ */

package/src/types.ts

@@ -235,3 +235,101 @@ export type Form = {
     groups: QuestionGroup[];
     questions: Question[];
 };
+
+export type InfosPhase = {
+    time: Date;
+    automatic: boolean;
+    distance: number;
+    azimuth: number;
+    arrivalID: number;
+    channelCode: string;
+    locationCode: string;
+    networkCode: string;
+    originID: number;
+    phaseCode: string;
+    pickID: number;
+    stationCode: string;
+    timeResidual: Date;
+};
+
+export type EventPhases = InfosPhase[];
+
+export type Station = {
+    properties: {
+        networkcode: string;
+        networkcolor: string;
+        stationcode: string;
+    };
+    geometry: {
+        coordinates: number[];
+        crs: {
+            properties: {
+                name: string;
+            };
+            type: string;
+        };
+        type: string;
+    };
+};
+
+export type StationPhases = Station & {
+    properties: {
+        phases: EventPhases;
+        description: {
+            en: string;
+            fr: string;
+        }
+    };
+};
+
+export type StationGeoJSON = {
+    type: string;
+    features: StationPhases[];
+};
+
+export const ZoneNames = [
+    'la-reunion',
+    'france',
+    'mayotte',
+    'monde',
+    'les-antilles',
+];
+
+export type Zones = {
+    type: string;
+    features: Zone[];
+};
+
+export type Zone = {
+    properties: {
+        name: string;
+        buffer: number;
+        minimal_longitude: number;
+        maximal_longitude: number;
+        minimal_latitude: number;
+        maximal_latitude: number;
+        automatic_maximal_depth: number;
+        automatic_minimal_magnitude: number;
+        automatic_minimal_used_phase_count: number;
+        city_form_id: number;
+        individual_form_id: number;
+        manual_event_types: string[];
+        manual_maximal_depth: number;
+        manual_minimal_magnitude: number;
+        manual_minimal_used_phase_count: number;
+        show_automatic: boolean;
+        show_manual: boolean;
+    };
+    geometry: {
+        coordinates: number[][][][];
+        crs: {
+            properties: {
+                name: string;
+            };
+            type: string;
+        };
+        type: string;
+    };
+};
+
+export type GeoJSON = EventGeoJSON | StationGeoJSON;