viewer: unify map view on maplibre [#49]

app/src/LeafletMap.tsx

@@ -1,63 +0,0 @@
-import { useState, useEffect } from "react";
-import { PMTiles, TileType } from "../../js";
-import { leafletRasterLayer } from "../../js/adapters";
-import { leafletLayer as vectorLeafletLayer } from "protomaps";
-import { styled } from "./stitches.config";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-
-const MapContainer = styled("div", {
-  height: "calc(100vh - $4 - $4)",
-});
-
-function LeafletMap(props: { file: PMTiles }) {
-  var map: L.Map;
-  var currentLayer: L.Layer;
-  useEffect(() => {
-    map = L.map("map").setView([0, 0], 0);
-
-    return () => {
-      map.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (currentLayer) currentLayer.remove();
-    let initStyle = async () => {
-      if (map) {
-        let header = await props.file.getHeader();
-        if (header.tileType === TileType.Png || header.tileType == TileType.Jpeg) {
-          currentLayer = leafletRasterLayer(props.file, {
-            attribution:
-              '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-          });
-          currentLayer.addTo(map);
-        } else {
-          console.error("leaflet vector preview not yet implemented");
-          // let metadata = await props.file.metadata();
-          // let rules: PaintRule[] = [];
-
-          // if (metadata.json) {
-          //   let root = JSON.parse(metadata.json);
-          //   if (root.tilestats) {
-          //     for (let layer of root.tilestats.layers) {
-          //       if (layer.geometry === "Polygon") {
-          //       } else if (layer.geometry === "LineString") {
-          //       } else {
-          //       }
-          //     }
-          //   }
-          // }
-
-          // currentLayer = vectorLeafletLayer(props.file, {paintRules:rules,labelRules:[]})
-        }
-      }
-    };
-
-    initStyle();
-  }, []);
-
-  return <MapContainer id="map"></MapContainer>;
-}
-
-export default LeafletMap;

app/src/Loader.tsx

@@ -3,7 +3,6 @@ import { PMTiles } from "../../js";
 import { styled } from "./stitches.config";
 
 import Inspector from "./Inspector";
-import LeafletMap from "./LeafletMap";
 import MaplibreMap from "./MaplibreMap";
 
 import { MagnifyingGlassIcon, ImageIcon } from "@radix-ui/react-icons";
@@ -116,9 +115,7 @@ function Loader(props: { file: PMTiles }) {
   let [modalOpen, setModalOpen] = useState<boolean>(false);
 
   let view;
-  if (tab === "leaflet") {
+  if (tab === "maplibre") {
-    view = <LeafletMap file={props.file} />;
-  } else if (tab === "maplibre") {
     view = <MaplibreMap file={props.file} />;
   } else {
     view = <Inspector file={props.file} />;
@@ -162,11 +159,8 @@ function Loader(props: { file: PMTiles }) {
           <ToolbarToggleItem value="inspector" aria-label="Left aligned">
             <MagnifyingGlassIcon /> Tile Inspector
           </ToolbarToggleItem>
-          <ToolbarToggleItem value="leaflet" aria-label="Center aligned">
-            Leaflet
-          </ToolbarToggleItem>
           <ToolbarToggleItem value="maplibre" aria-label="Right aligned">
-            MapLibre
+            Map View
           </ToolbarToggleItem>
         </ToolbarToggleGroup>
         <ToolbarLink href="#" target="_blank" css={{ marginRight: 10 }}>