grass-mapbox-tutorial/demo.html at master · ThomWorm/grass-mapbox-tutorial · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>GRASS Animate Simulation</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<!-- Loads data from data_file.js -->
<script src="images/data_file.js"></script>

<script>
    //Sets up the map
    mapboxgl.accessToken = 'pk.eyJ1IjoiY3R3aGl0ZSIsImEiOiItb0dqdUlZIn0.4Zb1DGESXnx0ePxMVLihZQ';
    var map = new mapboxgl.Map({
        container: 'map',
        zoom: 12,
        center: [-78.6319,35.7099],
        pitch: 45,
        style: 'mapbox://styles/mapbox/satellite-v9'
    });

    //Add Navigation Controls
    map.addControl(new mapboxgl.NavigationControl());

    //The total numbers of images found in data_file.js
    var frameCount = layerInfos.length;
    //Default used to start animation with first image
    var currentImage = 0;

    //Gets the current image
    function getPath() {
        return "images/" + layerInfos[currentImage].file;
    }

    //Convert Bounds to match mapbox gl source specs
    function grassBbox(bounds) {
        return [
            [bounds[1][1], bounds[1][0]],
            [bounds[0][1], bounds[1][0]],
            [bounds[0][1], bounds[0][0]],
            [bounds[1][1], bounds[0][0]]
        ];
    }

    //We need to wait for the map to load before we add the raster layer
    map.on('load', function() {

        //Create a new map source with the bounding box and url to your raster data.
        map.addSource("grass", {
            type: "image",
            //Replace static file with function
            url: getPath(),
            //Gets the bounds of the first image listed in images/data_file.js
            coordinates: grassBbox(layerInfos[0].bounds)
        });

        //Now add a new layer to the map from the source you created
        map.addLayer({
            id: "grass-layer",
            "type": "raster",
            "source": "grass",
            "paint": {
                "raster-fade-duration": 0
            }
        });

        //Will update image every 200ms
        setInterval(function() {
            currentImage = (currentImage + 1) % frameCount;
            map.getSource("grass").updateImage({ url: getPath() });
        }, 200);

        //Optional Add 3d Buildings so that they are visible above flooding
        if (! map.getSource('composite')) {map.addSource('composite', { type: 'vector', url: 'mapbox://mapbox.mapbox-streets-v7'});}

        var layers = map.getStyle().layers;

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
            }
        }


        //Add 3d Buildings layer
        map.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 14,
            'paint': {
                'fill-extrusion-color': '#aaa',
                // use an 'interpolate' expression to add a smooth transition effect to the
                // buildings as the user zooms in
                'fill-extrusion-height': [
                    "interpolate", ["linear"], ["zoom"],
                    14, 0,
                    14.05, ["get", "height"]
                ],
                'fill-extrusion-base': [
                    "interpolate", ["linear"], ["zoom"],
                    14, 0,
                    14.05, ["get", "min_height"]
                ],
                'fill-extrusion-opacity': 0.8
                }
            }, labelLayerId);

    });


</script>

</body>
</html>