Skip to content

Commit

Permalink
added bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@gavinr
gavinr committed Jan 8, 2018
1 parent 9440492 commit 4bfc0d2
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 101 deletions.
1 change: 0 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<title>arcgis-json-to-geojson</title>
<meta name="description" content="Convert a CSV to GeoJSON">
<meta name="author" content="Gavin Rehkemper (gavinr.com)">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

</head>
<body>
Expand Down
5 changes: 5 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@
"deploy": "gh-pages -d . --add"
},
"dependencies": {
"vue": "^2.5.11",
"@esri/arcgis-to-geojson-utils": "^1.0.4",
"axios": "^0.17.1",
"sweetalert": "^2.0.8"
"bootstrap": "^4.0.0-beta.3",
"sweetalert": "^2.0.8",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
Expand Down
29 changes: 20 additions & 9 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@
</p>
</div>

<div id="app" class="csvForm">
<json-to-geojson-form placeholder="Put ArcGIS JSON here"></json-to-geojson-form>
<div id="app" class="csvForm container-fluid">
<div class="row">
<div class="col-sm">
<json-to-geojson-form placeholder="Put ArcGIS JSON here"></json-to-geojson-form>
</div>
<div class="col-sm">
<!-- todo: map goes here? -->
</div>
</div>
</div>

<footer>
Expand All @@ -33,21 +40,25 @@ export default {
}
},
components: {
'json-to-geojson-form': JsonToGeojsonForm
}
'json-to-geojson-form': JsonToGeojsonForm
}
}
</script>

<style lang="scss">
@import '~bootstrap/dist/css/bootstrap.css';
html, body {
margin: 20px;
font-family: 'Lato', sans-serif;
margin: 20px;
font-family: 'Lato', sans-serif;
}
footer,
footer a {
color: #C0C0C0;
size: 0.8rem;
text-align: center;
color: #C0C0C0;
size: 0.8rem;
text-align: center;
margin-top: 30px;
}
</style>
195 changes: 106 additions & 89 deletions src/JsonToGeojsonForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,29 @@
<template>
<div>
<textarea rows="10" cols="100" v-bind:placeholder="placeholder" v-model="inputJson"></textarea><br />
<input type="button" value="Convert" v-on:click.prevent="convert()" /><br /><br />
<textarea rows="10" cols="100" v-show="showResultArea" v-model="resultJsonString"></textarea><br />
<label v-show="showResultArea">Pretty Print <input type="checkbox" v-model="prettyPrint" /></label>
<input type="button" value="Visualize via Gist" v-show="showResultArea && gistLink === ''" v-on:click.prevent="postToGist()" />
<span v-show="gistLink"><a v-bind:href="gistLink">See map!</a></span>
</div>
<form>
<div class="form-group">
<textarea rows="10" class="form-control" v-bind:placeholder="placeholder" v-model="inputJson"></textarea>
</div>
<div class="form-group float-right">
<button type="button" class="btn btn-primary" v-on:click.prevent="convert()">Convert</button>
</div>

<div class="form-group">
<textarea rows="10" class="form-control" v-show="showResultArea" v-model="resultJsonString"></textarea>
</div>

<div class="form-row align-items-center">
<div class="col">
<label v-show="showResultArea">Pretty Print <input type="checkbox" v-model="prettyPrint" /></label>
</div>
<div class="col">
<button type="button" class="btn btn-info float-right" v-show="showResultArea && gistLink === ''" v-on:click.prevent="postToGist()">Visualize via Gist</button>
</div>
<div class="col" v-show="gistLink">
<a class="btn btn-success float-right" v-bind:href="gistLink" target="_blank">See map!</a>
</div>
</div>

</form>
</template>

<script>
Expand All @@ -17,90 +34,90 @@ import axios from 'axios/dist/axios.min';
export default {
name: 'JsonToGeojsonForm',
props: ['placeholder'],
data: () => {
return {
inputJson: '',
resultJson: '',
prettyPrint: true,
gistLink: ''
};
},
computed: {
showResultArea: function() {
return this.resultJson !== '';
},
resultJsonString: function() {
return JSON.stringify(this.resultJson, null, (this.prettyPrint ? 2 : undefined));
}
},
methods: {
convert: function(evt) {
try {
const inputJson = JSON.parse(this.inputJson);
// if this is an object, assume FeatureSet. If array, assume array of features.
let features = inputJson;
if(!Array.isArray(inputJson)) {
features = inputJson.features;
}
const geoJsonFeatures = features.map((feature, i) => {
let f = ArcgisToGeojsonUtils.arcgisToGeoJSON(feature);
f.id = i;
return f;
});
data: () => {
return {
inputJson: '',
resultJson: '',
prettyPrint: true,
gistLink: ''
};
},
computed: {
showResultArea: function() {
return this.resultJson !== '';
},
resultJsonString: function() {
return JSON.stringify(this.resultJson, null, (this.prettyPrint ? 2 : undefined));
}
},
methods: {
convert: function(evt) {
try {
const inputJson = JSON.parse(this.inputJson);
// if this is an object, assume FeatureSet. If array, assume array of features.
let features = inputJson;
if(!Array.isArray(inputJson)) {
features = inputJson.features;
}
const geoJsonFeatures = features.map((feature, i) => {
let f = ArcgisToGeojsonUtils.arcgisToGeoJSON(feature);
f.id = i;
return f;
});
let featureCollection = {
type: 'FeatureCollection',
features: geoJsonFeatures
}
let featureCollection = {
type: 'FeatureCollection',
features: geoJsonFeatures
}
this.resultJson = featureCollection;
this.gistLink = '';
} catch (e) {
this.resultJson = 'Invalid input.';
this.gistLink = '';
}
},
this.resultJson = featureCollection;
this.gistLink = '';
} catch (e) {
this.resultJson = 'Invalid input.';
this.gistLink = '';
}
},
postToGist: function(evt) {
swal({
title: "Are you sure?",
content: {
element: "span",
attributes: {
innerHTML: 'This will post your GeoJSON to a public <a href="https://help.github.com/articles/about-gists/" target="_blank">GitHub Gist</a> so you can visualize it on a map. Are you sure you want to do this?'
},
},
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(function(doPost) {
if(doPost) {
axios.post('https://api.github.com/gists', JSON.stringify({
description: 'GEOJSON created by http://arcgisjson.togeojson.com',
public: 'true',
files: {
'arcgis-json-to-geojson.geojson': {
'content': JSON.stringify(this.resultJson)
}
}
}), {
headers: {
"User-Agent": "arcgis-json-to-geojson",
"Origin": "http://togeojson.com"
}
})
.then(function (response) {
this.gistLink = response.data.html_url;
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
}.bind(this));
}
}
postToGist: function(evt) {
swal({
title: "Are you sure?",
content: {
element: "span",
attributes: {
innerHTML: 'This will post your GeoJSON to a public <a href="https://help.github.com/articles/about-gists/" target="_blank">GitHub Gist</a> so you can visualize it on a map. Are you sure you want to do this?'
},
},
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(function(doPost) {
if(doPost) {
axios.post('https://api.github.com/gists', JSON.stringify({
description: 'GEOJSON created by http://arcgisjson.togeojson.com',
public: 'true',
files: {
'arcgis-json-to-geojson.geojson': {
'content': JSON.stringify(this.resultJson)
}
}
}), {
headers: {
"User-Agent": "arcgis-json-to-geojson",
"Origin": "http://togeojson.com"
}
})
.then(function (response) {
this.gistLink = response.data.html_url;
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
}.bind(this));
}
}
}
</script>

Expand Down

0 comments on commit 4bfc0d2

Please sign in to comment.