MUSA611-CPLN692-week2/assignment/index.html at master · jc020207/MUSA611-CPLN692-week2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
  <head>
    <!--stylesheet imports-->
    <link rel="stylesheet" href="leaflet.css" />
  </head>
  <body>
    <!--left panel-->
    <div style="position:fixed;left:0px;width:400px">
    </div>
    <!--map-->
    <div id="map" style="position:fixed;right:0px;left:400px;height:100%;">
    </div>

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

    <!--Your code starts here-->
    <script>
      var map = L.map('map', {
        center: [39.9522, -75.1639],
        zoom: 14
      });
      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);
    </script>
    <script>
      /* =====================

      # Week 2 - Assignment

      ## Introduction

       This week's assignment as having two separate parts:

       1. Log a series of arrays to the console that represents the health_centers dataset
       in array form. For example, [{'first': 1, 'second': 44}, {'first': 2, 'second': 12}]
       becomes [['first','second'],[1, 44],[2, 12]]. (Hint: Review Lab2, part4 which
       deals with a similar issue)

       2. Put a marker on the map for each health center in the specified lat/lng coordinates
       with a popup (a simple text dialog) that shows that location's name when its marker is clicked.

       3. All and only markers found within the zip code range from 19140 to 19149 should appear.
       Filter out the entries not in the range 19140-19149

       Stretch goal: Some of these locations offer dental services as well. Find a way to
       give dental locations a different icon (you pick the icon). Here's some relevant documentation:
       http://leafletjs.com/reference.html#icon

       Remember: functions are meant to facilitate code comprehension and reuse. Try
       your best to use them to organize your code.
      ===================== */


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

      Start code

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

// Step 1
      var jsonToCsv = function(json) { console.log(json); };
      var addMarkers = function(map) {};

      let healthArray=[];
      for (let i=0; i<healthCenters.length;i++){
        if (i===0){healthArray.push(Object.keys(healthCenters[i]))}
        else{}
          healthArray.push(Object.values(healthCenters[i]))
      }

// Step 2 This part of code has been comment out because duplicated marker will be shown from step 3
//      for (let j=1;j<healthArray.length;j=j+1){
//          L.marker([healthArray[j][1],healthArray[j][0]]).addTo(map).bindPopup(healthArray[j][3])
//        }

// Step 3
let filtarray = []

      for (let y=1; y<healthArray.length;y++){
       filtarray = healthArray.filter(eachr=>{
        return eachr[5]>=19140 && eachr[5]<=19149;
      });
    }

console.log(filtarray);


    for (let u=1; u<filtarray.length;u++){
        L.marker([filtarray[u][1],filtarray[u][0]]).addTo(map).bindPopup(filtarray[u][3])
      }

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

      End code

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


      // `healthCenters` is defined in health_centers.js
      jsonToCsv(healthCenters);
      jsonToCsv(healthArray);
      addMarkers(map);
    </script>
    <!--Your code ends here-->
  </body>
</html>