-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(map): handle multiple sources and layers
- Loading branch information
1 parent
371bb88
commit a9eb851
Showing
10 changed files
with
312 additions
and
341 deletions.
There are no files selected for viewing
11 changes: 7 additions & 4 deletions
11
packages/visualizations-react/src/components/PoiGeoJson.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,12 @@ | ||
| import { PoiGeoJson as _PoiGeoJson, PoiMapOptions } from '@opendatasoft/visualizations'; | ||
| import { FeatureCollection } from 'geojson'; | ||
| import { | ||
| PoiGeoJson as _PoiGeoJson, | ||
| PoiMapOptions, | ||
| PoiMapData, | ||
| Async, | ||
| } from '@opendatasoft/visualizations'; | ||
| import { FC } from 'react'; | ||
| import { Props } from './Props'; | ||
| import wrap from './ReactImpl'; | ||
|
|
||
| // Explicit name and type are needed for Storybook | ||
| const PoiGeoJson: FC<Props<FeatureCollection, PoiMapOptions>> = wrap(_PoiGeoJson); | ||
| const PoiGeoJson: FC<{ data: Async<PoiMapData>; options: PoiMapOptions }> = wrap(_PoiGeoJson); | ||
| export default PoiGeoJson; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import type { BBox } from 'geojson'; | ||
| import maplibregl, { | ||
| LngLatBoundsLike, | ||
| LngLatLike, | ||
| MapOptions, | ||
| StyleSpecification, | ||
| } from 'maplibre-gl'; | ||
|
|
||
| type MapFunction = () => unknown; | ||
|
|
||
| const DEFAULT_CENTER: LngLatLike = [3.5, 46]; | ||
|
|
||
| export default class MapPOI { | ||
| map: maplibregl.Map | null = null; | ||
|
|
||
| isReady = false; | ||
|
|
||
| baseStyle: StyleSpecification | null = null; | ||
|
|
||
| queuedFunctions: Array<MapFunction> = []; | ||
|
|
||
| navigation = new maplibregl.NavigationControl({ showCompass: false }); | ||
|
|
||
| initialize( | ||
| style: MapOptions['style'], | ||
| container: HTMLElement, | ||
| options: Omit<MapOptions, 'style' | 'container'> | ||
| ) { | ||
| this.map = new maplibregl.Map({ style, container, center: DEFAULT_CENTER, ...options }); | ||
| this.map.on('load', () => { | ||
| this.isReady = true; | ||
| // Store base style after the first loads | ||
| if (this.map) { | ||
| this.baseStyle = this.map?.getStyle(); | ||
| } | ||
| this.enqueue(); | ||
| }); | ||
| } | ||
|
|
||
| queue(fn: MapFunction) { | ||
| if (this.isReady) fn(); | ||
| else this.queuedFunctions.push(fn); | ||
| } | ||
|
|
||
| enqueue() { | ||
| this.queuedFunctions.forEach((fn) => fn()); | ||
| this.queuedFunctions = []; | ||
| } | ||
|
|
||
| remove() { | ||
| this.map?.remove(); | ||
| } | ||
|
|
||
| // TODO: add tests to check that layers are at the end of the array | ||
| /* | ||
| * TODO: When updating Maplibre to a 3.2.2 version or up | ||
| * - Update this code to use the option transformStyle. | ||
| * https://maplibre.org/maplibre-gl-js/docs/API/types/maplibregl.TransformStyleFunction/ | ||
| * - `baseStyle` could be removed | ||
| * - The key block could also be removed in MapRender.svelte | ||
| */ | ||
| setSourcesAndLayers( | ||
| sources: StyleSpecification['sources'], | ||
| layers: StyleSpecification['layers'] | ||
| ) { | ||
| this.queue(() => { | ||
| if (this.baseStyle) { | ||
| this.map?.setStyle({ | ||
| ...this.baseStyle, | ||
| sources: { | ||
| ...sources, | ||
| ...this.baseStyle.sources, | ||
| }, | ||
| layers: [...this.baseStyle.layers, ...layers], | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| setBbox(bbox?: BBox) { | ||
| this.queue(() => { | ||
| if (!bbox) { | ||
| // zoom-out to bounds defined in the initialization | ||
| this.map?.setZoom(this.map?.getMinZoom()); | ||
| return; | ||
| } | ||
|
|
||
| // Cancel any saved max bounds to properly fitBounds | ||
| this.map?.setMaxBounds(null); | ||
| // Using padding, keep enough room for controls (zoom) to make sure they don't hide anything | ||
| this.map?.fitBounds(bbox as LngLatBoundsLike, { | ||
| animate: false, | ||
| padding: 40, | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| toggleInteractivity(interaction: 'enable' | 'disable') { | ||
| this.queue(() => { | ||
| this.map?.boxZoom[interaction](); | ||
| this.map?.doubleClickZoom[interaction](); | ||
| this.map?.dragPan[interaction](); | ||
| this.map?.dragRotate[interaction](); | ||
| this.map?.keyboard[interaction](); | ||
| this.map?.scrollZoom[interaction](); | ||
| this.map?.touchZoomRotate[interaction](); | ||
|
|
||
| const hasNavigation = this.map?.hasControl(this.navigation); | ||
|
|
||
| if (interaction === 'disable' && hasNavigation) { | ||
| this.map?.removeControl(this.navigation); | ||
| } | ||
| if (!hasNavigation && interaction === 'enable') { | ||
| this.map?.addControl(this.navigation, 'top-right'); | ||
| } | ||
| }); | ||
| } | ||
| } |
Oops, something went wrong.