maptalks.mapsync

maptalks Map synchronization tool

The map will become the main map when the mouse enters the container of the map

if you want switch main map , you can use setMainMap method

Install

NPM

npm i maptalks
npm i maptalks.mapsync
# or
yarn add maptalks
yarn add maptalks.mapsync

CDN

<script src="https://unpkg.com/maptalks/dist/maptalks.js"></script>
<script src="https://unpkg.com/maptalks.mapsync/dist/maptalks.mapsync.js"></script>

API

MapSync

constructor(maps)

import {
    MapSync
}
from 'maptalks.mapsync'

const mapSyncControl = new MapSync(maps);

// if you use cdn
// const mapSyncControl = new maptalks.MapSync(maps);

methods

• addMap(map)

const map = new maptalks.Map(id, {
    center: [-0.113049, 51.498568],
    zoom: 14,
    baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ["a", "b", "c", "d"],
        attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
    })
});
mapSyncControl.addMap(map);

• removeMap(map)

mapSyncControl.removeMap(map);

• setMainMap(map) set main map for Drive other maps

mapSyncControl.setMainMap(map);

• getMainMap()

mapSyncControl.getMainMap();

• lock() lock current map,the main map Will not be changed unless you unlock

mapSyncControl.lock();

• unLock() unlock

mapSyncControl.unLock();

• isLock()

const isLock = mapSyncControl.isLock();

• dispose()

events

• switchmainmap

   mapSyncControl.on('switchmainmap', e => {
       console.log(e, e.map === e.target.getMainMap());
   })