Skip to content

drustack/Leaflet.SyncView

Repository files navigation

Leaflet.SyncView

GitHub tag (latest SemVer) GitHub license npm jsDelivr hits (GitHub)

A sync view control for Leaflet.

Design for Drupal Leaflet Module integration.

Requirement

Demo

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 eslint
npm run uglifyjs
npm run sass

Or simply build everything once together:

npm run build

Start the simple static HTTP server with http://localhost:8080/ for testing:

npm run http-server

License

Author Information