https://lively-selkie-b86b2c.netlify.app/

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset=utf-8 />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=dee067c8-7d9a-4a85-ada2-6545c657a0fc
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
9        <title>GeoCompare</title>
10        

10<script src='data.js'></script>

10
11        

11<script src='lib/leaflet/leaflet-src.js'></script>

11
12        

12<script src="lib/sideBySde.js"></script>

12
13        

13<script src="lib/L.Map.Sync.js"></script>

13
14        

14<script src="lib/fileSaver.js"></script>

14
15        

15<script defer src="lib/functions.js"></script>

15
16        <link href='lib/leaflet/leaflet.css' rel='stylesheet' />
17        <link href='lib/style.css' rel='stylesheet' />
18    </head>
19
20<body>
21    <div id='title'><span class='actu'>Actuel</span><span class='base'>futur</span></div>
22    <div id='map'></div>
23
24
25    

25<script>
26    var map = L.map('map').setView([-20, -50], 2);
27
28    var tiles = L.tileLayer("lib/tiles/actuel/{z}/{x}/{y}.png", {
29            minZoom: 2,
30            maxZoom: 4,
31            tms: true,
32            noWrap:true
33        }).addTo(map)
34
35    var tiles2 = L.tileLayer("lib/tiles/futur/{z}/{x}/{y}.png", {
36            minZoom: 2,
37            maxZoom: 4,
38            tms: true,
39            noWrap:true
40        }).addTo(map)
41
42    var divider = L.control.sideBySide(tiles, tiles2).addTo(map);
43    divider.on("dividermove", function(e){
44        var title = document.getElementById('title')
45        var x = e.x > 150 ? e.x : 150;
46
47        x = x < window.outerWidth -150 ? x : window.outerWidth -150;
48        title.children[0].style.width = (x-2) + 'px'
49        title.children[1].style.width = (window.outerWidth - x - 25) + 'px'
50    })
51    </script>

51
52</body>
53</html>