support map data override from .osm via URL or Drag&Drop

Author: deevroman

src/building.js

@@ -50,7 +50,7 @@ class Building {
   /**
    * Create new building
    */
-  static async create(type, id) {
+  static async create(type, id, overrideInnerData=null) {
     let data;
     if (type === 'way') {
       data = await Building.getWayData(id);
@@ -60,7 +60,7 @@ class Building {
     let xmlData = new window.DOMParser().parseFromString(data, 'text/xml');
     const nodelist = Building.buildNodeList(xmlData);
     const extents = Building.getExtents(id, xmlData, nodelist);
-    const innerData = await Building.getInnerData(...extents);
+    const innerData = overrideInnerData ?? await Building.getInnerData(...extents);
     return new Building(id, innerData);
   }
 

src/index.js

@@ -29,14 +29,95 @@ var errorBox = false;
 
 var gui;
 
+async function getFileFromForm() {
+  return new Promise(resolve => {
+    const overlay = document.createElement('div');
+    overlay.id = 'overlay';
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      inset: '0',
+      background: '#222',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: '9999',
+    });
+
+    const container = document.createElement('div');
+    Object.assign(container.style, {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1rem',
+    });
+
+    const text = document.createElement('p');
+    text.textContent = 'Select .osm file:';
+    Object.assign(text.style, {
+      color: '#eee',
+      margin: '0',
+      fontSize: '1.5rem',
+      fontFamily: 'Arial',
+    });
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    Object.assign(input.style, {
+      fontSize: '1.5rem',
+      padding: '0.5rem 1rem',
+      borderRadius: '0.5rem',
+      cursor: 'pointer',
+      backgroundColor: '#333',
+      color: '#eee',
+      border: '1px solid #555',
+    });
+
+    container.appendChild(text);
+    container.appendChild(input);
+    overlay.appendChild(container);
+    document.body.appendChild(overlay);
+
+    input.addEventListener('change', event => {
+      const file = event.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.readAsText(file);
+        overlay.remove();
+      }
+    });
+
+    overlay.addEventListener('dragover', (event) => {
+      event.preventDefault();
+      overlay.style.cursor = 'copy';
+    });
+
+    overlay.addEventListener('dragleave', () => {
+      overlay.style.cursor = '';
+    });
+
+    overlay.addEventListener('drop', async(event) => {
+      event.preventDefault();
+      overlay.style.cursor = '';
+
+      const file = event.dataTransfer.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.readAsText(file);
+        overlay.remove();
+      }
+    });
+  });
+}
+
 /**
  * Initialize the screen
  */
-function init() {
-  var type = 'way';
-  var id = 66418809;
+async function init() {
+  let type = 'way';
+  let id = 66418809;
 
-  var displayInfo = false;
+  let displayInfo = false;
 
   window.printError = printError;
 
@@ -53,7 +134,16 @@ function init() {
   if (params.has('errorBox')) {
     errorBox = true;
   }
-  Building.create(type, id).then(function(myObj){
+  const fileUrl = new URLSearchParams(location.search).get('fromFile');
+  let innerData = null;
+  if (fileUrl === '') {
+    innerData = await getFileFromForm();
+  } else if (fileUrl !== null) {
+    printError('Loading map data from URL');
+    innerData = await (await fetch(new URLSearchParams(location.search).get('fromFile'))).text();
+  }
+
+  Building.create(type, id, innerData).then(function(myObj){
     mainBuilding = myObj;
     const helperSize = myObj.outerElement.getWidth();
     const helper = new GridHelper(helperSize / 0.9, helperSize / 9);
@@ -193,9 +283,10 @@ function addLights() {
   scene.add( dirLight );
 }
 
-init();
-createScene();
-window.addEventListener('resize', resize, false);
+init().then(() => {
+  createScene();
+  window.addEventListener('resize', resize, false);
+});
 
 /**
  * Set the camera position

style.css

@@ -12,6 +12,7 @@
 
 body {
   margin: 0;
+  background-color: #222;
 }
 
 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */