@raruto/leaflet-elevation 2.2.4 → 2.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +291 -285
  2. package/dist/leaflet-elevation.js +1307 -1307
  3. package/dist/leaflet-elevation.js.map +1 -1
  4. package/dist/leaflet-elevation.min.js +1 -1
  5. package/dist/leaflet-elevation.min.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/control.js +1312 -1312
  8. package/src/handlers/altitude.js +79 -79
  9. package/src/handlers/distance.js +46 -45
package/README.md CHANGED
@@ -1,285 +1,291 @@
1
- # leaflet-elevation.js
2
-
3
- [![NPM version](https://img.shields.io/npm/v/@raruto/leaflet-elevation.svg?color=red)](https://www.npmjs.com/package/@raruto/leaflet-elevation)
4
- [![License](https://img.shields.io/badge/license-GPL%203-blue.svg?style=flat)](LICENSE)
5
-
6
- A Leaflet plugin that allows to add elevation profiles using d3js
7
-
8
- <p align="center">
9
- <a href="https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html"><img src="https://raruto.github.io/img/leaflet-elevation.png" alt="Leaflet elevation viewer" /></a>
10
- </p>
11
-
12
- ---
13
-
14
- _For a working example see one of the following demos:_
15
-
16
- - [loading .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation.html)
17
- - [loading .geojson file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html)
18
- - [loading .kml file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_kml-data.html)
19
- - [loading .tcx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_tcx-data.html)
20
- - [loading a local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)
21
- - [loading data from a textarea](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)
22
- - [loading individual .geojson tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)
23
- - [loading individual .gpx tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)
24
- - [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
25
- - [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
26
- - [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
27
- - [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
28
- - [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
29
- - [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
30
- - [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
31
- - [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
32
-
33
-
34
- <br/>
35
-
36
- - [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
37
- - [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
38
- - [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
39
- - [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
40
- - [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
41
- - [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
42
- - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
43
- - [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
44
- - [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
45
-
46
- ---
47
-
48
- <blockquote>
49
- <p align="center">
50
- <em>Initially based on the <a href="http://mrmufflon.github.io/Leaflet.Elevation/">work</a> of <strong>Felix “MrMufflon” Bache</strong></em>
51
- </p>
52
- </blockquote>
53
-
54
- ---
55
-
56
- ## How to use
57
-
58
- 1. **include CSS & JavaScript**
59
- ```html
60
- <head>
61
- ...
62
- <style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div { height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>
63
-
64
- <!-- leaflet-ui -->
65
- <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
66
- <script src="https://unpkg.com/leaflet-ui@0.5.5/dist/leaflet-ui.js"></script>
67
-
68
- <!-- leaflet-elevation -->
69
- <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
70
- <script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>
71
- ...
72
- </head>
73
- ```
74
- 2. **choose the div container used for the slippy map**
75
- ```html
76
- <body>
77
- ...
78
- <div id="map"></div>
79
- ...
80
- </body>
81
- ```
82
- 3. **create your first simple “leaflet-elevation” slippy map**
83
- ```html
84
- <script>
85
- // Full list options at "leaflet-elevation.js"
86
- var elevation_options = {
87
-
88
- // Default chart colors: theme lime-theme, magenta-theme, ...
89
- theme: "lightblue-theme",
90
-
91
- // Chart container outside/inside map container
92
- detached: true,
93
-
94
- // if (detached), the elevation chart container
95
- elevationDiv: "#elevation-div",
96
-
97
- // if (!detached) autohide chart profile on chart mouseleave
98
- autohide: false,
99
-
100
- // if (!detached) initial state of chart profile control
101
- collapsed: false,
102
-
103
- // if (!detached) control position on one of map corners
104
- position: "topright",
105
-
106
- // Autoupdate map center on chart mouseover.
107
- followMarker: true,
108
-
109
- // Autoupdate map bounds on chart update.
110
- autofitBounds: true,
111
-
112
- // Chart distance/elevation units.
113
- imperial: false,
114
-
115
- // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
116
- reverseCoords: false,
117
-
118
- // Acceleration chart profile: true || "summary" || "disabled" || false
119
- acceleration: false,
120
-
121
- // Slope chart profile: true || "summary" || "disabled" || false
122
- slope: false,
123
-
124
- // Speed chart profile: true || "summary" || "disabled" || false
125
- speed: false,
126
-
127
- // Altitude chart profile: true || "summary" || "disabled" || false
128
- altitude: true,
129
-
130
- // Display time info: true || "summary" || false
131
- time: true,
132
-
133
- // Display distance info: true || "summary" || false
134
- distance: true,
135
-
136
- // Summary track info style: "inline" || "multiline" || false
137
- summary: 'multiline',
138
-
139
- // Download link: "link" || false || "modal"
140
- downloadLink: 'link',
141
-
142
- // Toggle chart ruler filter
143
- ruler: true,
144
-
145
- // Toggle chart legend filter
146
- legend: true,
147
-
148
- // Toggle "leaflet-almostover" integration
149
- almostOver: true,
150
-
151
- // Toggle "leaflet-distance-markers" integration
152
- distanceMarkers: false,
153
-
154
- // Display track datetimes: true || false
155
- timestamps: false,
156
-
157
- // Display track waypoints: true || "markers" || "dots" || false
158
- waypoints: true,
159
-
160
- // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
161
- wptIcons: {
162
- '': L.divIcon({
163
- className: 'elevation-waypoint-marker',
164
- html: '<i class="elevation-waypoint-icon"></i>',
165
- iconSize: [30, 30],
166
- iconAnchor: [8, 30],
167
- }),
168
- },
169
-
170
- // Toggle waypoint labels: true || "markers" || "dots" || false
171
- wptLabels: true,
172
-
173
- // Render chart profiles as Canvas or SVG Paths
174
- preferCanvas: true,
175
-
176
- };
177
-
178
- // Instantiate map (leaflet-ui).
179
- var map = L.map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });
180
-
181
- // Instantiate elevation control.
182
- var controlElevation = L.control.elevation(elevation_options).addTo(map);
183
-
184
- // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
185
- controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
186
-
187
- </script>
188
- ```
189
-
190
- ### Build Guide
191
-
192
- For those wishing to try cloning this repository into a local development folder (eg. /var/www):
193
-
194
- ```shell
195
- git clone git@github.com:Raruto/leaflet-elevation.git
196
- cd ./leaflet-elevation
197
-
198
- npm i # install dependencies
199
- npm run watch # auto-generate "dist" files
200
- npm run build # generate "dist" files (once)
201
- npm run test # test "spec" files (once)
202
- ```
203
-
204
- After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost/leaflet-elevation/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
205
-
206
- ### FAQ
207
-
208
- <details>
209
- <summary>1. How can I change the color of the elevation plot?</summary><br>
210
-
211
- There are multiple options to achieve this:
212
-
213
- * You could either use some default presets (see: theme: "lightblue-theme" option in readme file and the following file `leaflet-elevation.css` for some other default "*-theme" names).
214
- * check out [this example](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
215
- * Or add the following lines for custom colors.
216
- ```css
217
- .elevation-control .area {
218
- fill: red;
219
- }
220
- .elevation-control .background {
221
- background-color: white;
222
- ```
223
- </details>
224
-
225
- <details>
226
- <summary>2. How to enable/disable the leaflet user interface customizations?</summary><br>
227
-
228
- These customizations are actually part of the [leaflet-ui](https://github.com/Raruto/leaflet-ui) and can be toggled on/off using e.g. the following options:
229
- ```js
230
- var map = L.map('map', {
231
- center: [41.4583, 12.7059], // needs value to initialize
232
- zoom: 5, // needs value to initialize
233
- mapTypeId: 'topo',
234
- mapTypeIds: ['osm', 'terrain', 'satellite', 'topo'],
235
- gestureHandling: false, // zoom with Cmd + Scroll
236
- zoomControl: true, // plus minus buttons
237
- pegmanControl: false,
238
- locateControl: false,
239
- fullscreenControl: true,
240
- layersControl: true,
241
- minimapControl: false,
242
- editInOSMControl: false,
243
- loadingControl: false,
244
- searchControl: false,
245
- disableDefaultUI: false,
246
- printControl: false,
247
- });
248
- ```
249
- </details>
250
-
251
- <details>
252
- <summary>3. Some real world projects based on this plugin?</summary><br>
253
-
254
- - https://parcours.scasb.org/
255
- - https://velocat.ru/velo/phpBB3/map.php
256
- - https://plugins.qgis.org/plugins/track_profile_2_web/
257
- - https://wordpress.org/plugins/os-datahub-maps/
258
- - https://wordpress.org/plugins/extensions-leaflet-map/
259
- - https://github.com/der-stefan/OpenTopoMap
260
- - https://gpx.n-peloton.fr/
261
- - https://walkaholic.me/map
262
-
263
- </details>
264
-
265
- _Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Integration](https://github.com/faunalia/trackprofile2web)_
266
-
267
- ### Changelog
268
-
269
- All notable changes to this project are documented in the [releases](https://github.com/Raruto/leaflet-elevation/releases) page.
270
-
271
- ---
272
-
273
- **Compatibile with:**
274
- [![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.7.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)
275
- [![d3.js v6 compatibile!](https://img.shields.io/badge/d3.js-6.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/d3)
276
- [![@tmcw/togeojson v4.6.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.6-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
277
-
278
-
279
- ---
280
-
281
- **Contributors:** [MrMufflon](https://github.com/MrMufflon/Leaflet.Elevation), [HostedDinner](https://github.com/HostedDinner/Leaflet.Elevation), [ADoroszlai](http://ADoroszlai.github.io/joebed/), [Raruto](https://github.com/Raruto/leaflet-elevation)
282
-
283
- ---
284
-
285
- **License:** GPL-3.0+
1
+ # leaflet-elevation.js
2
+
3
+ [![NPM version](https://img.shields.io/npm/v/@raruto/leaflet-elevation.svg?color=red)](https://www.npmjs.com/package/@raruto/leaflet-elevation)
4
+ [![License](https://img.shields.io/badge/license-GPL%203-blue.svg?style=flat)](LICENSE)
5
+
6
+ A Leaflet plugin that allows to add elevation profiles using d3js
7
+
8
+ <p align="center">
9
+ <a href="https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html"><img src="https://raruto.github.io/img/leaflet-elevation.png" alt="Leaflet elevation viewer" /></a>
10
+ </p>
11
+
12
+ ---
13
+
14
+ _For a working example see one of the following demos:_
15
+
16
+ - [loading .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation.html)
17
+ - [loading .geojson file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html)
18
+ - [loading .kml file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_kml-data.html)
19
+ - [loading .tcx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_tcx-data.html)
20
+ - [loading a local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)
21
+ - [loading data from a textarea](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)
22
+ - [loading individual .geojson tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)
23
+ - [loading individual .gpx tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)
24
+ - [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
25
+ - [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
26
+ - [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
27
+ - [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
28
+ - [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
29
+ - [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
30
+ - [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
31
+ - [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
32
+
33
+
34
+ <br/>
35
+
36
+ - [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
37
+ - [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
38
+ - [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
39
+ - [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
40
+ - [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
41
+ - [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
42
+ - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
43
+ - [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
44
+ - [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
45
+
46
+ ---
47
+
48
+ <blockquote>
49
+ <p align="center">
50
+ <em>Initially based on the <a href="http://mrmufflon.github.io/Leaflet.Elevation/">work</a> of <strong>Felix “MrMufflon” Bache</strong></em>
51
+ </p>
52
+ </blockquote>
53
+
54
+ ---
55
+
56
+ ## How to use
57
+
58
+ 1. **include CSS & JavaScript**
59
+ ```html
60
+ <head>
61
+ ...
62
+ <style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div { height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>
63
+
64
+ <!-- leaflet-ui -->
65
+ <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
66
+ <script src="https://unpkg.com/leaflet-ui@0.5.6/dist/leaflet-ui.js"></script>
67
+
68
+ <!-- leaflet-elevation -->
69
+ <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
70
+ <script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>
71
+ ...
72
+ </head>
73
+ ```
74
+ 2. **choose the div container used for the slippy map**
75
+ ```html
76
+ <body>
77
+ ...
78
+ <div id="map"></div>
79
+ ...
80
+ </body>
81
+ ```
82
+ 3. **create your first simple “leaflet-elevation” slippy map**
83
+ ```html
84
+ <script>
85
+ // Full list options at "leaflet-elevation.js"
86
+ var elevation_options = {
87
+
88
+ // Default chart colors: theme lime-theme, magenta-theme, ...
89
+ theme: "lightblue-theme",
90
+
91
+ // Chart container outside/inside map container
92
+ detached: true,
93
+
94
+ // if (detached), the elevation chart container
95
+ elevationDiv: "#elevation-div",
96
+
97
+ // if (!detached) autohide chart profile on chart mouseleave
98
+ autohide: false,
99
+
100
+ // if (!detached) initial state of chart profile control
101
+ collapsed: false,
102
+
103
+ // if (!detached) control position on one of map corners
104
+ position: "topright",
105
+
106
+ // Toggle close icon visibility
107
+ closeBtn: true,
108
+
109
+ // Autoupdate map center on chart mouseover.
110
+ followMarker: true,
111
+
112
+ // Autoupdate map bounds on chart update.
113
+ autofitBounds: true,
114
+
115
+ // Chart distance/elevation units.
116
+ imperial: false,
117
+
118
+ // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
119
+ reverseCoords: false,
120
+
121
+ // Acceleration chart profile: true || "summary" || "disabled" || false
122
+ acceleration: false,
123
+
124
+ // Slope chart profile: true || "summary" || "disabled" || false
125
+ slope: false,
126
+
127
+ // Speed chart profile: true || "summary" || "disabled" || false
128
+ speed: false,
129
+
130
+ // Altitude chart profile: true || "summary" || "disabled" || false
131
+ altitude: true,
132
+
133
+ // Display time info: true || "summary" || false
134
+ time: true,
135
+
136
+ // Display distance info: true || "summary" || false
137
+ distance: true,
138
+
139
+ // Summary track info style: "inline" || "multiline" || false
140
+ summary: 'multiline',
141
+
142
+ // Download link: "link" || false || "modal"
143
+ downloadLink: 'link',
144
+
145
+ // Toggle chart ruler filter
146
+ ruler: true,
147
+
148
+ // Toggle chart legend filter
149
+ legend: true,
150
+
151
+ // Toggle "leaflet-almostover" integration
152
+ almostOver: true,
153
+
154
+ // Toggle "leaflet-distance-markers" integration
155
+ distanceMarkers: false,
156
+
157
+ // Toggle "leaflet-hotline" integration
158
+ hotline: true,
159
+
160
+ // Display track datetimes: true || false
161
+ timestamps: false,
162
+
163
+ // Display track waypoints: true || "markers" || "dots" || false
164
+ waypoints: true,
165
+
166
+ // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
167
+ wptIcons: {
168
+ '': L.divIcon({
169
+ className: 'elevation-waypoint-marker',
170
+ html: '<i class="elevation-waypoint-icon"></i>',
171
+ iconSize: [30, 30],
172
+ iconAnchor: [8, 30],
173
+ }),
174
+ },
175
+
176
+ // Toggle waypoint labels: true || "markers" || "dots" || false
177
+ wptLabels: true,
178
+
179
+ // Render chart profiles as Canvas or SVG Paths
180
+ preferCanvas: true,
181
+
182
+ };
183
+
184
+ // Instantiate map (leaflet-ui).
185
+ var map = L.map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });
186
+
187
+ // Instantiate elevation control.
188
+ var controlElevation = L.control.elevation(elevation_options).addTo(map);
189
+
190
+ // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
191
+ controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
192
+
193
+ </script>
194
+ ```
195
+
196
+ ### Build Guide
197
+
198
+ For those wishing to try cloning this repository into a local development folder (eg. /var/www):
199
+
200
+ ```shell
201
+ git clone git@github.com:Raruto/leaflet-elevation.git
202
+ cd ./leaflet-elevation
203
+
204
+ npm i # install dependencies
205
+ npm run watch # auto-generate "dist" files
206
+ npm run build # generate "dist" files (once)
207
+ npm run test # test "spec" files (once)
208
+ ```
209
+
210
+ After that you can start developing inside the `src` and `test` folders (eg. open "http://localhost/leaflet-elevation/test" in your browser to preview changes). Check also [CONTRIBUTING.md](.github/CONTRIBUTING.md) file for some information about it.
211
+
212
+ ### FAQ
213
+
214
+ <details>
215
+ <summary>1. How can I change the color of the elevation plot?</summary><br>
216
+
217
+ There are multiple options to achieve this:
218
+
219
+ * You could either use some default presets (see: theme: "lightblue-theme" option in readme file and the following file `leaflet-elevation.css` for some other default "*-theme" names).
220
+ * check out [this example](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
221
+ * Or add the following lines for custom colors.
222
+ ```css
223
+ .elevation-control .area {
224
+ fill: red;
225
+ }
226
+ .elevation-control .background {
227
+ background-color: white;
228
+ ```
229
+ </details>
230
+
231
+ <details>
232
+ <summary>2. How to enable/disable the leaflet user interface customizations?</summary><br>
233
+
234
+ These customizations are actually part of the [leaflet-ui](https://github.com/Raruto/leaflet-ui) and can be toggled on/off using e.g. the following options:
235
+ ```js
236
+ var map = L.map('map', {
237
+ center: [41.4583, 12.7059], // needs value to initialize
238
+ zoom: 5, // needs value to initialize
239
+ mapTypeId: 'topo',
240
+ mapTypeIds: ['osm', 'terrain', 'satellite', 'topo'],
241
+ gestureHandling: false, // zoom with Cmd + Scroll
242
+ zoomControl: true, // plus minus buttons
243
+ pegmanControl: false,
244
+ locateControl: false,
245
+ fullscreenControl: true,
246
+ layersControl: true,
247
+ minimapControl: false,
248
+ editInOSMControl: false,
249
+ loadingControl: false,
250
+ searchControl: false,
251
+ disableDefaultUI: false,
252
+ printControl: false,
253
+ });
254
+ ```
255
+ </details>
256
+
257
+ <details>
258
+ <summary>3. Some real world projects based on this plugin?</summary><br>
259
+
260
+ - https://parcours.scasb.org/
261
+ - https://velocat.ru/velo/phpBB3/map.php
262
+ - https://plugins.qgis.org/plugins/track_profile_2_web/
263
+ - https://wordpress.org/plugins/os-datahub-maps/
264
+ - https://wordpress.org/plugins/extensions-leaflet-map/
265
+ - https://github.com/der-stefan/OpenTopoMap
266
+ - https://gpx.n-peloton.fr/
267
+ - https://walkaholic.me/map
268
+
269
+ </details>
270
+
271
+ _Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Integration](https://github.com/faunalia/trackprofile2web)_
272
+
273
+ ### Changelog
274
+
275
+ All notable changes to this project are documented in the [releases](https://github.com/Raruto/leaflet-elevation/releases) page.
276
+
277
+ ---
278
+
279
+ **Compatibile with:**
280
+ [![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.7.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)
281
+ [![d3.js v6 compatibile!](https://img.shields.io/badge/d3.js-6.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/d3)
282
+ [![@tmcw/togeojson v4.6.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.6-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
283
+
284
+
285
+ ---
286
+
287
+ **Contributors:** [MrMufflon](https://github.com/MrMufflon/Leaflet.Elevation), [HostedDinner](https://github.com/HostedDinner/Leaflet.Elevation), [ADoroszlai](http://ADoroszlai.github.io/joebed/), [Raruto](https://github.com/Raruto/leaflet-elevation)
288
+
289
+ ---
290
+
291
+ **License:** GPL-3.0+