|
10 | 10 | <button id="map-fit" type="button" class="btn btn-light btn-sm" title="Center and Scale Network"> |
11 | 11 | <span class="oi oi-target"></span> |
12 | 12 | </button> |
| 13 | + <button id="map-layer-upload" type="button" class="btn btn-light btn-sm" title="Upload Map Layer"> |
| 14 | + <span class="oi oi-data-transfer-upload"></span> |
| 15 | + </button> |
| 16 | + <input type="file" id="map-file-input" style="display: none" multiple/> |
13 | 17 | </div> |
14 | 18 |
|
15 | 19 | <div id="map-settings-pane" class="left-pane" style="z-index:1000"> |
@@ -587,6 +591,34 @@ <h5 class="modal-title">Export Geospatial Data</h5> |
587 | 591 | map.flyToBounds(layers.nodes.getBounds()); |
588 | 592 | }); |
589 | 593 |
|
| 594 | + |
| 595 | + $('#map-layer-upload').on('click', function() { |
| 596 | + $('#map-file-input').click(); |
| 597 | + }); |
| 598 | + |
| 599 | + $('#map-file-input').on('change', event => { |
| 600 | + Array.from(event.target.files).forEach(file => { |
| 601 | + const { name } = file; |
| 602 | + if (name.endsWith(".geojson")) { |
| 603 | + const layerName = name.toLowerCase().replace(".geojson", ""); |
| 604 | + const reader = new FileReader(); |
| 605 | + reader.onload = function(event) { |
| 606 | + app.mapData[layerName] = JSON.parse(event.target.result); |
| 607 | + layers[layerName] = L.geoJSON(app.mapData[layerName], { |
| 608 | + color: '#f00', |
| 609 | + weight: .75, |
| 610 | + fillColor: '#fafaf8', |
| 611 | + fillOpacity: .5 |
| 612 | + }); |
| 613 | + layers[layerName].addTo(map); |
| 614 | + }; |
| 615 | + reader.readAsText(file); |
| 616 | + } else { |
| 617 | + alert("Only GeoJSON Files are currently Supported."); |
| 618 | + } |
| 619 | + }); |
| 620 | + }); |
| 621 | + |
590 | 622 | function resetStack(){ |
591 | 623 | //Tile Layers, in reverse order: |
592 | 624 | if(layers.satellite && session.style.widgets['map-satellite-show']) layers.satellite.bringToBack(); |
|
0 commit comments