2

I have this map: link

It was generated through Python code, not via JS directly. I want to add the Leaflet sidebar plugin within it, but it doesn't seem to work. As you can see in the github repo here, I followed the instructions, but the sidebar doesn't even seem to open. I feel this is because I used Python and not JS in the first place, thus the names of the variables are now different from those than the sidebar.

The original HTML file I got from Python was:

    <!DOCTYPE html>
    <head>    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

            <script>
                L_NO_TOUCH = false;
                L_DISABLE_3D = false;
            </script>

        <script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
        <link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
        <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
        <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

                <meta name="viewport" content="width=device-width,
                    initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
                <style>
                    #map_b7061ac807554938973c46c19ecd9206 {
                        position: relative;
                        width: 100.0%;
                        height: 100.0%;
                        left: 0.0%;
                        top: 0.0%;
                    }
                </style>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/leaflet.markercluster.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css"/>
        <script src="https://unpkg.com/leaflet.featuregroup.subgroup@1.0.2/dist/leaflet.featuregroup.subgroup.js"></script>
    </head>
    <body>    

                <div class="folium-map" id="map_b7061ac807554938973c46c19ecd9206" ></div>

    </body>

And the script of the map after the body. To make the sidebar, I added the links to stylesheets and scripts, downloaded those that were necessary and added in the script of the map, at the end, as the documentation stated:

 var sidebar = L.control.sidebar('sidebar').addTo(map);

I have tried everything, but I don't know anything about JS and something is clearly missing. What am I doing wrong?

1

The only problem in your code is that you mixed up Leaflet version and OpenLayers version of sidebar-v2 plugin https://github.com/Turbo87/sidebar-v2. Documentation you are referring to has only example for OpenLayers, but not for Leaflet. Have a look at Leaflet example https://turbo87.github.io/sidebar-v2/examples/index.html.

You have to remove references to OpenLayers libraries (which do not work anyway) and to OpenLayers version of sidebar-v2 plugin (which are plenty and all over the place):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Turbo87/sidebar-v2@v0.4.0/css/ol3-sidebar.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.2/css/ol.css" type="text/css">
<link rel="stylesheet" href="ol3-sidebar.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.2/build/ol.js"></script>
<script src="ol3-sidebar.js"></script>

And then add links for sidebar-v2 Leaflet plugin (previously downloaded to your server):

<link rel="stylesheet" href="leaflet-sidebar.css">
<script src="leaflet-sidebar.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.