South Haven Area Emergency Services Authority

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>

  <head>
    <title>Custom Markers</title>
    <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>
  </head>

  <body>
    <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>
  </body>

</html>
South Haven Area Emergency Services Authority

User Tools

Site Tools

Page Tools
