diff --git a/app/src/LeafletMap.tsx b/app/src/LeafletMap.tsx deleted file mode 100644 index ca24601..0000000 --- a/app/src/LeafletMap.tsx +++ /dev/null @@ -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: - '© OpenStreetMap 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 ; -} - -export default LeafletMap; diff --git a/app/src/Loader.tsx b/app/src/Loader.tsx index 9b46067..0ab63af 100644 --- a/app/src/Loader.tsx +++ b/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(false); let view; - if (tab === "leaflet") { - view = ; - } else if (tab === "maplibre") { + if (tab === "maplibre") { view = ; } else { view = ; @@ -162,11 +159,8 @@ function Loader(props: { file: PMTiles }) { Tile Inspector - - Leaflet - - MapLibre + Map View