Basic mechanism to support different tile providers.

This commit is contained in:
Eric van der Vlist 2022-11-28 15:27:36 +01:00
parent 1fb7f47c05
commit f10fa11348
6 changed files with 85 additions and 7 deletions

View File

@ -5,8 +5,8 @@ import Map from './components/map';
const App: Component = () => { const App: Component = () => {
return ( return (
<Routes> <Routes>
<Route path='/map/:lon/:lat/:zoom/:rotation' component={Map} /> <Route path='/map/:provider/:lon/:lat/:zoom/:rotation' component={Map} />
<Route path='/*' element={<Navigate href='/map/0/0/1/0' />} /> <Route path='/*' element={<Navigate href='/map/osm/0/0/2/0' />} />
</Routes> </Routes>
); );
}; };

View File

@ -21,7 +21,7 @@ const GetLocation: Component = () => {
console.log({ caller: 'GetLocation/onClickHandler', position }); console.log({ caller: 'GetLocation/onClickHandler', position });
const state = getState(); const state = getState();
navigate( 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({ setCurrentLocation({
lon: position.coords.longitude, lon: position.coords.longitude,

View File

@ -40,10 +40,11 @@ const textFill = new Fill({
const wptTextStyle = (feature: Feature) => const wptTextStyle = (feature: Feature) =>
new Text({ new Text({
font: '12px Calibri,sans-serif', font: '16px Calibri,sans-serif',
text: feature.get('name'), text: feature.get('name'),
fill: textFill, fill: textFill,
stroke: textStroke, stroke: textStroke,
offsetY: -40,
}); });
const trtksegStyle = new Style({ stroke: trackStrokeStyle }); const trtksegStyle = new Style({ stroke: trackStrokeStyle });

View File

@ -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 <div></div>;
};
export default MapTilesProvider;

View File

@ -0,0 +1 @@
export { default, mapTileProviders } from './MapTileProvider';

View File

@ -23,12 +23,14 @@ import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
import { Back, Forward } from '../back-forward'; import { Back, Forward } from '../back-forward';
import GpxImport from '../gpx-import'; import GpxImport from '../gpx-import';
import AllGpxes from '../all-gpxes'; import AllGpxes from '../all-gpxes';
import { mapTileProviders } from '../map-tile-provider';
const [getState, setState] = createSignal({ const [getState, setState] = createSignal({
lon: 0, lon: 0,
lat: 0, lat: 0,
rotation: 0, rotation: 0,
zoom: 0, zoom: 0,
provider: 'osm',
}); });
export { getState }; export { getState };
@ -39,10 +41,20 @@ const Map: Component = () => {
const navigate = useNavigate(); const navigate = useNavigate();
let target: HTMLDivElement; let target: HTMLDivElement;
console.log({ caller: 'Map', center: params.center });
createEffect(() => { createEffect(() => {
console.log({
caller: 'Map',
params: JSON.stringify({
provider: params.provider,
lon: params.lon,
lat: params.lat,
rotation: params.rotation,
zoom: params.zoom,
}),
});
setState({ setState({
provider: params.provider,
lon: +params.lon, lon: +params.lon,
lat: +params.lat, lat: +params.lat,
rotation: +params.rotation, rotation: +params.rotation,
@ -108,7 +120,7 @@ const Map: Component = () => {
const center = view?.getCenter(); const center = view?.getCenter();
if (center) { if (center) {
navigate( navigate(
`/map/${center[0]}/${ `/map/${getState().provider}/${center[0]}/${
center[1] center[1]
}/${view?.getZoom()}/${view?.getRotation()}` }/${view?.getZoom()}/${view?.getRotation()}`
); );
@ -129,7 +141,7 @@ const Map: Component = () => {
}), }),
layers: [ layers: [
new TileLayer({ new TileLayer({
source: new OSM(), source: mapTileProviders[params.provider].source,
}), }),
new VectorLayer({ source: new VectorSource() }), new VectorLayer({ source: new VectorSource() }),
], ],