landUseMb/index.html at master · sjf/landUseMb · 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>San Francisco Land Use</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.5.0/mapbox-gl.js'></script>
<script src='credentials.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<link href='map_style.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet" />
</head>
<body>

<div id='map'></div>
<div id='legend'>
  <div id="legent-title">San Francisco Land Use</div>
  <div class='legend-item'>
    <svg width="18" height="18"><rect fill="#fee08b" width="18" height="18" y="0"></rect></svg>
    Residential
  </div>
  <div class='legend-item'>
    <svg width="18" height="18"><rect fill="#fee08b" width="18" height="18" y="0"></rect></svg>
    Commerical
  </div>
  <div class='legend-item'>
    <svg width="18" height="18"><rect fill="#fee08b" width="18" height="18" y="0"></rect></svg>
    Industrial
  </div>
  <div class='legend-item'>
    <svg width="18" height="18"><rect fill="#fee08b" width="18" height="18" y="0"></rect></svg>
    Institutions
  </div>
  <div class='legend-item'>
    <svg width="18" height="18"><rect fill="#fee08b" width="18" height="18" y="0"></rect></svg>
    Residential
  </div>
</div>
<div id='info'>
</div>
<script>
  const LAYER_ID = 'landuse (1)';
  const EMPTY_GEOJSON = {'type': 'geojson', 'data': {'type': 'FeatureCollection', 'features': []}};
  mapboxgl.accessToken = ACCESS_TOKEN;

  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/sjf/ck2zmq40b06sz1co683zg2imx',
    center: [-122.40739, 37.78774],
    zoom: 14.65,
    hash: true,
  });
  map.on('load', function() {
    map.addControl(new mapboxgl.NavigationControl({showCompass: false}));
    map.on('click', function (e) {
      var bbox = [[e.point.x, e.point.y], [e.point.x + 1, e.point.y + 1]];
      var features = map.queryRenderedFeatures(bbox, {layers: [LAYER_ID]});
      for (var i = 0; i < features.length; i++) {
        console.log(features[i]);
        var geom = features[i].geometry;
        map.getSource('selected-src').setData(geom);
        var s = JSON.stringify(features[i].properties);
        document.getElementById('info').innerHTML = s;
      }
    });
    map.addSource('selected-src', EMPTY_GEOJSON);
    map.addLayer(
    {
      "id": "selected",
      "type": "line",
      "source": 'selected-src',
      "paint": {
        "line-color": "#ff0000",
        "line-opacity": 0.75,
        "line-width": 4,
      },
    });
  });
</script>

</body>
</html>