lab/lab1/part1-array-access.html

<!DOCTYPE html>
<html>
  <head>
    <!--stylesheet imports-->
    <link rel="stylesheet" href="leaflet.css" />
  </head>
  <body>

    <!--left panel-->
    <div style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;"></div>
    <!--map-->
    <div id="map" style="position: absolute; right: 0; left: 400px; top: 0; bottom: 0;"></div>

    <!--javascript imports-->
    <script src="leaflet.js"></script>

    <script>

    /* =====================

    # Lab 1, Part 1 — Array Access

    ## Introduction

    Refactor your week 1 homework assignment to leverage some of the Javascript
    functionality we have been learning about. We will start by improving the
    way we store data and the amount of times we call the L.marker method.

    ## Task 1: Data Storage

    Let's consider a marker for a single restaurant point location. We could
    store information about that marker as an array
    ([element1, element2, element3...]). Your point location array should
    contain the following three elements in this order: 1. lat, 2. lng, 3. label.

    Create an array of arrays (an array that contains multiple arrays) to
    represent every restaurant in your restaurant data. Save this as variable
    "restaurantData".

    ## Task 2: Process Data

    Create a marker for each element in "restaurantData". Your final code should
    only include "L.marker" one time.

    ## Task 3: Add Two Additional Markers

    Add two additional restaurants to your data. You should only need to modify
    "restaurantData" to do this. Confirm that these new markers are added to
    your application.

    ## Task 4: Add Popups to Markers

    Add popups to your markers. The popup should contain the label for your
    restaurant. Refer to the Leaflet documentation for instructions on adding
    a popup: http://leafletjs.com/reference.html#popup

    ===================== */

    var map = L.map('map', {
      center: [40.023341, -75.321082],
      zoom: 12
    });

    var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
      attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      subdomains: 'abcd',
      minZoom: 0,
      maxZoom: 20,
      ext: 'png'
    }).addTo(map);

    /* =====================

    Start code

    ===================== */

    let restaurantData = [[40.002452, -75.274564, "Restaurant 1"], [40.023341, -75.321082, "Restaurant 2"], [40.083424, -75.405699, "Restaurant 3"]];

    let addMarker = (obj) => {return L.marker([obj[0], obj[1]]).bindPopup(obj[2]).addTo(map)};

    /*for(let i =0; i < restaurantData.length; i++) {
      addMarker(restaurantData[i]).addTo(map);
    }*/

    restaurantData.forEach(addMarker);


    /*restaurantData.forEach(addMarker().addTo(map));
    L.marker([0, 0]).addTo(map);
    L.marker([0, 0]).addTo(map);
    L.marker([0, 0]).addTo(map); */

    /* =====================

    End code

    ===================== */

    </script>
  </body>
</html>