austindoeswork/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Zone Editor</title>

    <style>
      #map {
        height: 50vh;
      }

      pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
      .string { color: green; }
      .number { color: darkorange; }
      .boolean { color: blue; }
      .null { color: magenta; }
      .key { color: red; }

    </style>

    <script>
      var CENTER_LAT = 37.319;
      var CENTER_LNG = -122.03;
      var ZOOM = 18;
      var MAP = {};

      var ZONES = [];
      var STATE = 'idle';
    </script>

</head>

<body
  onkeydown="
    if (event.keyCode == 16) {
      STATE = 'adding';
    }
  "

  onkeyup="
    STATE = 'idle';
  "
>
  <div id="instructions">
    <h2>SHIFT+CLICK TO START A NEW ZONE</h2>
  </div>

  <div id="mapOptions">
    <div class="inputWrap">
      <label for="latIn">Latitude</label>
      <input id="latIn" type="text" value="37.319"
        onkeyup="
          CENTER_LAT = Number(this.value);
          MAP.setCenter(new google.maps.LatLng(CENTER_LAT, CENTER_LNG));
        "
      >
    </div>


    <div class="inputWrap">
      <label for="lngIn">Longitude</label>
      <input id="lngIn" type="text" value="-122.03"
        onkeyup="
          CENTER_LNG = Number(this.value);
          MAP.setCenter(new google.maps.LatLng(CENTER_LAT, CENTER_LNG));
        "
      >
    </div>

    <div class="inputWrap">
      <label for="zoomIn">Zoom</label>
      <input id="zoomIn" type="text" value="16"
        onkeyup="
          ZOOM = Number(this.value);
          MAP.setZoom(ZOOM);
        "
      >
    </div>
  </div>

  <div id="zoneInput">
    <label for="inputZones">Input Zones</label>
    <textarea id="inputZones"></textarea>
    <button
      onmousedown="
        let input = document.getElementById('inputZones').value;
        if (!input) {
          return;
        }

        input = JSON.parse(input);
        if (!Array.isArray(input)) {
          input = [input];
        }

        for (let i = 0; i < input.length; i++) {
          insertZone(input[i]);
        }

        document.getElementById('inputZones').value = '';
      "
    >Submit Zones</button>
  </div>

  <div id="map"></div>

  <pre id="zoneOutput"></pre>

  <script>
    function OnPolyChange(e,poly) {

      console.log("ONPOLYCHANGE");
      // let newPath = this.getPaths().getArray()[0].b;
      let newPath = poly.getPath().b;
      let newCoords = [];
      for (let i = 0; i < newPath.length; i++ ) {
        let coord = {};
        coord.Lat = newPath[i].lat();
        coord.Long = newPath[i].lng();
        newCoords.push(coord);
      }

      for (let i = 0; i < ZONES.length; i++) {
        if (ZONES[i].Namespace == poly.zoneNamespace) {
          ZONES[i].Coordinates = newCoords;
        }
      }

      let output = document.getElementById('zoneOutput');
      output.innerHTML = '';
      output.innerHTML = syntaxHighlight(ZONES);
    }

    function makeid() {
      let text = "";
      let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      for (var i = 0; i < 10; i++) {
        text += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
      }
      return text;
    }

    function initMap() {
      // Create a map object and specify the DOM element for display.
      MAP = new google.maps.Map(document.getElementById('map'), {
        center: {lat: CENTER_LAT, lng: CENTER_LNG},
        scrollwheel: false,
        zoom: ZOOM,
      });

      MAP.addListener('mouseup', (function(e) {
        if (STATE == 'adding') {
          let newZone = {
            'Namespace': makeid(),
            'HumanString': 'Unnamed Zone',
            'Coordinates': [
              {'Lat': e.latLng.lat(), 'Long': e.latLng.lng()},
              {'Lat': e.latLng.lat()+0.0002, 'Long': e.latLng.lng()},
              {'Lat': e.latLng.lat()+0.0002, 'Long': e.latLng.lng()+0.0002},
              {'Lat': e.latLng.lat(), 'Long': e.latLng.lng()+0.0002},
			  //{'Lat': e.latLng.lat(), 'Long': e.latLng.lng()},
            ],
          };

          insertZone(newZone);
        }
      }));
    }

    function convertCoords(coordsArr) {
      let out = []
      for (let i = 0; i < coordsArr.length; i++) {
        let newCoords = {};
        newCoords.lat = coordsArr[i].Lat;
        newCoords.lng = coordsArr[i].Long;
        out.push(newCoords);
      }

      return out
    }

    function insertZone(zone) {
      for (let i = 0; i < ZONES.length; i++) {
        if (ZONES[i].Namespace == zone.Namespace) {
          console.log("ERROR: Zone already in the system");
          return;
        }
      }

      var polyCoords = convertCoords(zone.Coordinates);

      // Construct the polygon.
      var polygon = new google.maps.Polygon({
        paths: polyCoords,
        strokeColor: '#32aeef',
        strokeOpacity: 0.9,
        strokeWeight: 2,
        fillColor: '#32aeef',
        fillOpacity: 0.5,
        editable: true,
        zoneNamespace: zone.Namespace
      });

      ZONES.push(zone);
      polygon.setMap(MAP);
      polygon.addListener('mouseup', delayChange.bind(polygon));
        // OnPolyChange.bind(polygon));


      let output = document.getElementById('zoneOutput');
      output.innerHTML = '';
      output.innerHTML = syntaxHighlight(ZONES);
    }


    function delayChange(e) {
      setTimeout(function(){
        OnPolyChange(e, this);
      }.bind(this), 50);
    }

    // Stolen from stackoverflow, dont remember what link tho
    function syntaxHighlight(json) {
      console.log("SYNTAX");
      if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
      }
      json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key';
          } else {
            cls = 'string';
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean';
        } else if (/null/.test(match)) {
          cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
      });
    }

  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnzA0ixuGIdsbmNIPv2E9S0tg8fvel1UA&callback=initMap"
  async defer></script>
</body>

<!--
{"Namespace":"ottoq.cupertino.left.1","HumanString":"West 1","Coordinates":[{"Lat":37.318464,"Long":-122.030993},{"Lat":37.318464,"Long":-122.031352},{"Lat":37.318818,"Long":-122.031371},{"Lat":37.318961,"Long":-122.031409},{"Lat":37.3193,"Long":-122.031419},{"Lat":37.319302,"Long":-122.030898},{"Lat":37.318837,"Long":-122.030979},{"Lat":37.318464,"Long":-122.030993}]}
-->


</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Zone Editor</title>

	<style>
	#map {
	height: 50vh;
	}

	pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
	.string { color: green; }
	.number { color: darkorange; }
	.boolean { color: blue; }
	.null { color: magenta; }
	.key { color: red; }

	</style>

	<script>
	var CENTER_LAT = 37.319;
	var CENTER_LNG = -122.03;
	var ZOOM = 18;
	var MAP = {};

	var ZONES = [];
	var STATE = 'idle';
	</script>

	</head>

	<body
	onkeydown="
	if (event.keyCode == 16) {
	STATE = 'adding';
	}
	"

	onkeyup="
	STATE = 'idle';
	"
	>
	<div id="instructions">
	<h2>SHIFT+CLICK TO START A NEW ZONE</h2>
	</div>

	<div id="mapOptions">
	<div class="inputWrap">
	<label for="latIn">Latitude</label>
	<input id="latIn" type="text" value="37.319"
	onkeyup="
	CENTER_LAT = Number(this.value);
	MAP.setCenter(new google.maps.LatLng(CENTER_LAT, CENTER_LNG));
	"
	>
	</div>


	<div class="inputWrap">
	<label for="lngIn">Longitude</label>
	<input id="lngIn" type="text" value="-122.03"
	onkeyup="
	CENTER_LNG = Number(this.value);
	MAP.setCenter(new google.maps.LatLng(CENTER_LAT, CENTER_LNG));
	"
	>
	</div>

	<div class="inputWrap">
	<label for="zoomIn">Zoom</label>
	<input id="zoomIn" type="text" value="16"
	onkeyup="
	ZOOM = Number(this.value);
	MAP.setZoom(ZOOM);
	"
	>
	</div>
	</div>

	<div id="zoneInput">
	<label for="inputZones">Input Zones</label>
	<textarea id="inputZones"></textarea>
	<button
	onmousedown="
	let input = document.getElementById('inputZones').value;
	if (!input) {
	return;
	}

	input = JSON.parse(input);
	if (!Array.isArray(input)) {
	input = [input];
	}

	for (let i = 0; i < input.length; i++) {
	insertZone(input[i]);
	}

	document.getElementById('inputZones').value = '';
	"
	>Submit Zones</button>
	</div>

	<div id="map"></div>

	<pre id="zoneOutput"></pre>

	<script>
	function OnPolyChange(e,poly) {

	console.log("ONPOLYCHANGE");
	// let newPath = this.getPaths().getArray()[0].b;
	let newPath = poly.getPath().b;
	let newCoords = [];
	for (let i = 0; i < newPath.length; i++ ) {
	let coord = {};
	coord.Lat = newPath[i].lat();
	coord.Long = newPath[i].lng();
	newCoords.push(coord);
	}

	for (let i = 0; i < ZONES.length; i++) {
	if (ZONES[i].Namespace == poly.zoneNamespace) {
	ZONES[i].Coordinates = newCoords;
	}
	}

	let output = document.getElementById('zoneOutput');
	output.innerHTML = '';
	output.innerHTML = syntaxHighlight(ZONES);
	}

	function makeid() {
	let text = "";
	let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

	for (var i = 0; i < 10; i++) {
	text += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
	}
	return text;
	}

	function initMap() {
	// Create a map object and specify the DOM element for display.
	MAP = new google.maps.Map(document.getElementById('map'), {
	center: {lat: CENTER_LAT, lng: CENTER_LNG},
	scrollwheel: false,
	zoom: ZOOM,
	});

	MAP.addListener('mouseup', (function(e) {
	if (STATE == 'adding') {
	let newZone = {
	'Namespace': makeid(),
	'HumanString': 'Unnamed Zone',
	'Coordinates': [
	{'Lat': e.latLng.lat(), 'Long': e.latLng.lng()},
	{'Lat': e.latLng.lat()+0.0002, 'Long': e.latLng.lng()},
	{'Lat': e.latLng.lat()+0.0002, 'Long': e.latLng.lng()+0.0002},
	{'Lat': e.latLng.lat(), 'Long': e.latLng.lng()+0.0002},
	//{'Lat': e.latLng.lat(), 'Long': e.latLng.lng()},
	],
	};

	insertZone(newZone);
	}
	}));
	}

	function convertCoords(coordsArr) {
	let out = []
	for (let i = 0; i < coordsArr.length; i++) {
	let newCoords = {};
	newCoords.lat = coordsArr[i].Lat;
	newCoords.lng = coordsArr[i].Long;
	out.push(newCoords);
	}

	return out
	}

	function insertZone(zone) {
	for (let i = 0; i < ZONES.length; i++) {
	if (ZONES[i].Namespace == zone.Namespace) {
	console.log("ERROR: Zone already in the system");
	return;
	}
	}

	var polyCoords = convertCoords(zone.Coordinates);

	// Construct the polygon.
	var polygon = new google.maps.Polygon({
	paths: polyCoords,
	strokeColor: '#32aeef',
	strokeOpacity: 0.9,
	strokeWeight: 2,
	fillColor: '#32aeef',
	fillOpacity: 0.5,
	editable: true,
	zoneNamespace: zone.Namespace
	});

	ZONES.push(zone);
	polygon.setMap(MAP);
	polygon.addListener('mouseup', delayChange.bind(polygon));
	// OnPolyChange.bind(polygon));


	let output = document.getElementById('zoneOutput');
	output.innerHTML = '';
	output.innerHTML = syntaxHighlight(ZONES);
	}


	function delayChange(e) {
	setTimeout(function(){
	OnPolyChange(e, this);
	}.bind(this), 50);
	}

	// Stolen from stackoverflow, dont remember what link tho
	function syntaxHighlight(json) {
	console.log("SYNTAX");
	if (typeof json != 'string') {
	json = JSON.stringify(json, undefined, 2);
	}
	json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
	return json.replace(/("(\\u[a-zA-Z0-9]{4}\|\\[^u]\|[^\\"])"(\s:)?\|\b(true\|false\|null)\b\|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
	var cls = 'number';
	if (/^"/.test(match)) {
	if (/:$/.test(match)) {
	cls = 'key';
	} else {
	cls = 'string';
	}
	} else if (/true\|false/.test(match)) {
	cls = 'boolean';
	} else if (/null/.test(match)) {
	cls = 'null';
	}
	return '<span class="' + cls + '">' + match + '</span>';
	});
	}

	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnzA0ixuGIdsbmNIPv2E9S0tg8fvel1UA&callback=initMap"
	async defer></script>
	</body>

	<!--
	{"Namespace":"ottoq.cupertino.left.1","HumanString":"West 1","Coordinates":[{"Lat":37.318464,"Long":-122.030993},{"Lat":37.318464,"Long":-122.031352},{"Lat":37.318818,"Long":-122.031371},{"Lat":37.318961,"Long":-122.031409},{"Lat":37.3193,"Long":-122.031419},{"Lat":37.319302,"Long":-122.030898},{"Lat":37.318837,"Long":-122.030979},{"Lat":37.318464,"Long":-122.030993}]}
	-->


	</html>