Merge pull request #6 from OpenIndexMaps/add-converter

add a basic browser based converter

Author: mejackreed

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": "airbnb"
+}

_config.yml

@@ -30,3 +30,5 @@ sass:
   load_paths:
     - _sass
     - node_modules
+keep_files:
+  - assets/javascripts/bundle.js

_layouts/default.html

@@ -10,7 +10,7 @@
         </div>
       </main>
     </div>
-
+    <script type="text/javascript" src="{{ '/assets/javascripts/bundle.js' | relative_url }}" charset="utf-8"></script>
   </body>
 
 </html>

assets/javascripts/index.js

@@ -0,0 +1,29 @@
+import shp from 'shpjs';
+import prettyJSONStringify from 'pretty-json-stringify';
+
+const fileInput = document.getElementById('shapefile-file');
+
+fileInput.addEventListener('change', (e) => {
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    shp(event.target.result).then((data) => {
+      const convertedData = JSON.parse(JSON.stringify(data));
+      convertedData.features = convertedData.features.map((f, i) => {
+        // Caution: not a deep copy
+        const featureCopy = Object.assign({}, f);
+        const propCopy = f.properties;
+        // Converts "available" strings to Boolean values
+        if (Object.prototype.hasOwnProperty.call(f.properties, 'available') && (typeof f.properties.available) === 'string') {
+          propCopy.available = (f.properties.available === 'true');
+        }
+        featureCopy.properties = propCopy;
+        return featureCopy;
+      });
+
+      const output = document.getElementById('converted');
+      const formatted = `<pre><code>${prettyJSONStringify(convertedData)}</code></pre>`;
+      output.innerHTML = formatted;
+    });
+  };
+  reader.readAsArrayBuffer(e.target.files[0]);
+});

assets/main.scss

@@ -4,3 +4,8 @@
 
 @import 'variables';
 @import '../node_modules/bootstrap/scss/bootstrap.scss';
+
+#converted {
+  max-height: 800px;
+  overflow-y: scroll;
+}

converter.md

@@ -0,0 +1,19 @@
+---
+# You don't need to edit this file, it's empty on purpose.
+# Edit theme's home layout instead if you wanna make some changes
+# See: https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+layout: home
+---
+
+This is a basic Shapefile index map to OpenIndexMaps GeoJSON converter. Index maps are often created in desktop GIS software that may not have full support of GeoJSON features. This converter is useful to convert to GeoJSON. Conversion steps happening:
+
+  - Shapefile -> GeoJSON
+  - Feature property "available" converted to `Boolean` type.
+
+<div class="form-group">
+  <label for="shapefile-file"> Upload index map shapefile</label>
+  <input type="file" id="shapefile-file" class="form-control">
+</div>
+
+
+<div id="converted" class="bg-light"></div>