visualize via gist

css/style.css

@@ -1,5 +1,6 @@
 html, body {
-    margin: 20px;
+	margin: 20px;
+	font-family: 'Lato', sans-serif;
 }
 
 .instructions > p > span {

index.html

@@ -5,6 +5,7 @@
   <title>Convert 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">
   <link rel="stylesheet" href="css/style.css">
   <base target="_blank" /> 
 </head>
@@ -27,11 +28,15 @@ <h1>Convert ArcGIS JSON to GeoJSON</h1>
 
   <footer>
   	<!-- TODO - add bookmarklet link back when we get this working -->
-    This page uses <a href="https://github.com/Esri/arcgis-to-geojson-utils" target="_blank">arcgis-to-geojson-utils</a>. Created by <a href="http://gavinr.com" target="_blank">Gavin Rehkemper</a>.<br /><br />
+    Created by <a href="http://gavinr.com" target="_blank">Gavin Rehkemper</a>.<br />
+    This page uses <a href="https://github.com/Esri/arcgis-to-geojson-utils" target="_blank">arcgis-to-geojson-utils</a>. <br /><br />
     Also: <A href="http://csv.togeojson.com">CSV to GeoJSON</a>
   </footer>
 
   <script src="https://unpkg.com/vue"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+
   <script src="node_modules/%40esri/arcgis-to-geojson-utils/dist/arcgis-to-geojson.js"></script>
   <script src="js/app.js"></script>
 </body>

js/app.js

@@ -4,14 +4,17 @@ const JsonToGeojsonForm = {
 		<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">{{ resultJsonString }}</textarea><br />
-		<label v-show="showResultArea">Pretty Print <input type="checkbox" v-model="prettyPrint" /></label>
+		<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>`,
 	props: ['placeholder'],
 	data: () => {
 		return {
 			inputJson: '',
 			resultJson: '',
-			prettyPrint: true
+			prettyPrint: true,
+			gistLink: ''
 		};
 	},
 	computed: {
@@ -43,10 +46,51 @@ const JsonToGeojsonForm = {
 				}
 
 				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));
+
 		}
 	}
 };