JavaScript, Part 3, Maps

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

Maps Examples

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-3.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-g1.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-g2.html. Map using Google Maps and GeoRSS data.
    Learn more about Google Maps and GeoRSS and view the Ivy League GeoRSS file.