Add map popup information

[nickatomlin]

Consider adding more information to the popup that appears when you click on a map pin. Don't exactly repeat the "selected spot" information, but also don't make clicking on the pin necessary to view all available information about a location.

[theryankelly]

Include as feature: when a table item is clicked the info window pops up

[theryankelly]

Suggested Info Window Content: Name Activity Icons Get Directions Link

[theryankelly]

Need to explore options that allow the info windows to be seen when map is clicked. Jump to top? or limit size of table? other ideas?

[nickatomlin]

@theryankelly With recent site changes repeatedly emphasizing sorting the table by distance, I think the jump to top functionality becomes less important. Most users, even if they don't filter the table, will only be interested in the parks close to them, which will display near the map.

[nickatomlin]

WARNING: FIX MAY CAUSE PERFORMANCE ISSUES

Adding activity icons to the map popup was an unexpectedly complicated process and has been thoroughly documented below. Some changes have wide-reaching effects on the site and the formatting of related data.

To change information in the map popup, one must edit markerLayer in the code snippet below from index.html. As of b23baf48ca8cc4917774fd0bf7f4bb5d6b67671a, map popups contained only the name of the corresponding park, as evidenced by "<h2>{{ name }}</h2>".

// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ["name", "type", "town", "rowNumber"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)

// create map, tilelayer (map background), markers and popups
if (map_loaded == false) {
     map = Sheetsee.loadMap("map")
     Sheetsee.addTileLayer(map, 'jllord.n7aml2bc')
     markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, "<h2>{{ name }}</h2>", true)
     map_loaded = true
}

The {{name}} snippet is part of a template defined in [sheetsee.js](https://github.com/Designist/Parks/blob/gh-pages/js/sheetsee.js, the primary Javascript file for this site. Editing a template proves difficult because some methods like document.getElementByID("myID").innerHTML are not compatible. Additionally, the options of this template are restricted to those listed in optionsJSON above. Since name is listed, it can be included in the map popup information.

To include additional information in the map popup, it is often necessary to modify optionsJSON. For example, when I added the "Get Directions" link to the map popup, it was necessary to modify optionsJSON to include latitude and longitude information:

var optionsJSON = ["name", "type", "town", "rowNumber", "lat", "long"]
...
markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, `<a href="https://www.google.com/maps/dir/Current+Location/{{lat}},{{long}}" target="_blank">Get Directions</a></h2>`, true)

After that, I added the activity icons to the map popup. However, activity icons are not included in the database, and their appearance is based on the values of the Biking, Hiking, Paddling, Running, Swimming, and Walking columns in our spreadsheet. Because we are working with this highly limited sheetsee.js template, it is impossible to reference other scripts from within our index.html scripts.

Therefore, it has become common practice to use document.getElementById to edit the style of items in sheetsee.js templates. So I set all of the images to width=0%; with a function call that increases the width for correct elements:

var optionsJSON = ["name", "type", "town", "rowNumber", "lat", "long", "biking", "hiking", "paddling", "running", "swimming", "walking"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)

// create map, tilelayer (map background), markers and popups
if (map_loaded == false) {
     map = Sheetsee.loadMap("map")
     Sheetsee.addTileLayer(map, 'jllord.n7aml2bc')
     markerLayer = Sheetsee.addMarkerLayer(geoJSON, map,
          '<h2>{{ name }}' +
          '<img id="sbiking" src="icons/biking.svg" style="width:0%;">' +
          '<img id="shiking" src="icons/hiking.svg" style="width:0%;">' +
          '<img id="spaddling" src="icons/paddling.svg" style="width:0%;">' +
          '<img id="srunning" src="icons/running.svg" style="width:0%;">' +
          '<img id="sswimming" src="icons/swimming.svg" style="width:0%;">' +
          '<img id="swalking" src="icons/walking.svg" style="width:0%;" onload="popup({{biking}},{{hiking}},{{paddling}},{{running}},{{swimming}},{{walking}})">' +
          '<br/> <a href="https://www.google.com/maps/dir/Current+Location/{{lat}},{{long}}" target="_blank">Get Directions</a></h2>', true)
     map_loaded = true
}

Note the onload="popup({{biking}},{{hiking}},{{paddling}},{{running}},{{swimming}},{{walking}})". Then, at the beginning of theof my HTML file, I defined thepopup` function as follows:

<script>
function popup(biking, hiking, paddling, running, swimming, walking) {
if (biking == "yes") {
    if (document.getElementById("sbiking") !== null) {
        document.getElementById("sbiking").style.width="20px";
    }
}
if (hiking == "yes") {
  if (document.getElementById("shiking") !== null) {
      document.getElementById("shiking").style.width="20px";
  }
}
if (paddling == "yes") {
  if (document.getElementById("spaddling") !== null) {
      document.getElementById("spaddling").style.width="20px";
  }
}
if (running == "yes") {
  if (document.getElementById("srunning") !== null) {
      document.getElementById("srunning").style.width="20px";
  }
}
if (swimming == "yes") {
  if (document.getElementById("sswimming") !== null) {
      document.getElementById("sswimming").style.width="20px";
  }
}
if (walking == "yes") {
  if (document.getElementById("swalking") !== null) {
      document.getElementById("swalking").style.width="20px";
  }
}}
</script>

However, as a result of the template structure, it was impossible to call popup() on the yes/no responses stored in the databases. Unlike elsewhere in the code, they were not automatically converted to strings. As a result of this, the spreadsheet was altered as follows: in each of the six activity columns, yes was replaced with 'yes', and no was replaced with 'no'. Throughout the code, changes were made to accommodate for the database changes. This largely consisted of applying .slice(1,-1) to get rid of the unwanted single-quotes.