diff --git a/src/components/App.tsx b/src/components/App.tsx
index f894978f..102ce8a7 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -131,6 +131,7 @@ type AppState = {
     debug: boolean
   }
   fileHandle: FileSystemFileHandle | null
+  file: 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,
+      file: null
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -882,7 +884,7 @@ export default class App extends React.Component<any, AppState> {
     });
   }
 
-  onFileSelected = (e) => {
+  onFileSelected = (e: File[]) => {
     var file = e[0];
     var pmt = new PMTiles(new FileSource(file));
     console.log("App.onFileSelected", pmt);
@@ -905,7 +907,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}
     />
 
diff --git a/src/components/AppToolbar.tsx b/src/components/AppToolbar.tsx
index 2bf8461a..965b7c93 100644
--- a/src/components/AppToolbar.tsx
+++ b/src/components/AppToolbar.tsx
@@ -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> {
diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx
index 2e591c55..f3345e69 100644
--- a/src/components/MapMaplibreGl.tsx
+++ b/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
+  file: PMTiles | null;
 } & WithTranslation;
 
 type MapMaplibreGlState = {
@@ -74,6 +75,7 @@ type MapMaplibreGlState = {
   geocoder: MaplibreGeocoder | null;
   zoomControl: ZoomControl | null;
   zoom?: number;
+  protocol: Protocol | null;
 };
 
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -138,11 +140,11 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
 
     if (this.props.file) {
       let file = this.props.file;
-      this.state.protocol.add(file); // this is necessary for non-HTTP sources
+      this.state.protocol!.add(file); // this is necessary for non-HTTP sources
 
       if (map) {
-        file.getMetadata().then((metadata) => {
-          let layerNames = metadata.vector_layers.map((e) => e.id);
+        file.getMetadata().then((metadata: any) => {
+          let layerNames = metadata.vector_layers.map((e: LayerSpecification) => e.id);
 
           map.style.sourceCaches["source"]._source.vectorLayerIds = layerNames;
           console.log("layerNames for inspect:", layerNames);
@@ -165,7 +167,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     } satisfies MapOptions;
 
     let protocol = this.state.protocol;
-    MapLibreGl.addProtocol("pmtiles",protocol.tile);
+    MapLibreGl.addProtocol("pmtiles", protocol!.tile);
 
     const map = new MapLibreGl.Map(mapOpts);