search

Raruto / leaflet-elevation

Leaflet plugin that allows to add elevation profiles using d3js
GNU General Public License v3.0
256 stars 85 forks source link

Integration with Bootstrap framework (v3.3.7) #264

Closed gemblev closed 1 year ago

gemblev commented 1 year ago

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

img

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

img

Your environment

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: '&copy; <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: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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 1 year ago

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: https://github.com/Raruto/leaflet-elevation/issues/175#issuecomment-1032985515.

Thank you

michael067 commented 9 months ago

Merci Gemblev, j'ai pu dépanner nom site grâce à toi :-)

Thanks Raruto for your works on leaflet-ui, Elevation....