Create index.html

monum · Oct 19, 2023 · f551a35 · f551a35
1 parent 0751bc6
commit f551a35
Showing 1 changed file with 226 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,226 @@
+
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <title>Spooky Streets | Boston</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
+  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
+  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"/>
+  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" type="text/css">
+  <script src='https://npmcdn.com/csv2geojson@latest/csv2geojson.js'></script>
+  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+
+    .mapboxgl-popup {
+      padding-bottom: 5px;
+    }
+
+    .mapboxgl-popup-close-button {
+      display: none;
+    }
+
+    .mapboxgl-popup-content {
+      font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
+      padding: 0;
+      width: 250px;
+    }
+
+    .mapboxgl-popup-content-wrapper {
+      padding: 1%;
+    }
+
+    .mapboxgl-popup-content h3 {
+      /*background: rgb(27, 160, 96);*/
+      background: #871ba0;
+      text-align: center;
+      color: #fff;
+      margin: 0;
+      display: block;
+      padding: 15px;
+      font-weight: 700;
+      margin-top: -5px;
+    }
+
+    .mapboxgl-popup-content h4 {
+      margin: 0;
+      display: block;
+      padding: 10px 3px 10px 10px;
+      font-weight: 400;
+    }
+
+    .mapboxgl-container {
+      cursor: pointer;
+    }
+
+    .mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
+      margin-top: 3px;
+    }
+
+    .mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
+      border-bottom-color: rgb(27, 160, 96);
+    }
+
+    .mapboxgl-ctrl-geocoder {
+      width: 315px!important;
+    }
+
+    .marker {
+      background-image: url('icons8-pumpkin-48.png');
+      background-size: cover;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+  <div id='map'></div>
+  <script>
+    var locationData;
+
+    var transformRequest = (url, resourceType) => {
+      var isMapboxRequest =
+        url.slice(8, 22) === "api.mapbox.com" ||
+        url.slice(10, 26) === "tiles.mapbox.com";
+      return {
+        url: isMapboxRequest
+          ? url.replace("?", "?pluginName=sheetMapper&")
+          : url
+      };
+    };
+
+    function forwardGeocoder(query) {
+      var matchingFeatures = [];
+      for (var i = 0; i < locationData.features.length; i++) {
+        var feature = locationData.features[i];
+        if (feature.properties.Neighborhood.toLowerCase().search(query.toLowerCase()) !== -1) {
+          feature['place_name'] = `🌱 ${feature.properties.Name} in ${feature.properties.Neighborhood}`
+          feature['center'] = feature.geometry.coordinates;
+          feature['place_type'] = ['Community-Garden'];
+
+          matchingFeatures.push(feature);
+        }
+       }
+
+        return matchingFeatures;
+      };
+
+    mapboxgl.accessToken = 'pk.eyJ1IjoibmV3dXJiYW5tZWNocyIsImEiOiJjbG54a2I1anYwaDNpMmltazBhNjFmMTZlIn0.LMwTo9mgHziYKD6oLeOhdA';
+    var map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/newurbanmechs/clnvxuth2002g01pbfkai0whb',
+      center: [-71.0661, 42.3395],
+      zoom: 11,
+      hash: true,
+      attributionControl: false,
+      transformRequest: transformRequest
+    });
+
+    //map.showCollisionBoxes = true;
+
+    map.addControl(new mapboxgl.AttributionControl({
+      customAttribution: "Mayor's Office of New Urban Mechanics"
+    }));
+
+    map.scrollZoom.disable();
+
+    map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
+
+    $(document).ready(function () {
+      $.ajax({
+        type: "GET",
+        url: 'https://docs.google.com/spreadsheets/d/1peR8nwOPh8ZfJtA_aK9vfvoNPUQxprDLlkFskFA9vHs/gviz/tq?tqx=out:csv&sheet=Sheet2',
+        dataType: "text",
+        success: function (csvData) {
+          makeGeoJSON(csvData); 
+        }
+      });
+
+      function makeGeoJSON(csvData) {
+        csv2geojson.csv2geojson(csvData, {
+          latfield: 'Latitude',
+          lonfield: 'Longitude',
+          delimiter: ','
+        }, function (err, data) {
+          locationData = data;
+          map.on('load', function () {
+            map.loadImage('icons8-pumpkin-48.png', function(error, image) {
+              map.addImage('custom-marker', image);
+              map.addLayer({
+                'id': 'csvData',
+                'type': 'symbol',
+                'source': {
+                  'type': 'geojson',
+                  'data': data
+                },
+                'layout': {
+                  'icon-image': 'custom-marker'
+                }
+              });
+            })
+
+            map.on('click', 'csvData', function (e) {
+              var coordinates = e.features[0].geometry.coordinates.slice();
+
+              var description = '<h3>' + e.features[0].properties.Name + '</h3>' + '<h4>' + '<strong>' + 'Address: ' + '</strong>' + e.features[0].properties.Address + '</h4>';
+
+              // Ensure that if the map is zoomed out such that multiple
+              // copies of the feature are visible, the popup appears
+              // over the copy being pointed to.
+              while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+              }
+
+              new mapboxgl.Popup()
+                .setLngLat(coordinates)
+                .setHTML(description)
+                .addTo(map);
+            });
+
+            map.on('mouseenter', 'csvData', function () {
+              map.getCanvas().style.cursor = 'pointer';
+            });
+
+            map.on('mouseleave', 'places', function () {
+              map.getCanvas().style.cursor = '';
+            });
+
+            map.addControl(
+              new MapboxGeocoder({
+                accessToken: mapboxgl.accessToken,
+                mapboxgl: mapboxgl,
+                bbox: [-71.190336,42.240688,-70.985076,42.393463],
+                proximity: {
+                  longitude: -71.080463,
+                  latitude: 42.330631
+                },
+                localGeocoder: forwardGeocoder,
+                placeholder: 'Search by neighborhood or address'
+              }),'top-left'
+            );
+          });
+
+        });
+      };
+    });
+  </script>
+
+</body>
+
+</html>