Custom protomap

Author: jboolean

frontend/src/screens/App/screens/MapPane/components/MainMap/MapLibreMap.tsx

@@ -5,6 +5,7 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import classnames from 'classnames';
 import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import { Protocol as PmTilesProtocol } from 'pmtiles';
 
 import { MapInterface, MapProps } from './MapInterface';
 import * as overlays from './overlays';
@@ -14,10 +15,13 @@ export { OverlayId } from './overlays';
 import { RouteComponentProps } from 'react-router';
 import stylesheet from './MainMap.less';
 
-const MAPLIBRE_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
+import mapStyleUrl from './fourties.protomaps.style.json';
 
 const PHOTO_LAYER = 'photos-1940s';
 
+const pmtilesProtocol = new PmTilesProtocol();
+maplibregl.addProtocol('pmtiles', pmtilesProtocol.tile);
+
 type PropsWithRouter = MapProps & RouteComponentProps<{ identifier?: string }>;
 
 class MapLibreMap
@@ -28,9 +32,10 @@ class MapLibreMap
   private map: maplibregl.Map;
 
   componentDidMount(): void {
+    console.log(mapStyleUrl);
     const map: maplibregl.Map = new maplibregl.Map({
       container: this.mapContainer,
-      style: MAPLIBRE_STYLE,
+      style: mapStyleUrl as unknown as string,
       center: [-73.99397, 40.7093],
       zoom: 13.69,
       maxBounds: [
@@ -41,6 +46,8 @@ class MapLibreMap
     });
     this.map = map;
 
+    map.addControl(new maplibregl.AttributionControl());
+
     map.on('click', PHOTO_LAYER, (e) => {
       const { panOnClick } = this.props;
       if (panOnClick) map.panTo(e.lngLat);