fix for Inspect to work with FileSource

# Conflicts:
#	src/components/MapMaplibreGl.tsx

package-lock.json

@@ -51,6 +51,7 @@
         "react-collapse": "^5.1.1",
         "react-color": "^2.19.3",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.3.5",
         "react-file-reader-input": "^2.0.0",
         "react-i18next": "^15.4.0",
         "react-icon-base": "^2.1.2",
@@ -3856,6 +3857,14 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -6219,6 +6228,17 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
       "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
     },
+    "node_modules/file-selector": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -10641,6 +10661,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.3.5",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz",
+      "integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==",
+      "dependencies": {
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-file-reader-input": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-file-reader-input/-/react-file-reader-input-2.0.0.tgz",
@@ -12535,10 +12571,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
+      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-      "dev": true
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",

package.json

@@ -65,6 +65,7 @@
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.3.5",
     "react-file-reader-input": "^2.0.0",
     "react-i18next": "^15.4.0",
     "react-icon-base": "^2.1.2",

src/components/App.tsx

@@ -8,7 +8,7 @@ import get from 'lodash.get'
 import {unset} from 'lodash'
 import {arrayMoveMutable} from 'array-move'
 import hash from "string-hash";
-import { PMTiles } from "pmtiles";
+import { FileSource, PMTiles } from 'pmtiles';
 import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
 import {latest, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
 
@@ -741,6 +741,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}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect} />
     }
@@ -881,6 +882,15 @@ export default class App extends React.Component<any, AppState> {
     });
   }
 
+  onFileSelected = (e) => {
+    var file = e[0];
+    var pmt = new PMTiles(new FileSource(file));
+    console.log("App.onFileSelected", pmt);
+    this.setState({
+      file: pmt
+    })
+  }
+
   render() {
     const layers = this.state.mapStyle.layers || []
     const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : undefined
@@ -895,6 +905,8 @@ 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}
     />
 
     const layerList = <LayerList

src/components/AppToolbar.tsx

@@ -17,6 +17,8 @@ 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
+
 // 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();
 const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser!.name) > -1;
@@ -289,6 +291,15 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
             <MdHelpOutline />
             <IconText>{t("Help")}</IconText>
           </ToolbarLink>
+
+          <Dropzone onDrop={this.props.onFileSelected}>
+            {({getRootProps, getInputProps}) => (
+                <div {...getRootProps({className: 'dropzone maputnik-toolbar-link'})}>
+                  <input {...getInputProps()} />
+                  Drop file here
+                </div>
+            )}
+          </Dropzone>
         </div>
       </div>
     </nav>

src/components/MapMaplibreGl.tsx

@@ -93,6 +93,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       inspect: null,
       geocoder: null,
       zoomControl: null,
+      protocol: new Protocol({metadata: true})
     }
     i18next.on('languageChanged', () => {
       this.forceUpdate();
@@ -134,7 +135,21 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
         this.state.inspect!.render();
       }, 500);
     }
-    
+
+    if (this.props.file) {
+      let file = this.props.file;
+      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);
+
+          map.style.sourceCaches["source"]._source.vectorLayerIds = layerNames;
+          console.log("layerNames for inspect:", layerNames);
+        });
+      }
+    }
+
   }
 
   componentDidMount() {
@@ -149,8 +164,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       localIdeographFontFamily: false
     } satisfies MapOptions;
 
-    const protocol = new Protocol({metadata: true});
+    let protocol = this.state.protocol;
     MapLibreGl.addProtocol("pmtiles",protocol.tile);
+
     const map = new MapLibreGl.Map(mapOpts);
 
     const mapViewChange = () => {