FoundationOfSmartIrrigation/Micro-Irrigation-Design-elevTemp.html at main · irripro/FoundationOfSmartIrrigation · 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
<!DOCTYPE html>
<html>

<head>
	<title>leaflet-elevation.js</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="dns-prefetch" href="https://tile.openstreetmap.org">
	<link rel="dns-prefetch preconnect" href="https://unpkg.com" />
	<link rel="preload" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" as="script">
	<link rel="preload" href="https://unpkg.com/leaflet-ui@0.6.0/dist/leaflet-ui.js" as="script">

	<style>@import '../libs/fullpage.css';</style>

	<!-- leaflet-ui -->
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	<script src="https://unpkg.com/leaflet-ui@0.6.0/dist/leaflet-ui.js"></script>

	<!-- leaflet-elevation -->
	<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.5.1/dist/leaflet-elevation.min.css" />
	<script src="https://unpkg.com/@raruto/leaflet-elevation@2.5.1/dist/leaflet-elevation.min.js"></script>
</head>

<body>

	<div id="map" class="leaflet-map"></div>

	<script>
		let opts = {
			map: {
				mapTypeId: 'satellite',
				center: [53.0892, 45.1836],
				zoom: 6,
				fullscreenControl: false,
				resizerControl: true,
				rotate: true,
				bearing: 170,
				rotateControl: {
				closeOnZeroBearing: true
				},
			},
			elevationControl: {
				url: "https://raruto.github.io/leaflet-elevation/examples/atemp.gpx",
				options: {
					theme: "lightblue-theme",
					collapsed: false,
					detached: true,
					summary: "inline",
					temperature: true,
					hotline: 'temperature',
					handlers: [
						'Altitude',   // same as: import('../src/handlers/altitude.js')
						'Distance',   // same as: import('../src/handlers/distance.js')
						'Temperature' // same as: import('../src/handlers/temperature.js')
					],
					// imperial: true,
					// temperatureFactor1: 1.8,
					// temperatureFactor2: 32,
					// temperatureRange: [-70, 70]
					// temperatureDeltaMax: 10,
				},
			},
			layersControl: {
				options: {
					collapsed: false,
				},
			},
		};

		let map = L.map('map', opts.map);
		let controlElevation = L.control.elevation(opts.elevationControl.options).addTo(map);
		let controlLayer = L.control.layers(null, null, opts.layersControl.options);

		controlElevation.on('eledata_loaded', ({layer, name}) => controlLayer.addTo(map) && layer.eachLayer((trkseg) => trkseg.feature.geometry.type != "Point" && controlLayer.addOverlay(trkseg, trkseg.feature && trkseg.feature.properties && trkseg.feature.properties.name || name)));

		controlElevation.load(opts.elevationControl.url);
	</script>

	<a href="https://github.com/Raruto/leaflet-elevation" class="view-on-github" style="position: fixed;top: 30px;left: calc(50% - 81px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github" width="163"> </a>

</body>

</html>