JavaScript, Part 3 Examples

Here are some examples with a bit of annotation that I hope are helpful to you in your JavaScript adventures!
— David

Template Examples

{
    "apples" : [
                  "Granny Smith",
                  "Macoun",
                  "Empire",
                  "Honey Crisp",
                  "Albemarle Pippin"
                ],
    "oranges" : [
                  "Naval Orange",
                  "Tangelo",
                  "Clementine",
                  "Valencia Orange"
                ]
   }

fruits1.html – Iterate through data and use DOM methods to build up content from data structure. Key aspects are:
- for (let f in fruits) { } to iterate through keys (f) and access values (fruits[f])
- for (let type of fruits[f]) { } to iterate through array
- DOM methods of createElement, createTextNode, appendChild, replaceChildren, and our old favorite getElementById.
- Using CSS to capitalize apples and oranges with text-transform: capitalize

fruits2.html – Use a Handlebars template print out a list of apple types. Key aspects are:

Create the template

<template id="fruit-template">
    <ul>
    {{#apples}}
        <li>{{.}}</li>
    {{/apples}}
    </ul>
</template>

In HTML, load Handlebars library from jsdelivr CDN via script element. Remember that loading Handlebars must come before Javascript that uses Handlebars!

In JS, get the text of the template via innerHTML, and then compile with Handlebars.compile(), and then execute the resulting compiled template

window.addEventListener("DOMContentLoaded",function(){
            let fruitTemplateResults = "";
            let fruitTemplate = document.getElementById('fruit-template').innerHTML;
            let fruitCompiledTemplate = Handlebars.compile(fruitTemplate);
            fruitTemplateResults = fruitCompiledTemplate(fruits);
            console.log(fruitTemplateResults);
            document.getElementById('fruitlist').innerHTML = fruitTemplateResults;
});

fruits3.html – Use a Handlebars template iterate through all the fruits and their types. Key aspects are:
- Create the template. When each-ing through fruits, @key in Handlebars refers to the key and this is how to access the value of that key. Not the most intuitive, but we'll make improvements in fruits4.html
```
<template id="fruit-template">
    {{#each fruits }}  
    <h2>{{@key}}</h2>
        <ul>
            {{#this}}
            <li>{{.}}</li>
            {{/this}}
        </ul>
    {{/each}}
</template>
```

fruits4.html – Let's restructure our data a bit to make it easier to use. We have the same data, but we'll use a list of fruits, and have a name and a variety for each of the fruits. Key aspects are:

New data structure is:

{
            fruits: [
                {
                    type: "Apples",
                    varieties: [
                        "Granny Smith",
                        "Macoun",
                        "Empire",
                        "Honey Crisp",
                        "Albemarle Pippin",
                    ]
                },
                {
                    type: "Oranges",
                    varieties: [
                        "Naval Orange", 
                        "Tangelo", 
                        "Clementine", 
                        "Valencia Orange"
                    ]
                }
            ]
        }

And this makes our template a bit more intuitive:

<template id="fruit-template">
    {{#fruits}}  
    <h2>{{ type }}</h2>
       <ul>
           {{#varieties}}
            <li>{{.}}</li>
           {{/varieties}}
       </ul>
    {{/fruits}}
</template>

Maps Examples

☹ So the mistake I made in class was not including my JavaScript that was creating the map in the HTML page, as in
<script src="scripts/map-1.js> </script>

I'll focus on the use of LeafletJS and OpenStreetMap (OSM) tiles.

map-1.html. Map using LeafletJS and OpenStreetMap (OSM) tiles. Center on the John Harvard Statue and also put a marker on that spot. Some notes:
- Load LeafletJS via CDN —- making sure that I include the CSS first and then the JS for Leaflet, as per Leaflet documentation.
- John Harvard Statue data is:
```
let johnHarvardStatue = {
    name : "John Harvard Statue",
    description: "The John Harvard statue is nicknamed the 'statue of three lies.'",
    lat : 42.374474,
    lng : -71.117207
}
```
- Once the LeafletJS library is loaded, I now have the Leaflet object (L) that I can use.
  As in,
  let map = L.map("map-container");
  where "map-container" is the id of the markup element where I want my map placed.
- And note that I need to specify a heigth for my map container. In the CSS, I used viewport height (vh) units, as in
  #map-container { height: 80vh; }
  1vh is 1% of the initial viewport height. Note there is also a unit vw, which is viewport width.
- We also need to set the L.tileLayer and attribution that we know about by reading the Leaflet documentation and viewing their basic examples.
map-2.html. Map using LeafletJS and Map Box tiles. Same as in map-1.html, but uses Map Box tiles instead of OSM. Check out the L.tileLayer to see the differences between Map Box and OSM in map-1.html
map-5.html. Map using LeafletJS and OSM and multiple markers from JavaScript data of Ivy League school locations.
- So, here I iterate through a list of schools, creating a marker on the map for each one.
  for (let place of schoolsData.schools) { /* do marker stuff */ }
- I also use a Handlebars template to create the "popup HTML" for the marker. While the popup HTML is not complex and we could just use string concatenation as we have before, I wanted to show this use of templates, because at some point the HTML will be too complex to string together in JS. Note that I compile the template once, and then execute it for each marker.
- Also, I take advantage of the Leaflet fitBounds method L.fitBounds() method to set the latitude and longitude "min max" corners of the map. This automatically sets the zoom level, and it ensures that all my markers will be visible. Note that to accomplish this I need to keep an array of all the latitudes and longitudes so I can figure out the min and max.
- An aside: I also use a L.LayerGroup for all my markers, and note that I need to add the LayerGroup to the map (markersLayer.addTo(map)). While this isn't strictly needed here, I am thinking ahead to having a pull-down of different school conferences that would then populate the map with those markers. It is easier to remove a single layer and create a new one than to remove all the markers existing on the map.
Two examples using Google Maps
- map-3.html. Map using Google Maps.
  - Maps JavaScript API (registration and API key needed; please don't use mine from the examples beyond light experimentation!)
  - Creating Google Map URLs (no API key needed)
- map-4.html. Map using Google Maps and GeoRSS data.
  Learn more about Google Maps and GeoRSS and view the Ivy League GeoRSS file.