68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import {
|
|
component$,
|
|
NoSerialize,
|
|
noSerialize,
|
|
Ref,
|
|
useClientEffect$,
|
|
useClientMount$,
|
|
useMount$,
|
|
useRef,
|
|
useSignal,
|
|
useStore,
|
|
useStyles$,
|
|
useStylesScoped$,
|
|
} from '@builder.io/qwik';
|
|
|
|
import OlMap from 'ol/Map';
|
|
import View from 'ol/View';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import VectorLayer from 'ol/layer/Vector';
|
|
import VectorSource from 'ol/source/Vector';
|
|
import Feature from 'ol/Feature';
|
|
import Attribution from 'ol/control/Attribution';
|
|
import Rotate from 'ol/control/Rotate';
|
|
import ScaleLine from 'ol/control/ScaleLine';
|
|
import Control from 'ol/control/Control';
|
|
import OSM from 'ol/source/OSM';
|
|
import { useGeographic as olUseGeographic } from 'ol/proj';
|
|
|
|
import './Map.css';
|
|
|
|
interface MapStore {
|
|
map: NoSerialize<OlMap> | null;
|
|
}
|
|
|
|
// Notice the default export
|
|
export default component$(() => {
|
|
const store = useStore<MapStore>({ map: null });
|
|
|
|
/**
|
|
* export function useRef<T = Element>(current?: T): Ref<T> {
|
|
return useStore({ current });
|
|
}
|
|
*/
|
|
|
|
const target = useSignal<HTMLDivElement>();
|
|
|
|
useClientEffect$(() => {
|
|
console.log({ caller: 'Map / useMount$' });
|
|
const olMap = new OlMap({
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 1,
|
|
}),
|
|
layers: [
|
|
new TileLayer({
|
|
source: new OSM(),
|
|
}),
|
|
// new VectorLayer({ source: newSource }),
|
|
],
|
|
target: target.value,
|
|
// controls,
|
|
});
|
|
// olMap.on(['moveend'], changeListener);
|
|
store.map = noSerialize(olMap);
|
|
});
|
|
return <div ref={target} id='map'></div>;
|
|
});
|