South Haven Area Emergency Services Authority

Dial 911 For All Emergencies

User Tools

Site Tools

Trace:
public:flags_test

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

public:flags_test [2018/06/27 19:00]
quinntm created 		public:flags_test [2018/07/13 18:46] (current)
quinntm
Line 1: Line 1:
 <​html>​ <​html>​
- +<iframe ​src="​http://​www.southhavenit.com/shflags"​ width="760" ​height="700" ​style="display: block; margin-left: auto; margin-right: auto;" ​scrolling="no"></​iframe>
-    ​<meta name="​viewport"​ content="​width=device-width,​ initial-scale=1.0,​ user-scalable=no">​ +
-    <meta charset="​utf-8">​ +
-    <​style>​ +
-      #map { +
-        height: 100%; +
-      } +
- +
-      html, +
-      body { +
-        height: 100%; +
-        margin: 0; +
-        padding: 0; +
-      } +
- +
-    </​style>​ +
-    <​script ​src='​https://​cdnjs.cloudflare.com/​ajax/​libs/​tabletop.js/​1.5.1/​tabletop.min.js'></​script>​ +
- +
-    <div id="map"></​div>​ +
-    <​script>​ +
-      //​WORKING ​ map specific elemets +
-      var map; +
- +
-      /** +
-       * Function to initialize the map component +
-       * Will set a global map variable when complete +
-       * +
-       */ +
-      function initMap() { +
-        map = new google.maps.Map(document.getElementById('​map'​),​ { +
-          zoom: 14.95, +
-          center: new google.maps.LatLng(42.405,​ -86.2812597,​ 2846), +
-          mapTypeId: google.maps.MapTypeId.HYBRID +
-        }); +
- +
-        //Map is initialized without markers. Start +
-        //data loading process. +
-        initDataSource();​ +
-      } +
- +
-      /** +
-       * Function to add a marker to the map. The +
-       * marker will be determined by the color +
-       * variable. Will log and return if the color +
-       * is not available in the icon list. +
-       * +
-       * @param {string} name - Name of the flag +
-       * @param {string} color - Color enumeration +
-       * @param {double} lat - Latitude for the marker +
-       * @param {double} long - Longitude for the marker +
-       */ +
-      function addMarker(name,​ color, lat, long, beachname) { +
- +
-        //WORKING link to png images for icons +
-        //TODO better images (have, need upload) +
-        var icons = { +
-          Red: { +
-            icon: 'http://cms3.revize.com/revize/​southhavenmi/​images/​BeachFlags/​red.png'​ +
-          }, +
-          Green: { +
-            icon: '​http://​cms3.revize.com/​revize/​southhavenmi/​images/​BeachFlags/​green.png'​ +
-          }, +
-          Yellow: { +
-            icon: '​http://​cms3.revize.com/​revize/​southhavenmi/​images/​BeachFlags/​yellow.png'​ +
-          }, +
-          Gray: { +
-            //TODO: Get grey icon +
-            icon: '​http://​cms3.revize.com/​revize/​southhavenmi/​images/​BeachFlags/​grey2.png'​ +
-          } +
-        }; +
- +
-        //If the color is not defined, make a note. Move on. +
-        if (icons[color] ​=== undefined) { +
-          console.log("Row " ​+ name + " ​with color " ​+ color + " ​is not defined in the icon list. Moving on."​);​ +
- +
-          //TODO: If the icon cannot be found, none will be +
-          //shown. Create a placeholder icon. +
-          return; +
-        } +
- +
-        //Add a specific marker object to the global map +
-        //​reference +
-        var marker = new google.maps.Marker({ +
-          //create legit position object +
-          position: new google.maps.LatLng(lat,​ long), +
- +
-          //Get the icon URL +
-          icon: icons[color].icon,​ +
- +
-          //Hover-over info +
-          title: beachname + " is " + color, +
- +
-          //Label on Flag +
-          //label: name, +
- +
-          //Add to this given (initialized) map +
-          map: map +
-        }); +
-      } +
- +
-      /** +
-       * Function to load the marker data. This +
-       * will be coming from a Google Sheets link. +
-       * Loading is async. Wait for a loaded callback. +
-       * +
-       */ +
-      function initDataSource() { +
- +
-        //Request data. Call showInfo method when the data is loaded. Specifically limiting data to Flag_Color. Remove this if more data needs to be loaded at a time. +
-        Tabletop.init({ +
-          key: '​https://​docs.google.com/​spreadsheets/​d/​1AmjqS4hU8r_7q6XyBGansmTxg6cMIcZNh6E_0MZ8DSM/​pubhtml',​ +
-          callback: showInfo, +
-          wanted: ["​Beach_Flags"​] +
-        }) +
- +
-      } +
- +
-      /** +
-       * Function to handle parsing and handling of a single +
-       * row of data. Currently expects certain columns to +
-       * exist. Could be improved to use the Tabletop column +
-       * listings instead of hardcoded column names. +
-       * +
-       * @param {object} row - Raw Tabletop row of data +
-       */ +
-      var handleRow = function(row) { +
-        console.log("​Processing row: Flag " + row["​Flag Number"​] + " is " + row["​Flag Color"​] + " Lat: " + row["​Lat"​] + " Long: " + row["​Long"​] + " Name: " + row["​BeachName"​]); +
- +
-        addMarker(row["Flag Number"​],​ row["​Flag Color"​],​ row["​Lat"​],​ row["​Long"​],​ row["​BeachName"​]);​ +
-      } +
- +
-      /** +
-       * Function to be called when the Google Sheets +
-       * data is loaded. This begins the processing of +
-       * the data model. +
-       * +
-       * @param {object} data - Raw tabletop data model +
-       * @param {object} tabletop - Tabletop helper object +
-       */ +
-      function showInfo(data,​ tabletop) { +
-        console.log("​Data loaded. Processing rows..."​);​ +
- +
-        //TODO: Update with a better sheet name :) +
-        //Will call handleRow for each row in the spreadsheet model +
-        tabletop.sheets("​Beach_Flags"​).all().forEach(handleRow);​ +
-      } +
- +
-    </​script>​ +
-    <script async defer src="https://​maps.googleapis.com/​maps/​api/​js?​key=AIzaSyDM5lYj_he3jiwJhSu1HjqEhohNDaBsFG8&​callback=initMap"> +
- +
- +
-    ​</script> +
 </​html>​ </​html>​
public/flags_test.1530126009.txt.gz · Last modified: 2018/06/27 19:00 by quinntm

Page Tools

Serving South Haven City - South Haven Township - Casco Township - Geneva Township
Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki