Integration with Bootstrap framework (v3.3.7)
gemblev opened this issue · 2 comments
gemblev commented
Subject of the issue
KO: when I include the bootstrap framework with <link rel="stylesheet" href="../Bootstrap/v3.3.7/css/bootstrap.min.css"> the cursor on the elevation graphic does not work 👉 https://www.tyrando.fr/Elevation/test_not_ok.php
OK: when I not include the bootstrap framework with <link rel="stylesheet" href="../Bootstrap/v3.3.7/css/bootstrap.min.css"> the cursor on the elevation graphic is ok 👉 https://www.tyrando.fr/Elevation/test_ok.php
Your environment
- leaflet-elevation: 2.5.0 (the latest)
- leaflet: 1.7.1
- browser: firefox 115.0.3
- operating system: windows 7
Steps to reproduce
<!DOCTYPE html>
<html>
<head>
<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>
<!-- bootstrap css -->
<link rel="stylesheet" href="../Bootstrap/v3.3.7/css/bootstrap.min.css">
<!-- Library Leaflet -->
<link rel="stylesheet" href="../Leaflet/1-7-1/dist/leaflet.css" />
<script type="text/javascript" src="../Leaflet/1-7-1/dist/leaflet.js"></script>
<!-- leaflet-ui -->
<link rel="stylesheet" href="../Leaflet/Plugins/Leaflet-ui/v0.3.0/dist/leaflet-ui.css"/>
<script type="text/javascript" src="../Leaflet/Plugins/Leaflet-ui/v0.3.0/dist/leaflet-ui.js"></script>
<!-- leaflet-elevation -->
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
<script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>
<style>
.elevation-waypoint-icon.etape_1::before {
background-image: url('bulle1.png')
}
.elevation-waypoint-icon.etape_2::before {
background-image: url('bulle2.png')
}
.elevation-waypoint-icon.etape_3::before {
background-image: url('bulle3.png')
}
.elevation-waypoint-icon.etape_4::before {
background-image: url('bulle4.png')
}
.elevation-waypoint-icon.etape_5::before {
background-image: url('bulle5.png')
}
.elevation-waypoint-icon.etape_6::before {
background-image: url('bulle6.png')
}
.elevation-waypoint-icon.etape_7::before {
background-image: url('bulle7.png')
}
.elevation-waypoint-icon.etape_8::before {
background-image: url('bulle8.png')
}
.elevation-waypoint-icon.etape_9::before {
background-image: url('bulle9.png')
}
.elevation-waypoint-icon.etape_10::before {
background-image: url('bulle10.png')
}
.elevation-waypoint-icon.etape_11::before {
background-image: url('bulle11.png')
}
.elevation-waypoint-icon.etape_12::before {
background-image: url('bulle12.png')
}
.elevation-waypoint-icon.etape_13::before {
background-image: url('bulle13.png')
}
.elevation-waypoint-icon.etape_14::before {
background-image: url('bulle14.png')
}
.elevation-waypoint-icon.etape_15::before {
background-image: url('bulle15.png')
}
.elevation-waypoint-icon.etape_16::before {
background-image: url('bulle16.png')
}
.elevation-waypoint-icon.etape_17::before {
background-image: url('bulle17.png')
}
.elevation-waypoint-icon.etape_18::before {
background-image: url('bulle18.png')
}
.elevation-waypoint-icon.etape_19::before {
background-image: url('bulle19.png')
}
.elevation-waypoint-icon.etape_20::before {
background-image: url('bulle20.png')
}
</style>
</head>
<body>
<div id="map" class="leaflet-map"></div>
<script>
var couches = {};
var overlays = {};
function layerUrl(key, layer) {
return "https://wxs.ign.fr/" + key
+ "/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&"
+ "LAYER=" + layer + "&STYLE=normal&TILEMATRIXSET=PM&"
+ "TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg";
}
// la couche IGN carte top25
couches['IGN SCAN 25'] = L.tileLayer(
layerUrl(
"29tg7m0cs6qe1qdbgizthh2j", "GEOGRAPHICALGRIDSYSTEMS.MAPS"
),
{attribution: '© <a href="http://www.ign.fr/">IGN</a>'}
);
// la couche OpenTopoMap
couches['Open Topo Map'] = L.tileLayer(
'//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
{attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'}
);
// La couche Photographies aériennes
couches['IGN Photos aeriennes'] = L.tileLayer('https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?'+
'&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM'+
'&LAYER={ignLayer}&STYLE={style}&FORMAT={format}'+
'&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}',
{
ignApiKey: 'pratique',
ignLayer: 'ORTHOIMAGERY.ORTHOPHOTOS',
style: 'normal',
format: 'image/jpeg',
service: 'WMTS'
});
// instanciation de map
var map = L.map('map', {
// les cartes
layers: [couches['IGN SCAN 25']],
center: [47.88, -3.582],
//zoom: 10,
mapTypeId: 'IGN SCAN 25',
mapTypeIds: ['IGN SCAN 25', 'Open Topo Map', 'IGN Photos aeriennes'],
mapTypes: undefined,
// les gestionnaires
printControl: false,
minimapControl: false,
searchControl: {querylang: 'FR', },
locateControl: true,
layersControl: false,
fullscreenControl: {
title: 'Mode plein ecran',
position: 'bottomright',
title: 'Plein ecran',
titleCancel: 'Sortie Plein ecran',
forceSeparateButton: true,
},
resizerControl: true,
scaleControl: {
width: 200,
position: 'bottomleft',
imperial: false,
},
pegmanControl: false,
rotateControl: {closeOnZeroBearing: true},
loadingControl: {
separate: true,
position: 'bottomright'
},
gestureHandling: false,
preferCanvas: false,
rotate: true,
});
// Ajout d un controle pour le choix des couches
L.control.layers(couches,overlays,{position: 'bottomright'}).addTo(map);
// graphique altitude
var elevation_options = {
position: 'bottomright',
theme: "lightblue-theme",
//theme: "custom-theme",
detached: false,
collapsed: true,
autohide: false,
legend: false,
downloadLink: true,
almostOver: true,
edgeScale: false,
distanceMarkers: { lazy: true, distance: true, direction: true }
};
// Instanciation du controle altitude
var controlElevation = L.control.elevation(elevation_options);
controlElevation.addTo(map);
// chargement de la trace .gpx
controlElevation.load("le_sentier_aux__17_passerelles.gpx");
</script>
</body>
</html>var map = new L.Map('map');
var controlElevation = L.control.elevation(options).addTo(map);
controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");Thank you
gemblev commented
Hi M. Raruto,
The bootstrap framework works now with the elevation plugin since I added the following style:
.elevation-control .tooltip {
opacity: 1;
}
.elevation-control .mouse-focus-line[x1="0"],
.elevation-control .mouse-focus-line[x1="0"] ~ * {
display: none;
}See: #175 (comment).
Thank you
michael067 commented
Merci Gemblev, j'ai pu dépanner nom site grâce à toi :-)
Thanks Raruto for your works on leaflet-ui, Elevation....