0

I haven’t work with HTML/JavaScript and Leaflet maps for at least two years and I am attempting to create a storymap (non-ESRI) using a template that I located on GitHub. It has most of the functionality that I want with the exception of panning, zoom in/out, and click on locations and a pop-up box of details about that location. I have searched and reviewed multiple sources on adding the pan/zoom and I have followed the instructions with no success.

Is there a line of code that I can simply paste into my HTML doc and if so, in what general section (e.g. between the , , , , sections? Is there a preferred format or directions that anyone can recommend? I can provide you with my HTML if that would be helpful.

My libraries and version that I am using: src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> Resources that I have consulted: StackExchange Leaflet.js map - Pan too and Zoom in on point https://stackoverflow.com/questions/43024639/leaflet-pan-center-zoom-map-to-marker-location

Leaflet https://leafletjs.com/plugins.html#interactive-panzoom

GitHub https://github.com/elrobis/L.Control.ZoomBar https://github.com/kartena/Leaflet.Pancontrol/

Code snippets that I have tried:

_______________________________________________________________________________
<!-- Implementation: Include ZoomBar.js after including leaflet.js -->
        <!-- <script type="text/javascript" src="https://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> -->
        <script type="text/javascript" src="src/leaflet.js"></script>
        <script type="text/javascript" src="src/L.Control.ZoomBar.js"></script>
_______________________________________________________________________________
<!-- Implementation: Include ZoomBar.css after including leaflet.css -->
    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css"/> -->
        <link rel="stylesheet" type="text/css" href="src/leaflet.css"/>
        <link rel="stylesheet" type="text/css" href="src/L.Control.ZoomBar.css"/>
_______________________________________________________________________________
function centerMapOnPost(markerId) {
    map.panTo(markersById[markerId].getLatLng());
}
_______________________________________________________________________________
<link rel="stylesheet" type="text/css" href="src/leaflet.css"/>
<link rel="stylesheet" type="text/css" href="src/L.Control.ZoomBar.css"/>

<script type="text/javascript" src="src/leaflet.js"></script>
<script type="text/javascript" src="src/L.Control.ZoomBar.js"></script>

// Instantiate your leaflet map object..
//
var map = L.map('map',{
                        minZoom: 13,
                        maxZoom: 18,
                        zoomControl: false                // set to false !
                      }).setView([34.00, -81.035], 14);   // sets the reusable home position
// Instantiate the ZoomBar control..
//
var zoom_bar = new L.Control.ZoomBar({position: 'topright'}).addTo(map);

0

Your Answer

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

Browse other questions tagged or ask your own question.