removed comment for react-dropzone import

fixed TypeScript errors

src/components/App.tsx

@@ -131,6 +131,7 @@ type AppState = {
     debug: boolean
   }
   fileHandle: FileSystemFileHandle | null
+  localPMTiles: PMTiles | null
 }
 
 export default class App extends React.Component<any, AppState> {
@@ -287,6 +288,7 @@ export default class App extends React.Component<any, AppState> {
         debugToolbox: false,
       },
       fileHandle: null,
+      localPMTiles: null
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -741,7 +743,7 @@ export default class App extends React.Component<any, AppState> {
         onChange={this.onMapChange}
         options={this.state.maplibreGlDebugOptions}
         inspectModeEnabled={this.state.mapState === "inspect"}
-        file={this.state.file}
+        localPMTiles={this.state.localPMTiles}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect} />
     }
@@ -882,12 +884,11 @@ export default class App extends React.Component<any, AppState> {
     });
   }
 
-  onFileSelected = (e) => {
+  onFileSelected = (e: File[]) => {
-    var file = e[0];
+    const file = e[0];
-    var pmt = new PMTiles(new FileSource(file));
+    const pmt = new PMTiles(new FileSource(file));
-    console.log("App.onFileSelected", pmt);
     this.setState({
-      file: pmt
+      localPMTiles: pmt
     })
   }
 
@@ -905,7 +906,6 @@ export default class App extends React.Component<any, AppState> {
       onStyleOpen={this.onStyleChanged}
       onSetMapState={this.setMapState}
       onToggleModal={this.toggleModal.bind(this)}
-      files={this.state.files}
       onFileSelected={this.onFileSelected}
     />
 

src/components/AppToolbar.tsx

@@ -17,7 +17,7 @@ import maputnikLogo from 'maputnik-design/logos/logo-color.svg?inline'
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { supportedLanguages } from '../i18n';
 
-import Dropzone from 'react-dropzone'; // for class components
+import Dropzone from 'react-dropzone';
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
@@ -105,6 +105,7 @@ type AppToolbarInternalProps = {
   onSetMapState(mapState: MapState): unknown
   mapState?: MapState
   renderer?: string
+  onFileSelected(...args: unknown[]): unknown
 } & WithTranslation;
 
 class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
@@ -294,10 +295,10 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
 
           <Dropzone onDrop={this.props.onFileSelected}>
             {({getRootProps, getInputProps}) => (
-                <div {...getRootProps({className: 'dropzone maputnik-toolbar-link'})}>
+              <div {...getRootProps({className: 'dropzone maputnik-toolbar-link'})}>
-                  <input {...getInputProps()} />
+                <input {...getInputProps()} />
-                  Drop file here
+                {t("Drop PMTiles file here")}
-                </div>
+              </div>
             )}
           </Dropzone>
         </div>

src/components/MapMaplibreGl.tsx

@@ -15,7 +15,7 @@ import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { withTranslation, WithTranslation } from 'react-i18next'
 import i18next from 'i18next'
-import { Protocol } from "pmtiles";
+import { PMTiles, Protocol } from "pmtiles";
 
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
   ReactDOM.render(popup, mountNode);
@@ -66,6 +66,7 @@ type MapMaplibreGlInternalProps = {
   }
   replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification
   onChange(value: {center: LngLat, zoom: number}): unknown
+  localPMTiles: PMTiles | null;
 } & WithTranslation;
 
 type MapMaplibreGlState = {
@@ -74,6 +75,7 @@ type MapMaplibreGlState = {
   geocoder: MaplibreGeocoder | null;
   zoomControl: ZoomControl | null;
   zoom?: number;
+  pmtilesProtocol: Protocol | null;
 };
 
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -93,7 +95,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       inspect: null,
       geocoder: null,
       zoomControl: null,
-      protocol: new Protocol({metadata: true})
+      pmtilesProtocol: new Protocol({metadata: true})
     }
     i18next.on('languageChanged', () => {
       this.forceUpdate();
@@ -136,16 +138,16 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       }, 500);
     }
 
