Discussion :

[arverne63]

Bonjour,
J'ai inséré une carte à l'aide de Leaflet , de l'extension Geoportail et du plugin Leaflet.Elevation dans un site de tests. D’origine le profil d’élévation ce superpose à la carte, je souhaite que le profil s’affiche en dessous de la carte. Je me suis inspiré de cet exemple pour cela. https://github.com/MrMufflon/Leaflet.Elevation/issues/7.
Cependant si le profil s’affiche bien en dessous de la carte et que le marqueur vert suis bien le tracé gpx quand on l'utilise et que l’on fait balader la souris sur le profil altimétrique, le profil ainsi que les axes x et y et les chiffres sont de couleur noir, alors que le profil s’affiche bien avec les bonnes couleurs quand il est supperposé à la carte.

Un exemple de page du site : http://testrandos.free.fr/IGN-Leafle..._Carte_IGN.php

Fichier de la carte : Profil_Randos_Carte_IGN.php

Si quelqu’un a une solution, je le remercie par avance.
Jean Marc.

[lowzonenose]

Et pourquoi ne pas utiliser l'extension 'profil altimétrique' sous Leaflet ?
Ex. avec lib D3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script src="./{pathToLib}/d3.v3.min.js"></script>
<script src="./{pathToLib}/GpPluginLeaflet.js"></script>
(...)
var wms = L.geoportalLayer.WMS({
  layer : "ORTHOIMAGERY.ORTHOPHOTOS",
});

var map  = L.map('map', {
  zoom : 2,
  center : L.latLng(48, 2)
});

var elevation = new L.geoportalControl.ElevationPath({
   active : true,
   displayProfileOptions : {
     apply : L.geoportalControl.ElevationPath.DISPLAY_PROFILE_LIB_D3,
     target : null,
     meanSlope : true,
     greaterSlope : true,
     ascendingElevation : true,
     descendingElevation : true,
     currentSlope : true // par defaut
 }
 });

Exemple :


Ex. avec lib AmChart

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script src="./{pathToLib}/amCharts-min.js"></script>
<script src="./{pathToLib}/GpPluginLeaflet.js"></script>
(...)
var wms = L.geoportalLayer.WMS({
  layer : "ORTHOIMAGERY.ORTHOPHOTOS",
});

var map  = L.map('map', {
  zoom : 2,
  center : L.latLng(48, 2)
});

var elevation = new L.geoportalControl.ElevationPath({
   active : true,
   displayProfileOptions : {
     apply : L.geoportalControl.ElevationPath.DISPLAY_PROFILE_LIB_AMCHARTS,
     target : null,
     meanSlope : true,
     greaterSlope : true,
     ascendingElevation : true,
     descendingElevation : true,
     currentSlope : true // par defaut
 }
 });

Exemple :