From 7ee8e44ca1b92bec907510a96bc9ff396f66423a Mon Sep 17 00:00:00 2001
From: prusswan <prusswan@gmail.com>
Date: Mon, 20 Jan 2025 23:13:02 +0800
Subject: [PATCH] parse FileSource from dropped file for protocol.add

# Conflicts:
#	src/components/MapMaplibreGl.tsx
---
 src/components/App.tsx           | 14 +++++++++++++-
 src/components/MapMaplibreGl.tsx |  9 +++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 31e2cf57..f894978f 100644
--- a/src/components/App.tsx
+++ b/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
diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx
index 31e08b9e..dd17b0b4 100644
--- a/src/components/MapMaplibreGl.tsx
+++ b/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,10 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
         this.state.inspect!.render();
       }, 500);
     }
-    
+
+    if (this.props.file) {
+      this.state.protocol.add(this.props.file); // this is necessary for non-HTTP sources
+    }
   }
 
   componentDidMount() {
@@ -149,8 +153,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 = () => {