mjrlab2.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Hospitals and Lifelabs in City of Vanouver </title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 70%;
      height: 90%
    }

    .Instructions {
      position: absolute;
      font-family: sans-serif;
      margin-top: 40px;
      margin-left: 5px;
      padding: 5px;
      width: 30%;
      height: 40% border: 2px solid black;
      font-size: 13px;
      color: #222;
      background-color: #fff;
      border-radius: 3px;
    }
  </style>
</head>

<body>
  <style>
    .distance-container {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }

    .distance-container>* {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 11px;
      line-height: 18px;
      display: block;
      margin: 0;
      padding: 5px 10px;
      border-radius: 3px;
    }
  </style>

  <div id="map"></div>
  <div id="distance" class="distance-container"></div>
  <script src="https://npmcdn.com/@turf/turf@5.1.6/turf.min.js"></script>

  <div class='Instructions'>
    <div><strong>instructions: You can click the Lifelabs icon and the nearest hospital will be displayed on the map. At the same time, the cursor becomes a crosshair on the map. After clicking on the map, a black dot will appear on the map, and you can click on the next point on the map to create a line that measures distance. The distance will show on the top left corner. This way, you can click on one of the life labs you are interested in, then connect it to the nearest hospital and see the distance between them. As you continue to click and draw points on this map, the distance measurement feature also applicable for multiple points and lines.If you want to redo the distance measurement, just click each point you clicked earlier, or simply refresh the site.</strong> <span id='mag'></span></div>
  </div>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoianJtYSIsImEiOiJjazdrNDl0MmwwM3B6M2VtcjNhNDlvaWdqIn0._Q1MfouBwOZywgucwxn-ew';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/jrma/ck7k75grz5gjd1ik64rc45yrj',
      center: [-123.15520, 49.25737],
      zoom: 11
    });

    var hospitals = {
      type: 'FeatureCollection',
      features: [{
          type: 'Feature',
          properties: {
            Name: 'Urgent Care Centre and Sleep Disorders program -- UBC Hospital',
            Address: '2211 Wesbrook Mall'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.245833, 49.264167]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'B.C. Women" Hospital & Health Centre',
            Address: '4500 Oak St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1242, 49.24417]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'BC Cancer Agency',
            Address: '600 W 10th Ave'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1175, 49.2622222]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'British Columbia" Children Hospital',
            Address: '4480 Oak St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1255556, 49.24444]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Mount Saint Joseph Hospital',
            Address: '3080 Prince Edward St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.0952778, 49.2577778]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'St. Paul"s Hospital',
            Address: '1081 Burrard St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1280556, 49.2805556]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'St. Vincent"s Hospitals Langara',
            Address: '255 W 62nd Ave'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.110833, 49.214722]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Sunny Hill Health Centre for Children',
            Address: '3644 Slocan St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.048333, 49.251944]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Vancouver General Hospital',
            Address: '899 W 12th Ave'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.123056, 49.261111]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Burnaby General Hospital',
            Address: '83935 Kincaid St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.015, 49.249444]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Riverview Hospital',
            Address: '2601 Lougheed Hwy'
          },
          geometry: {
            type: 'Point',
            coordinates: [-122.805556, 49.246667]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Delta Hospital',
            Address: '5800 Mountain View Blvd'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.061111, 49.085556]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Langley Memorial Hospital',
            Address: '22051 Fraser Hwy'
          },
          geometry: {
            type: 'Point',
            coordinates: [-122.611944, 49.093611]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Ridge Meadows Hospital & Health Care Centre',
            Address: '11666 Laity St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-122.629167, 49.215556]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Royal Columbian Hospital',
            Address: '330 E Columbia St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-122.890278, 49.226389]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lions Gate Hospital',
            Address: '231 15th St E'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.068333, 49.320833]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Eagle Ridge Hospital',
            Address: '475 Guildford Way'
          },
          geometry: {
            type: 'Point',
            coordinates: [-122.823333, 49.285]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Richmond Hospital',
            Address: '7000 Westminster Hwy'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.146667, 49.168889]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Surrey Memorial Hospital',
            Address: '13750 96 Ave'
          },
          geometry: {
            type: 'Point',
            coordinates: [-122.841667, 49.176111]
          }
        }
      ]
    };

    var lifelabs = libraries;
    var libraries = {
      type: 'FeatureCollection',
      features: [{
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Georgia PSC',
            Address: '777 Hornby St Suite 835'
          },
          geometry: {
            type: 'Point',
            coordinates: [-12.9929884, 49.2256683]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs City Centre PSC',
            Address: '1160 Burrard Street'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1282851, 49.2799313]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Main & Keefer PSC',
            Address: '180 Keefer St Suite 204'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1008075, 49.2792620]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs East Hastings PSC',
            Address: '1506 E. Hastings Street'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.0738220, 49.2811137]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Yaletown PSC',
            Address: '136 Davie Street'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1209565, 49.2731619]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Regent PSC',
            Address: '2184 W. Broadway Suite 290'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1549301, 49.2637159]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Fairmont PSC',
            Address: '750 W. Broadway Suite 701'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1211853, 49.2630228]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Commercial Drive PSC',
            Address: '1750 E. 10th Avenue Suite 306'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.0685697, 49.2612137]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs King Edward PSC',
            Address: '972 West King Edward Avenue'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1256585, 49.2484025]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Woodridge PSC',
            Address: '650 W. 41st Ave Suite 215'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1186831, 49.2320524]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Victoria Drive PSC',
            Address: '5786 Victoria Dr'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.0653900, 49.2315622]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Southill PSC',
            Address: '6540 Fraser St'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.0903157, 49.2251213]
          }
        },
        {
          type: 'Feature',
          properties: {
            Name: 'Lifelabs Sunset PSC',
            Address: '8207 Ontario Street'
          },
          geometry: {
            type: 'Point',
            coordinates: [-123.1071959, 49.2103893]
          }
        },
      ]
    };


    map.on('load', function() {
      map.addLayer({
        id: 'hospitals',
        type: 'symbol',
        source: {
          type: 'geojson',
          data: hospitals
        },
        layout: {
          'icon-image': 'hospital-15',
          'icon-allow-overlap': true
        },
        paint: {}
      });


      map.addLayer({
        id: 'libraries',
        type: 'symbol',
        source: {
          type: 'geojson',
          data: libraries
        },
        layout: {
          'icon-image': 'library-15'
        },
        paint: {}
      });

      map.addSource('nearest-hospital', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: []
        }
      });
    });

    var popup = new mapboxgl.Popup();

    map.on('mousemove', function(e) {

      var features = map.queryRenderedFeatures(e.point, {
        layers: ['hospitals', 'libraries']
      });
      if (!features.length) {
        popup.remove();
        return;
      }

      var feature = features[0];

      popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.Name)
        .addTo(map);

      map.getCanvas().style.cursor = features.length ? 'pointer' : '';

    });

    map.on('click', function(e) {
      var libraryFeatures = map.queryRenderedFeatures(e.point, {
        layers: ['libraries']
      });
      if (!libraryFeatures.length) {
        return;
      }

      var libraryFeature = libraryFeatures[0];

      var nearestHospital = turf.nearest(libraryFeature, hospitals);

      if (nearestHospital !== null) {

        map.getSource('nearest-hospital').setData({
          type: 'FeatureCollection',
          features: [nearestHospital]
        });

        map.addLayer({
          id: 'nearest-hospital',
          type: 'circle',
          source: 'nearest-hospital',
          paint: {
            'circle-radius': 12,
            'circle-color': '#486DE0'
          }
        }, 'hospitals');
      }
    });

    var distanceContainer = document.getElementById('distance');

    // GeoJSON object to hold our measurement features
    var geojson = {
      'type': 'FeatureCollection',
      'features': []
    };

    // Used to draw a line between points
    var linestring = {
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': []
      }
    };

    map.on('load', function() {
      map.addSource('geojson', {
        'type': 'geojson',
        'data': geojson
      });

      // Add styles to the map
      map.addLayer({
        id: 'measure-points',
        type: 'circle',
        source: 'geojson',
        paint: {
          'circle-radius': 5,
          'circle-color': '#000'
        },
        filter: ['in', '$type', 'Point']
      });
      map.addLayer({
        id: 'measure-lines',
        type: 'line',
        source: 'geojson',
        layout: {
          'line-cap': 'round',
          'line-join': 'round'
        },
        paint: {
          'line-color': '#000',
          'line-width': 2.5
        },
        filter: ['in', '$type', 'LineString']
      });

      map.on('click', function(e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['measure-points']
        });

        // Remove the linestring from the group
        // So we can redraw it based on the points collection
        if (geojson.features.length > 1) geojson.features.pop();

        // Clear the Distance container to populate it with a new value
        distanceContainer.innerHTML = '';

        // If a feature was clicked, remove it from the map
        if (features.length) {
          var id = features[0].properties.id;
          geojson.features = geojson.features.filter(function(point) {
            return point.properties.id !== id;
          });
        } else {
          var point = {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': [e.lngLat.lng, e.lngLat.lat]
            },
            'properties': {
              'id': String(new Date().getTime())
            }
          };

          geojson.features.push(point);
        }

        if (geojson.features.length > 1) {
          linestring.geometry.coordinates = geojson.features.map(function(
            point
          ) {
            return point.geometry.coordinates;
          });

          geojson.features.push(linestring);

          // Populate the distanceContainer with total distance
          var value = document.createElement('pre');
          value.textContent =
            'Total distance: ' +
            turf.length(linestring).toLocaleString() +
            'km';
          distanceContainer.appendChild(value);
        }

        map.getSource('geojson').setData(geojson);
      });
    });

    map.on('mousemove', function(e) {
      var features = map.queryRenderedFeatures(e.point, {
        layers: ['measure-points']
      });
      // UI indicator for clicking/hovering a point on the map
      map.getCanvas().style.cursor = features.length ?
        'pointer' :
        'crosshair';
    });
  </script>

</body>

</html>