From f10fa1134865d220c8a10d7718921d7ac2def0a2 Mon Sep 17 00:00:00 2001 From: evlist Date: Mon, 28 Nov 2022 15:27:36 +0100 Subject: [PATCH] Basic mechanism to support different tile providers. --- src/App.tsx | 4 +- src/components/get-location/GetLocation.tsx | 2 +- src/components/gpx/styles.ts | 3 +- .../map-tile-provider/MapTileProvider.tsx | 64 +++++++++++++++++++ src/components/map-tile-provider/index.ts | 1 + src/components/map/Map.tsx | 18 +++++- 6 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 src/components/map-tile-provider/MapTileProvider.tsx create mode 100644 src/components/map-tile-provider/index.ts diff --git a/src/App.tsx b/src/App.tsx index 881d783..6da638a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,8 +5,8 @@ import Map from './components/map'; const App: Component = () => { return ( - - } /> + + } /> ); }; diff --git a/src/components/get-location/GetLocation.tsx b/src/components/get-location/GetLocation.tsx index 5fcc2ea..54f35d6 100644 --- a/src/components/get-location/GetLocation.tsx +++ b/src/components/get-location/GetLocation.tsx @@ -21,7 +21,7 @@ const GetLocation: Component = () => { console.log({ caller: 'GetLocation/onClickHandler', position }); const state = getState(); navigate( - `/map/${position.coords.longitude}/${position.coords.latitude}/${state.zoom}/${state.rotation}` + `/map/${state.provider}/${position.coords.longitude}/${position.coords.latitude}/${state.zoom}/${state.rotation}` ); setCurrentLocation({ lon: position.coords.longitude, diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 66b51ea..e72515a 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -40,10 +40,11 @@ const textFill = new Fill({ const wptTextStyle = (feature: Feature) => new Text({ - font: '12px Calibri,sans-serif', + font: '16px Calibri,sans-serif', text: feature.get('name'), fill: textFill, stroke: textStroke, + offsetY: -40, }); const trtksegStyle = new Style({ stroke: trackStrokeStyle }); diff --git a/src/components/map-tile-provider/MapTileProvider.tsx b/src/components/map-tile-provider/MapTileProvider.tsx new file mode 100644 index 0000000..6c9f10f --- /dev/null +++ b/src/components/map-tile-provider/MapTileProvider.tsx @@ -0,0 +1,64 @@ +import OSM from 'ol/source/OSM'; +import XYZ from 'ol/source/XYZ'; +import { Component } from 'solid-js'; + +interface TileProvider { + name: string; + language: string; + source: XYZ; +} + +type TileProviders = { + [key: string]: TileProvider; +}; + +export const mapTileProviders: TileProviders = { + osm: { + name: 'Open Street Map', + language: 'int', + source: new OSM(), + }, + osmfr: { + name: 'Open Street Map France', + language: 'fr', + source: new XYZ({ + minZoom: 0, + maxZoom: 20, + url: 'https://{a-c}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', + }), + }, + otm: { + name: 'Open Topo Map', + language: 'int', + source: new XYZ({ + minZoom: 0, + maxZoom: 20, + url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png', + }), + }, + cyclosm: { + name: 'CyclOSM', + language: 'int', + source: new XYZ({ + minZoom: 0, + maxZoom: 19, + url: 'https://{a-c}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', + }), + }, + //https://b.tile.openstreetmap.fr/openriverboatmap/20/535762/382966.png + openriverboatmap: { + name: 'Open River Boat Map', + language: 'int', + source: new XYZ({ + minZoom: 0, + maxZoom: 19, + url: 'https://{a-c}.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png', + }), + }, +}; + +const MapTilesProvider: Component<{}> = (props) => { + return
; +}; + +export default MapTilesProvider; diff --git a/src/components/map-tile-provider/index.ts b/src/components/map-tile-provider/index.ts new file mode 100644 index 0000000..071bcef --- /dev/null +++ b/src/components/map-tile-provider/index.ts @@ -0,0 +1 @@ +export { default, mapTileProviders } from './MapTileProvider'; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 461d264..6e6346e 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -23,12 +23,14 @@ import ShowLocationIcon from '../get-location/ShowLocationIcon.svg'; import { Back, Forward } from '../back-forward'; import GpxImport from '../gpx-import'; import AllGpxes from '../all-gpxes'; +import { mapTileProviders } from '../map-tile-provider'; const [getState, setState] = createSignal({ lon: 0, lat: 0, rotation: 0, zoom: 0, + provider: 'osm', }); export { getState }; @@ -39,10 +41,20 @@ const Map: Component = () => { const navigate = useNavigate(); let target: HTMLDivElement; - console.log({ caller: 'Map', center: params.center }); createEffect(() => { + console.log({ + caller: 'Map', + params: JSON.stringify({ + provider: params.provider, + lon: params.lon, + lat: params.lat, + rotation: params.rotation, + zoom: params.zoom, + }), + }); setState({ + provider: params.provider, lon: +params.lon, lat: +params.lat, rotation: +params.rotation, @@ -108,7 +120,7 @@ const Map: Component = () => { const center = view?.getCenter(); if (center) { navigate( - `/map/${center[0]}/${ + `/map/${getState().provider}/${center[0]}/${ center[1] }/${view?.getZoom()}/${view?.getRotation()}` ); @@ -129,7 +141,7 @@ const Map: Component = () => { }), layers: [ new TileLayer({ - source: new OSM(), + source: mapTileProviders[params.provider].source, }), new VectorLayer({ source: new VectorSource() }), ],