codeup-web-exercises/mapbox_maps_api.html at main · lexibor/codeup-web-exercises · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Restaurantes en Monterrey</title>

    <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />

    <link rel='stylesheet' href="./css/stylesheet.css">
  <style>
      body
      {
          background-color: #444D5B;
      }

      #title
      {
          color: blanchedalmond;
      }

    #map {
      /* the width and height may be set to any size */
      width: 100%;
      flex-grow: 1;
    }
    header.container {
      border-bottom: 1px solid rgba(0, 0, 0, 0.78);
    }
    main.container, main.container>.row {
      padding: 0;
      flex-grow: 1;
    }
    aside.column {
      width: 300px;
      flex: none;
    }

  </style>


</head>
<body>
<div class="page-wrapper">
    <header class="container">
        <div class="row full-width">
            <div class="column" id="title">
                RESTAURANTES EN MONTERREY
            </div>
            <div class="column">

            </div>
        </div>
    </header>
    <main class="container">
        <div class="row full-width">
            <aside class="column">

            </aside>
            <div class="column">
                <div id='map'></div>
            </div>
        </div>
    </main>
</div>


<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<script src="./js/mapbox-geocoder-utils.js"></script>


<!---------- MAP OF MONTERREY SCRIPT ----------->


<script>

    mapboxgl.accessToken = 'pk.eyJ1IjoibGV4aWJvciIsImEiOiJjbGQ2bWE2bzMxZGJwM3lyeTh1czNzMGE3In0.tqgNGUXlJUn8N9qqHgOHVw'
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 10,
        style:'mapbox://styles/mapbox/navigation-night-v1',
        // center: [-98.4916, 29.4252]
        center: [-100.31663627832616, 25.687365864956593] //// 25.687365864956593, -100.31663627832616
    });

    // the  geocode method from mapbox-geocoder-utils.js
    geocode("Av Paseo de los Leones 2342-Sección C, Cumbres Elite 2do. Sector, 64610 Monterrey, N.L., Mexico", 'pk.eyJ1IjoibGV4aWJvciIsImEiOiJjbGQ2bWE2bzMxZGJwM3lyeTh1czNzMGE3In0.tqgNGUXlJUn8N9qqHgOHVw').then(function(result) {
      console.log(result);
      // map.setCenter(result);
      map.setZoom(12);
    });


    var restaurantes = [
        {
            address: "Av Paseo de los Leones 2342-Sección C, Cumbres Elite 2do. Sector, 64610 Monterrey, N.L., Mexico",
            popupHTML: "<p>Taqueria Regia</p>"
        },
        {
            address: "Muzquiz, Mitras Centro, 64460 Monterrey, N.L., Mexico",
            popupHTML: "<p>La Chueca</p>"
        },
        {
            address: "Pedro F. Quintanilla 6240, Monterrey, Nuevo León 64118",
            popupHTML: "<p>Tacos Don Javi</p>"
        }

    ]

    restaurantes.forEach(function(restaurante)
    {
        placeMarkerAndPopup(restaurante, 'pk.eyJ1IjoibGV4aWJvciIsImEiOiJjbGQ2bWE2bzMxZGJwM3lyeTh1czNzMGE3In0.tqgNGUXlJUn8N9qqHgOHVw', map);
    });


    // placeMarkerAndPopup(taqueriaRegiaInfo, 'pk.eyJ1IjoibGV4aWJvciIsImEiOiJjbGQ2bWE2bzMxZGJwM3lyeTh1czNzMGE3In0.tqgNGUXlJUn8N9qqHgOHVw', map);

    function placeMarkerAndPopup(info, token, map) {
        geocode(info.address, token).then(function(coordinates) {
            var popup = new mapboxgl.Popup()
                .setHTML(info.popupHTML);
            var marker = new mapboxgl.Marker()
                .setLngLat(coordinates)
                .addTo(map)
                .setPopup(popup);
            // popup.addTo(map); //COMMENTING THIS OUT MAKES THE POPUP NOT APPEAR UNTIL IT IS CLICKED
        });
    }


</script>


</body>
</html>