⚡️ All provided location are in EPSG:3857, remove proj4 from frontend

frontend/package.json

@@ -7,12 +7,12 @@
 		"start": "vite",
 		"dev": "vite --debug",
 		"build": "vite build",
-    "serve": "vite preview"
+		"serve": "vite preview",
+		"bundle-visualizer": "npx vite-bundle-visualizer"
 	},
 	"license": "MIT",
 	"devDependencies": {
 		"@types/leaflet": "^1.9.0",
-    "@types/proj4": "^2.5.2",
 		"@vitejs/plugin-basic-ssl": "^1.0.1",
 		"eslint": "^8.32.0",
 		"eslint-plugin-solid": "^0.9.3",
@@ -20,10 +20,10 @@
 		"typescript": "^4.9.4",
 		"typescript-eslint-language-service": "^5.0.0",
 		"vite": "^4.0.3",
+		"vite-bundle-visualizer": "^0.6.0",
 		"vite-plugin-solid": "^2.5.0"
 	},
 	"dependencies": {
-    "@hope-ui/solid": "^0.6.7",
 		"@motionone/solid": "^10.15.5",
 		"@solid-primitives/date": "^2.0.5",
 		"@solid-primitives/scroll": "^2.0.10",
@@ -31,7 +31,6 @@
 		"date-fns": "^2.29.3",
 		"matrix-widget-api": "^1.1.1",
 		"ol": "^7.3.0",
-    "proj4": "^2.9.0",
 		"solid-js": "^1.6.6",
 		"solid-transition-group": "^0.0.10"
 	}

frontend/src/stopsSearchMenu.tsx

@@ -12,29 +12,20 @@ import OlOverlay from 'ol/Overlay';
 import OlPoint from 'ol/geom/Point';
 import OlPolygon from 'ol/geom/Polygon';
 import OlVectorSource from 'ol/source/Vector';
-import { fromLonLat, toLonLat } from 'ol/proj';
 import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer';
 import { Circle, Fill, Stroke, Style } from 'ol/style';
 import { easeOut } from 'ol/easing';
 import { getVectorContext } from 'ol/render';
 import { unByKey } from 'ol/Observable';
 
-import { register } from 'ol/proj/proj4';
-
-import proj4 from 'proj4';
-
 import { Stop, StopShape } from './types';
 import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils';
-
 import { AppContextContext, AppContextStore } from "./appContext";
 import { BusinessDataContext, BusinessDataStore } from "./businessData";
 
 import "./stopsSearchMenu.scss";
 
 
-proj4.defs("EPSG:2154", "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
-register(proj4);
-
 type ByStopIdMapFeatures = Record<number, OlFeature>;
 
 interface SearchStore {
@@ -166,7 +157,6 @@ function SearchProvider(props: { children: JSX.Element }) {
 		setStore('mapFeatures', stopId, feature);
 	};
 
-
 	return (
 		<SearchContext.Provider value={{
 			getSearchText, setSearchText,
@@ -200,7 +190,6 @@ const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) =>
 	const { setSearchText } = searchStore;
 
 	const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
-		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
 		const stopName = event.currentTarget.value;
 		if (stopName.length >= props.minCharsNb) {
 			await setSearchText(stopName, businessDataStore);
@@ -361,7 +350,6 @@ const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
 	}
 
 	const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore;
-
 	let stopsPanelsRef: HTMLDivElement | undefined = undefined
 	const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef);
 	const yStopsPanelsScroll = () => stopsPanelsScroll.y;
@@ -507,15 +495,13 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop
 
 		let feature = undefined;
 
-		if (props.stop.lat !== undefined && props.stop.lon !== undefined) {
+		if (props.stop.epsg3857_x !== undefined && props.stop.epsg3857_y !== undefined) {
 			const selectStopStyle = () => {
 				return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle);
 			}
-
 			feature = new OlFeature({
-				geometry: new OlPoint(fromLonLat([props.stop.lon, props.stop.lat])),
+				geometry: new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]),
 			});
-
 			feature.setStyle(selectStopStyle);
 		}
 
@@ -523,11 +509,10 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop
 			let geometry = undefined;
 			const areaShape = shape();
 			if (areaShape !== undefined) {
-				const transformed = areaShape.points.map(point => fromLonLat(toLonLat(point, 'EPSG:2154')));
-				geometry = new OlPolygon([transformed.slice(0, -1)]);
+				geometry = new OlPolygon([areaShape.epsg3857_points.slice(0, -1)]);
 			}
 			else {
-				geometry = new OlPoint(fromLonLat([props.stop.lon, props.stop.lat]));
+				geometry = new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]);
 			}
 			feature = new OlFeature({ geometry: geometry });
 			feature.setStyle(stopAreaStyle);
@@ -613,11 +598,11 @@ const Map: ParentComponent<{}> = () => {
 		const stopId: number = feature.getId();
 		const stop = getStop(stopId);
 		// TODO: Handle StopArea (use center given by the backend)
-		if (stop?.lat !== undefined && stop?.lon !== undefined) {
+		if (stop?.epsg3857_x !== undefined && stop?.epsg3857_y !== undefined) {
 			setSelectedMapStop(stop);
 			map?.getView().animate(
 				{
-					center: fromLonLat([stop.lon, stop.lat]),
+					center: [stop.epsg3857_x, stop.epsg3857_y],
 					duration: 1000
 				},
 				// Display the popup once the animation finished

frontend/src/types.tsx

@@ -42,17 +42,17 @@ export class Stop {
 	id: number;
 	name: string;
 	town: string;
-	lat: number;
-	lon: number;
+	epsg3857_x: number;
+	epsg3857_y: number;
 	stops: Stop[];
 	lines: string[];
 
-	constructor(id: number, name: string, town: string, lat: number, lon: number, stops: Stop[], lines: string[]) {
+	constructor(id: number, name: string, town: string, epsg3857_x: number, epsg3857_y: number, stops: Stop[], lines: string[]) {
 		this.id = id;
 		this.name = name;
 		this.town = town;
-		this.lat = lat;
-		this.lon = lon;
+		this.epsg3857_x = epsg3857_x;
+		this.epsg3857_y = epsg3857_y;
 		this.stops = stops;
 		this.lines = lines;
 		for (const stop of this.stops) {
@@ -68,14 +68,14 @@ export type Points = [number, number][];
 export class StopShape {
 	stop_id: number;
 	type_: number;
-	bounding_box: number[];
-	points: Points;
+	epsg3857_bbox: number[];
+	epsg3857_points: Points;
 
-	constructor(stop_id: number, type_: number, bounding_box: number[], points: Points) {
+	constructor(stop_id: number, type_: number, epsg3857_bbox: number[], epsg3857_points: Points) {
 		this.stop_id = stop_id;
 		this.type_ = type_;
-		this.bounding_box = bounding_box;
-		this.points = points;
+		this.epsg3857_bbox = epsg3857_bbox;
+		this.epsg3857_points = epsg3857_points;
 	}
 };