mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-03-28 03:29:25 +01:00
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import Map, { FullscreenControl, NavigationControl, MapProvider } from 'react-map-gl/maplibre'
|
|
import maplibregl from 'maplibre-gl'
|
|
import 'maplibre-gl/dist/maplibre-gl.css'
|
|
import { Protocol } from 'pmtiles'
|
|
import { useEffect } from 'react'
|
|
|
|
export default function MapComponent() {
|
|
|
|
// Add the PMTiles protocol to maplibre-gl
|
|
useEffect(() => {
|
|
let protocol = new Protocol()
|
|
maplibregl.addProtocol('pmtiles', protocol.tile)
|
|
return () => {
|
|
maplibregl.removeProtocol('pmtiles')
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<MapProvider>
|
|
<Map
|
|
reuseMaps
|
|
style={{
|
|
width: '100%',
|
|
height: '100vh',
|
|
}}
|
|
mapStyle={`http://${window.location.hostname}:${window.location.port}/api/maps/styles`}
|
|
mapLib={maplibregl}
|
|
initialViewState={{
|
|
longitude: -101,
|
|
latitude: 40,
|
|
zoom: 3.5,
|
|
}}
|
|
>
|
|
<NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
|
|
<FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
|
|
</Map>
|
|
</MapProvider>
|
|
)
|
|
}
|