continue linting improvements for viewer [#49]

app/src/App.tsx

@@ -84,7 +84,7 @@ function App() {
  // maintaining URL state
  useEffect(() => {
  const url = new URL(window.location.href);
- if (file && file.source.getKey().startsWith("http")) {
+ if (file?.source.getKey().startsWith("http")) {
  url.searchParams.set("url", file.source.getKey());
  history.pushState(null, "", url.toString());
  } else {

app/src/Inspector.tsx

@@ -58,7 +58,7 @@ const TileRow = (props: {
  <td>{props.entry.offset}</td>
  <td>{props.entry.length}</td>
  <td>
- {props.entry.runLength == 0
+ {props.entry.runLength === 0
  ? "directory"
  : `tile(${props.entry.runLength})`}
  </td>
@@ -124,7 +124,7 @@ const FeatureSvg = (props: {
  onMouseOver={mouseOver}
  onMouseOut={mouseOut}
  onMouseDown={mouseDown}
- ></path>
+ />
  );
 };
 
@@ -138,7 +138,7 @@ const LayerSvg = (props: {
  key={i}
  feature={f}
  setSelectedFeature={props.setSelectedFeature}
- ></FeatureSvg>
+ />
  ));
  return <g color={props.color}>{elems}</g>;
 };
@@ -153,7 +153,7 @@ const StyledFeatureProperties = styled("div", {
 
 const FeatureProperties = (props: { feature: Feature }) => {
  const tmp: [string, string][] = [];
- for (var key in props.feature.properties) {
+ for (const key in props.feature.properties) {
  tmp.push([key, props.feature.properties[key]]);
  }
 
@@ -186,7 +186,7 @@ const VectorPreview = (props: {
  const [ref, { width, height }] = useMeasure<HTMLDivElement>();
 
  useEffect(() => {
- viewer.current!.zoomOnViewerCenter(0.1);
+ viewer.current?.zoomOnViewerCenter(0.1);
  }, []);
 
  useEffect(() => {
@@ -196,13 +196,13 @@ const VectorPreview = (props: {
 
  const tile = new VectorTile(new Protobuf(new Uint8Array(resp!.data)));
  const newLayers = [];
- let max_extent = 0;
+ let maxExtent = 0;
  for (const [name, layer] of Object.entries(tile.layers)) {
- if (layer.extent > max_extent) {
- max_extent = layer.extent;
+ if (layer.extent > maxExtent) {
+ maxExtent = layer.extent;
  }
  const features: Feature[] = [];
- for (var i = 0; i < layer.length; i++) {
+ for (let i = 0; i < layer.length; i++) {
  const feature = layer.feature(i);
  const p = path();
  const geom = feature.loadGeometry();
@@ -216,7 +216,7 @@ const VectorPreview = (props: {
  } else {
  for (const ring of geom) {
  p.moveTo(ring[0].x, ring[0].y);
- for (var j = 1; j < ring.length; j++) {
+ for (let j = 1; j < ring.length; j++) {
  p.lineTo(ring[j].x, ring[j].y);
  }
  if (feature.type === 3) {
@@ -234,7 +234,7 @@ const VectorPreview = (props: {
  }
  newLayers.push({ features: features, name: name });
  }
- setMaxExtent(max_extent);
+ setMaxExtent(maxExtent);
  newLayers.sort(smartCompare);
  setLayers(newLayers);
  };
@@ -250,7 +250,7 @@ const VectorPreview = (props: {
  layer={l}
  color={schemeSet3[i % 12]}
  setSelectedFeature={setSelectedFeature}
- ></LayerSvg>
+ />
  ));
 
  return (
@@ -280,7 +280,7 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
  const [z, x, y] = tileIdToZxy(entry.tileId);
  const resp = await props.file.getZxy(z, x, y);
  const blob = new Blob([resp!.data]);
- var imageUrl = window.URL.createObjectURL(blob);
+ const imageUrl = window.URL.createObjectURL(blob);
  setImageSrc(imageUrl);
  };
 
@@ -289,7 +289,7 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
  }
  }, [props.entry]);
 
- return <img src={imgSrc}></img>;
+ return <img src={imgSrc} alt="raster tile" />;
 };
 
 function getHashString(entry: Entry) {
@@ -357,10 +357,10 @@ function Inspector(props: { file: PMTiles }) {
  }, [props.file, selectedEntry]);
 
  const rows = entryRows.map((e, i) => (
- <TileRow key={i} entry={e} setSelectedEntry={setSelectedEntry}></TileRow>
+ <TileRow key={i} entry={e} setSelectedEntry={setSelectedEntry} />
  ));
 
- let tilePreview = <div></div>;
+ let tilePreview = <div />;
  if (selectedEntry && header?.tileType) {
  if (selectedEntry.runLength === 0) {
  // do nothing

app/src/Loader.tsx

@@ -28,7 +28,7 @@ const itemStyles = {
  fontSize: "$2",
  alignItems: "center",
  "&:hover": { backgroundColor: "$hover", color: "$white" },
- "&:focus": { position: "relative", boxShadow: `0 0 0 2px blue` },
+ "&:focus": { position: "relative", boxShadow: "0 0 0 2px blue" },
 };
 
 const StyledLink = styled(
@@ -73,7 +73,7 @@ const ToolbarToggleItem = StyledToggleItem;
 function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
  const [tab, setTab] = useState("maplibre");
 
- let view;
+ let view: any;
  if (tab === "maplibre") {
  view = (
  <MaplibreMap file={props.file} mapHashPassed={props.mapHashPassed} />

app/src/MaplibreMap.tsx

@@ -102,7 +102,7 @@ interface LayerVisibility {
  visible: boolean;
 }
 
-interface PmTilesMetadata {
+interface Metadata {
  name?: string;
  type?: string;
  tilestats?: unknown;
@@ -188,7 +188,7 @@ const LayersVisibilityController = (props: {
 
 const rasterStyle = async (file: PMTiles): Promise<StyleSpecification> => {
  const header = await file.getHeader();
- const metadata = (await file.getMetadata()) as PmTilesMetadata;
+ const metadata = (await file.getMetadata()) as Metadata;
  let layers: LayerSpecification[] = [];
 
  if (metadata.type !== "baselayer") {
@@ -206,7 +206,7 @@ const rasterStyle = async (file: PMTiles): Promise<StyleSpecification> => {
  sources: {
  source: {
  type: "raster",
- tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
+ tiles: [`pmtiles://${file.source.getKey()}/{z}/{x}/{y}`],
  minzoom: header.minZoom,
  maxzoom: header.maxZoom,
  },
@@ -229,7 +229,7 @@ const vectorStyle = async (
  layersVisibility: LayerVisibility[];
 }> => {
  const header = await file.getHeader();
- const metadata = (await file.getMetadata()) as PmTilesMetadata;
+ const metadata = (await file.getMetadata()) as Metadata;
  let layers: LayerSpecification[] = [];
  let baseOpacity = 0.35;
 
@@ -238,15 +238,13 @@ const vectorStyle = async (
  baseOpacity = 0.9;
  }
 
- var tilestats: any;
- var vectorLayers: LayerSpecification[];
- tilestats = metadata.tilestats;
- vectorLayers = metadata.vector_layers;
+ const tilestats = metadata.tilestats;
+ const vectorLayers = metadata.vector_layers;
 
  if (vectorLayers) {
  for (const [i, layer] of vectorLayers.entries()) {
  layers.push({
- id: layer.id + "_fill",
+ id: `${layer.id}_fill`,
  type: "fill",
  source: "source",
  "source-layer": layer.id,
@@ -268,7 +266,7 @@ const vectorStyle = async (
  filter: ["==", ["geometry-type"], "Polygon"],
  });
  layers.push({
- id: layer.id + "_stroke",
+ id: `${layer.id}_stroke`,
  type: "line",
  source: "source",
  "source-layer": layer.id,
@@ -284,7 +282,7 @@ const vectorStyle = async (
  filter: ["==", ["geometry-type"], "LineString"],
  });
  layers.push({
- id: layer.id + "_point",
+ id: `${layer.id}_point`,
  type: "circle",
  source: "source",
  "source-layer": layer.id,
@@ -315,7 +313,7 @@ const vectorStyle = async (
  sources: {
  source: {
  type: "vector",
- tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
+ tiles: [`pmtiles://${file.source.getKey()}/{z}/{x}/{y}`],
  minzoom: header.minZoom,
  maxzoom: header.maxZoom,
  bounds: bounds,
@@ -425,7 +423,7 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
 
  const { x, y } = e.point;
  const r = 2; // radius around the point
- var features = map.queryRenderedFeatures([
+ let features = map.queryRenderedFeatures([
  [x - r, y - r],
  [x + r, y + r],
  ]);
@@ -475,7 +473,7 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
  if (
  header.tileType === TileType.Png ||
  header.tileType === TileType.Webp ||
- header.tileType == TileType.Jpeg
+ header.tileType === TileType.Jpeg
  ) {
  const style = await rasterStyle(props.file);
  map.setStyle(style);
@@ -492,7 +490,7 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
 
  return (
  <MapContainer ref={mapContainerRef}>
- <div ref={mapContainerRef}></div>
+ <div ref={mapContainerRef} />
  <Hamburger onClick={toggleHamburger}>menu</Hamburger>
  {hamburgerOpen ? (
  <Options>

app/src/Metadata.tsx

@@ -13,7 +13,7 @@ const Heading = styled("div", {
 });
 
 function Metadata(props: { file: PMTiles }) {
- const [metadata, setMetadata] = useState<any>();
+ const [metadata, setMetadata] = useState<unknown>();
  const [header, setHeader] = useState<Header | null>(null);
 
  useEffect(() => {

app/src/Start.tsx

@@ -12,7 +12,7 @@ const Input = styled("input", {
  justifyContent: "center",
  fontSize: "$3",
  fontFamily: "$sans",
- "&:focus": { boxShadow: `0 0 0 1px black` },
+ "&:focus": { boxShadow: "0 0 0 1px black" },
  width: "100%",
  border: "1px solid $white",
  padding: "$1",
@@ -141,7 +141,7 @@ function Start(props: {
  id="remoteUrl"
  placeholder="https://example.com/my_archive.pmtiles"
  onChange={onRemoteUrlChangeHandler}
- ></Input>
+ />
  <Button color="gray" onClick={onSubmit} disabled={!remoteUrl.trim()}>
  Load URL
  </Button>

app/src/main.tsx

@@ -2,8 +2,11 @@ import React from "react";
 import reactDom from "react-dom/client";
 import App from "./App";
 
-reactDom.createRoot(document.getElementById("root")!).render(
- <React.StrictMode>
- <App />
- </React.StrictMode>
-);
+const root = document.getElementById("root");
+if (root) {
+ reactDom.createRoot(root).render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+ );
+}