JoshuaCoady.github.io/Interactive map.html at master · JoshuaCoady/JoshuaCoady.github.io · 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
<!doctype html>
<html>
<head>
	<title>UNSW Code 1230</title>
<link rel="stylesheet" type="text/css" href="page2.css"/>
</head>
<body>
	<h1>Interactive Map</h1>
	<div style="position: relative">
                <p style="position:fixed; top:-13%; left:-16%; width:100%; text-align: center"> The below is an interactive map of the G18 data set and its depiction of where these individuals reside. The height represents the individual weekly income per person in each region and the colour represents the percentage of each region that requires assistance for a disability
            	</p>


<head>
    <meta charset='utf-8' />
    <title></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.40.0/mapbox-gl.js'></script>
    <script src='./data.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:fixed; top:31%; bottom:10%; left:-47%; width:130%; }
    </style>
</head>
<body>

<div id='map'>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9zaHVhY29hZHkiLCJhIjoiY2o2dm5kYzYwMHdtZjJ4dGJ6NnhmaGVwcCJ9.cCgcpNc6JagYHgK7NrhLRw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [151.7, -33.8],
    zoom: 10,
    pitch: 0,
    bearing: 0
});

map.on('load', function() {

    map.addLayer({
        'id': 'data',
        'type': 'fill-extrusion',
        'source': {
            // Geojson Data source used in vector tiles, documented at
            // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
            'type': 'geojson',
            'data': data
        },
        'paint': {
            // See the Mapbox Style Spec for details on property functions
            // https://www.mapbox.com/mapbox-gl-style-spec/#types-function
            'fill-extrusion-color': {
                // Get the fill-extrusion-color from the source 'color' property.
                'property': '16 Dis',
                'stops': [
                    [0, 'white'],
                    [1, 'blue']
                    ]
            },
            'fill-extrusion-height': {
                // Get fill-extrusion-height from the source 'height' property.
                'property': '16 Inc',
                'stops': [
                    [0, 0],
                    [2300, 1800]
                    ]
            },
            // Make extrusions slightly opaque for see through indoor walls.
            'fill-extrusion-opacity': 0.9
        }
    });
});
</script>

</body>

<a href="./Website%20script.html#">Home</a>
<br><br>
<a href="./Data_analysis.html">Back</a>

</body>
</html>