pmr-batiments/index.html at main · maphouse/pmr-batiments · 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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />

        <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
        <script src="layers/layers.js"></script>
        <script src="layers/Annedeconstruction_1.js"></script>

        <style>
            html, body {
                background-color: #ffffff;
                margin: 0 !important;
            }

            #legend {
                position: absolute;
                top: 20px;
                right: 20px;
                background: white;
                padding: 10px;
                border: 1px solid #ddd;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                font-size: 14px;
                z-index: 1000;
                max-width: 300px;
            }

            #legend h4 {
                margin: 0 0 10px;
                font-size: 16px;
            }

            #legend ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            #legend li {
                display: flex;
                align-items: center;
                margin-bottom: 5px;
            }

            #legend li span {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 10px;
                border: 1px solid #ddd;
            }

            #legend label {
                margin-top: 10px;
                display: flex;
                align-items: center;
            }

            #map {
                width: 100%;
                height: 100%;
            }

            .maplibregl-popup-content{
                width:300px;
            }

        </style>

        <title>Plateau-Mont-Royal (Montréal)</title>
    </head>
    <body>
        <div id="map">
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>

            <div id="legend">
                <h4>Unités d'évaluation foncière</h4>
                <ul>
                    <li><span style="background-color: rgba(122,4,3,1.0);"></span> ≤ 1865</li>
                    <li><span style="background-color: rgba(217,56,7,1.0);"></span> 1866 - 1879</li>
                    <li><span style="background-color: rgba(254,153,44,1.0);"></span> 1880 - 1899</li>
                    <li><span style="background-color: rgba(211,232,53,1.0);"></span> 1900 - 1917</li>
                    <li><span style="background-color: rgba(100,253,106,1.0);"></span> 1918 - 1934</li>
                    <li><span style="background-color: rgba(27,208,213,1.0);"></span> 1935 - 1943</li>
                    <li><span style="background-color: rgba(71,119,239,1.0);"></span> 1944 - 1959</li>
                    <li><span style="background-color: rgba(193,193,193,1.0);"></span> 1960 - 2024</li>
                </ul>
            </div>
        </div>

        <script>
            // Create map obj
            const map_layer = new MapLayer('map', '100vh', '100vw');

            // Init map
            map_layer.init_map([-73.59009083488046,45.523196760664874], 15);

            // Load batiment layer
            map_layer.map.on('load', () => {
                map_layer.add_building_layer('multipolygon-source', 'multipolygon-layer', json_Annedeconstruction_1);
            });

        </script>
    </body>
</html>