Leaflet.SyncView

A sync view control for Leaflet.

Design for Drupal Leaflet Module integration.

Requirement

• Leaflet 1.7.1+
• jQuery 3.6.0+

Demo

• https://drustack.github.io/Leaflet.SyncView/

Usage

This Leaflet control don't provide any visual element, but using jQuery for bidirectional sync form input (e.g. for latitude, longitude and zoom) with current Leaflet view:

<form>
    <input type="text" class="latitude">
    <input type="text" class="longitude">
    <input type="text" class="zoom">
</form>

<div id="map"></div>

<script>
    var map = L.map("map").setView([51.505, -0.09], 13);
    
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 19,
        attribution: "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
    }).addTo(map);
    
    L.control.syncView({
        latitudeSelector: ".latitude",
        longitudeSelector: ".longitude",
        zoomSelector: ".zoom",
    }).addTo(map);
</script>

Include via CDN

Leaflet.SyncView is available through jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@drustack/leaflet.syncview/dist/L.Control.SyncView.min.css">
<script src="https://cdn.jsdelivr.net/npm/@drustack/leaflet.syncview/dist/L.Control.SyncView.min.js"></script>

Development

Install NPM depedencies:

npm install

Build CSS and JS individually:

npm run jshint
npm run uglifyjs
npm run sass

Or simply build everything once together:

npm run build

License

• Code released under Apache License 2.0
• Docs released under CC BY 4.0
• SVG released under CC BY 4.0

Author Information

• Wong Hoi Sing Edison
  • https://twitter.com/hswong3i
  • https://github.com/hswong3i