Commit 6048ece4 authored by Barnabas Kendall's avatar Barnabas Kendall

save file, map logo in header

parent 8a6865da
Pipeline #158342821 passed with stage
in 0 seconds
<svg class="bi bi-map" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z"/>
</svg>
<template>
<header>
<nav>
<h1 class="brand">Map Editor</h1>
<h1 class="brand">
<img src="../assets/icons/map.svg" />
Map Editor
</h1>
<div class="menu">
<button
class="pseudo"
......@@ -45,6 +48,11 @@ export default {
font-size: x-large;
}
h1 img {
height: 1.25em;
margin-right:8px;
}
input {
display: none;
}
......
......@@ -4,7 +4,14 @@
<script>
import 'ol/ol.css'
import { createMap, geoJSONToFeatures, getFeatureProperties } from './map'
import {
createMap,
downloadJsonFile,
featuresToGeoJSON,
featureToGeoJSON,
geoJSONToFeatures,
getFeatureProperties
} from './map'
import { mapMutations, mapState } from 'vuex'
export default {
......@@ -25,7 +32,7 @@ export default {
this.$emit('ready')
},
computed: {
...mapState(['selectedIds'])
...mapState(['selectedIds', 'features'])
},
methods: {
async openFile (file) {
......@@ -38,11 +45,15 @@ export default {
console.log('openFile error', err)
}
},
async saveFile (feature) {
saveFile (feature) {
if (feature) {
const mapFeature = this.source.getFeatureById(feature.id)
if (!mapFeature) return
const json = featureToGeoJSON(mapFeature, feature)
downloadJsonFile(json, `feature_${feature.id}.json`)
} else {
const json = featuresToGeoJSON(this.source.getFeatures(), this.features)
downloadJsonFile(json, 'features.json')
}
},
onSelect (e) {
......
......@@ -69,3 +69,12 @@ export function featuresToGeoJSON (features, propMap) {
}
return geoJSONFormat.writeFeaturesObject(features, { decimals: 7 })
}
export function downloadJsonFile (json, fileName) {
const fileBlob = new Blob([JSON.stringify(json)], { type: 'application/json' })
const a = document.createElement('a')
a.download = fileName
a.href = URL.createObjectURL(fileBlob)
setTimeout(() => URL.revokeObjectURL(a.href), 3E4)
setTimeout(() => a.click(), 0)
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment