Update map again

map.html

@@ -1,6 +1,114 @@
 ---
 layout: default
-title: Map
-order: 2
+title: Wireless Map
+parent: Map
+order: 1
 layout_footer: false
 ---
+<div id="map">
+  <div id="map_canvas"></div>
+</div>
+<div class="options customShadowBox" id="mapOptions">
+  <div class="box-header">
+    <h2>Options</h2>
+    <div class="expand" onclick="toggleClass('mapOptions','FullHeight')">=</div>
+  </div>
+  <p>
+    <strong>Filter Nodes</strong>
+  </p>
+  <div class="checkBoxSlider">
+    <input onChange="initialize()" type="checkbox" name="Active" id="chkActive" checked />
+    <label for="chkActive"></label>
+  </div>
+  Show active nodes<br/>
+  <div class="checkBoxSlider">
+    <input onChange="initialize()" type="checkbox" name="Proposed" id="chkProposed"/>
+    <label for="chkProposed"></label>
+  </div>
+  Show proposed nodes<br/>
+  <div class="checkBoxSlider">
+    <input onChange="initialize()" type="checkbox" name="Proposed" id="chkTheme"/>
+    <label for="chkTheme"></label>
+  </div>
+  Show buildings and features<br/>
+  <div class="checkBoxSlider">
+    <input onChange="initialize()" type="checkbox" name="Group" id="chkGroup"/>
+    <label for="chkGroup"></label>
+  </div>
+  Group at higher zoom level <br />
+  <br/>
+  <button class="compact" onclick="ShowAdvanced(this)">+Show Advanced</button>
+  <div style="display:none" id="customAdvanced">
+  <b>Node URL:</b>
+  <input style="width:100%;" type="text" id="nodeURL" name="nodeURL" value="https://raw.githubusercontent.com/tomeshnet/node-list/master/tomeshnet-node-list.json" onchange="initialize()" />
+  </div>
+</div>
+<div class="InformationDialog">
+  <a href="#" onclick="toggleClass('infoDialog','isNotVisible')">!</a>
+</div>
+<div id="infoDialog" class="isNotVisible">
+Our network is currently still under construction. If you are interested in helping build out the network, live in Toronto, and/or are willing to host a wireless directional antenna please get in touch with us!<br /> 
+This map estimates the distance the antennas can go. This may not be the case in the real world and also depends on the hardware you have on your end.
+</div>
+<div class="customMarker">
+  <div id="customMarkerGeoCodeDiv">
+    <h1>Find a location on the map</h1>
+    <input title="Find Position Based On Browser Reported Location" style="border-radius: 2px 0px 0px 2px; border: 0px; background-color:white; border-right: solid #dadadb 2px; background-image: url(/images/iconLocation.svg); background-size: 16px 16px; padding-left: 10px; padding-top:1px;" class="button button-primary MapButton" type="button" value="." onclick="GeoLocationBrowser(); $('div#customMarkerGeoCodeDiv').hide(); 	 $('div#customMarkerLocationDiv').show(); return false;" /><input type="text" placeholder="Search For Location" id="customMarkerAddress" class="MapButton"><input title="Find Position Based On Google Address Decoding" class="button button-primary MapButton" type="button" value="." onclick="customMarkerGeoCode();" style="border-radius: 0 2px 2px 0; color: #1f73e0; background-image: url(/images/iconSearch.svg);   background-size: 20px 20px; "/>
+    <br/>
+    <input class="button button-primary MapButtonColor" style="margin-top:10px;" type="button" onclick="$('div#customMarkerGeoCodeDiv').hide();$('div#customMarkerLocationDiv').show(); addCustomMarker(); return false;" value="Manual Position">
+  </div>
+  <div id="customMarkerLocationDiv" style="display:none;" class="customShadowBox">
+    <div class="box-header">
+      <h2>Manual Position</h2>
+      <div style="cursor: pointer;" onclick="clearWindows();">×</div>
+    </div>
+    <p>A marker has been placed at your desired location. You can Click and Drag the marker to fine tune its position</p>
+    <p>
+      <strong>Lat:</strong>
+      <input size="16" onchange="addCustomMarker();" value="43.678136" id="customMarkerLat" type="text">
+      <strong>Long:</strong>
+      <input size="16" type="text" id="customMarkerLng" onchange="addCustomMarker();" value="-79.397593">
+    </p>
+    <!--disabled until it is corrected-->
+    <div style="display:none">
+      <p>To generate a JSON Record of this marker please provide the following:</p>
+      <strong>Floor:</strong>
+      <input value="1" id="customMarkerFloor" style="width:40px;"  type="text">
+      <strong>Facing:</strong>
+      <select id="customMarkerDirection">
+        <option>North</option>
+        <option>North East</option>
+        <option>East</option>
+        <option>South East</option>
+        <option>South</option>
+        <option>South West</option>
+        <option>West</option>
+        <option>North West</option>
+        <option value="Omni">All Directions</option>
+      </select>
+      <div class="dialogInline">
+        <strong>Node Name:</strong><br />
+        <input size="13" type="text" id="customMarkerName" value="UnNamed">
+      </div>
+      <div class="dialogInline">
+        <strong>Contact:</strong><br />
+        <input size="13" type="text" id="customMarkerContact" value="">
+      </div>
+      <br/><br/>
+      <input class="button button-primary" type="button" value="Generate JSON" onClick="customMarkerShowJsonDialog()" />
+    </div>
+  </div>
+  <div id="customMarkerJSONDiv" style="display:none;" class="customShadowBox">
+    <div id="customMakerJSONContent"></div>
+    <input type="button" class="button-primary" value="Submit Your Node" onclick="submitJson();" />
+    <input style="margin-left:50px;" type="button" value="Start Over" onclick="clearWindows();" />
+  </div>
+</div>
+
+<script src="/js/vendor/jquery-3.2.1.min.js"></script>
+<script src="/js/vendor/markerclusterer.js"></script>
+
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfjIeSSWeDLOYt7f_cHHG4GtgOowvQFBs"></script>
+<script src="/js/map_arcdraw.js"></script>
+<script src="/js/map_style.js"></script>
+<script src="/js/map.js"></script>

map_meshtastic.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Meshtastic Map
-parrent: Map
+parent: Map
 order: 2
 layout_footer: false
 ---
@@ -17,16 +17,20 @@
         }
 
         #map {
+            width: 100%;
+            height: 100%;
+        }
+        #mapWrapper {
             width: 100%;
             padding-top: 55px;
             height: calc(100% - 55px);
         }
     </style>
 
 <body>
-
+    <div id="mapWrapper">
     <div id="map"></div>
-
+    </div>
     <script>
 
         function createColoredIcon(color) {

maps.html

@@ -0,0 +1,6 @@
+---
+layout: default
+title: Map
+order: 2
+layout_footer: false
+---