-    if (this.props.file) {
+    if (this.props.localPMTiles) {
-      let file = this.props.file;
+      const file = this.props.localPMTiles;
-      this.state.protocol.add(file); // this is necessary for non-HTTP sources
+      this.state.pmtilesProtocol!.add(file); // this is necessary for non-HTTP sources
 
       if (map) {
-        file.getMetadata().then((metadata) => {
+        file.getMetadata().then((metadata: any) => {
-          let layerNames = metadata.vector_layers.map((e) => e.id);
+          const layerNames = metadata.vector_layers.map((e: LayerSpecification) => e.id);
 
+          // used by maplibre-gl-inspect to pick up inspectable layers
           map.style.sourceCaches["source"]._source.vectorLayerIds = layerNames;
-          console.log("layerNames for inspect:", layerNames);
         });
       }
     }
@@ -164,8 +166,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       localIdeographFontFamily: false
     } satisfies MapOptions;
 
-    let protocol = this.state.protocol;
+    MapLibreGl.addProtocol("pmtiles", this.state.pmtilesProtocol!.tile);
-    MapLibreGl.addProtocol("pmtiles",protocol.tile);
 
     const map = new MapLibreGl.Map(mapOpts);
 

src/locales/de/translation.json

@@ -35,6 +35,7 @@
   "View": "Ansicht",
   "Color accessibility": "Farbzugänglichkeit",
   "Help": "Hilfe",
+  "Drop PMTiles file here": "__STRING_NOT_TRANSLATED__",
   "Comments for the current layer. This is non-standard and not in the spec.": "Kommentare zur aktuellen Ebene. Das ist nicht standardmäßig und nicht in der Spezifikation.",
   "Comments": "Kommentare",
   "Comment...": "Dein Kommentar...",
@@ -81,6 +82,7 @@
   "Close modal": "Modale Fenster schließen",
   "Debug": "Debug",
   "Options": "Optionen",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "__STRING_NOT_TRANSLATED__",
   "Save Style": "Stil Speichern",
   "Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.",
   "Save as": "Speichern unter",

src/locales/fr/translation.json

@@ -35,6 +35,7 @@
   "View": "Vue",
   "Color accessibility": "Accessibilité des couleurs",
   "Help": "Aide",
+  "Drop PMTiles file here": "__STRING_NOT_TRANSLATED__",
   "Comments for the current layer. This is non-standard and not in the spec.": "Commentaires pour le calque actuel. Ceci n'est pas standard et n'est pas dans la spécification.",
   "Comments": "Commentaires",
   "Comment...": "Votre commentaire...",
@@ -81,6 +82,7 @@
   "Close modal": "Fermer la fenêtre modale",
   "Debug": "Déboguer",
   "Options": "Options",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "__STRING_NOT_TRANSLATED__",
   "Save Style": "Enregistrer le style",
   "Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.",
   "Save as": "Enregistrer sous",

src/locales/he/translation.json

@@ -35,6 +35,7 @@
   "View": "תצוגה",
   "Color accessibility": "נגישות צבעים",
   "Help": "עזרה",
+  "Drop PMTiles file here": "__STRING_NOT_TRANSLATED__",
   "Comments for the current layer. This is non-standard and not in the spec.": "הערות על השכבה הנוכחית. זה לא חלק מהספסיפיקציות",
   "Comments": "הערות",
   "Comment...": "הערה...",
@@ -81,6 +82,7 @@
   "Close modal": "סגירת חלונית",
   "Debug": "דיבאג",
   "Options": "אפשרויות",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "__STRING_NOT_TRANSLATED__",
   "Save Style": "שמירת הסטייל",
   "Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.",
   "Save as": "שמירה בשם",

src/locales/ja/translation.json

@@ -35,6 +35,7 @@
   "View": "表示",
   "Color accessibility": "色のアクセシビリティ",
   "Help": "ヘルプ",
+  "Drop PMTiles file here": "__STRING_NOT_TRANSLATED__",
   "Comments for the current layer. This is non-standard and not in the spec.": "現在のレイヤーのコメント。注意：この機能は標準ではないため、他のライブラリとの互換性状況はわかりません。",
   "Comments": "コメント",
   "Comment...": "コメントを書く",
@@ -81,6 +82,7 @@
   "Close modal": "モーダルを閉じる",
   "Debug": "デバッグ",
   "Options": "設定",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "__STRING_NOT_TRANSLATED__",
   "Save Style": "スタイルを保存",
   "Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。",
   "Save as": "名前を付けて保存",

src/locales/zh/translation.json

@@ -35,6 +35,7 @@
   "View": "视图",
   "Color accessibility": "颜色可访问性",
   "Help": "帮助",
+  "Drop PMTiles file here": "__STRING_NOT_TRANSLATED__",
   "Comments for the current layer. This is non-standard and not in the spec.": "当前图层的注释。注意：这不是标准功能，可能与其他库不兼容。",
   "Comments": "注释",
   "Comment...": "写注释...",
@@ -81,6 +82,7 @@
   "Close modal": "关闭模态框",
   "Debug": "调试",
   "Options": "选项",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "__STRING_NOT_TRANSLATED__",
   "Save Style": "保存样式",
   "Save the JSON style to your computer.": "将JSON样式保存到您的计算机。",
   "Save as": "另存为",