Basic mechanism to support different tile providers.
This commit is contained in:
parent
1fb7f47c05
commit
f10fa11348
|
@ -5,8 +5,8 @@ import Map from './components/map';
|
|||
const App: Component = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path='/map/:lon/:lat/:zoom/:rotation' component={Map} />
|
||||
<Route path='/*' element={<Navigate href='/map/0/0/1/0' />} />
|
||||
<Route path='/map/:provider/:lon/:lat/:zoom/:rotation' component={Map} />
|
||||
<Route path='/*' element={<Navigate href='/map/osm/0/0/2/0' />} />
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 });
|
||||
|
|
|
@ -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;
|
|
@ -0,0 +1 @@
|
|||
export { default, mapTileProviders } from './MapTileProvider';
|
|
@ -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() }),
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue