@mapmost/mapmost-webgl-compare

A customized plug-in for Mapmost SDK for WebGL that provides map rolling function.

Depends on Mapmost SDK for WebGL, version correspondence is as follows:

compare version	SDK version
v 1.0.0	v 3.3.0+

Install

npm install @mapmost/mapmost-webgl-compare

Usage

Using modules

import mapmost from '@mapmost/mapmost-webgl';
import MapmostCompare from '@mapmost/mapmost-webgl-compare';
import '@mapmost/mapmost-webgl-compare/dist/mapmost-webgl-compare.css'

Use CDN

<script src ='https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js'></script>
<script src='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-compare/v1.0.0/mapmost-webgl-compare.js'></script>
<link rel='stylesheet' href='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-compare/v1.0.0/mapmost-webgl-compare.css' type='text/css' />

Parameters

Name	Type	Description
mapA	Object	RequiredMap instance object one.
mapB	Object	RequiredMap instance object two.
container	String	RequiredPlace the element id of the two maps.
options	Object	optionalparameter name type default value description mousemove Boolean false optionalIf true, the slider will move with the cursor, otherwise you need to drag the slider to move. orientation String vertical optionalSet the direction of the slider. "vertical" means creating a vertical slider bar for comparing the two maps on the left and right; "horizontal" means creating a horizontal slider bar for comparing the two maps on the top and bottom.

method

setSlider

Set the position of the slider.

Parameters

Name	Type	Description
x	Number	RequiredSlider bar position, calculated from left/top, in pixels.

Case

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
compareMap.setSlider(100)

on

Add a listener for the specified type of event, and the return value is the Compare object itself (this).

Parameters

Name	Type	Description
type	String	RequiredThe type of event to be monitored, which can be slideend (slide end event).
listener	Function	RequiredThe function to be called when the event is triggered.

Case

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
compareMap.on('slideend', function() {

  // Code executed when the sliding end event is triggered
  console.log('Sliding ends');
});

fire

Triggers an event of the specified type, and the return value is the Compare object itself (this).

Parameters

Name	Type	Description
type	String	RequiredThe type of event to be triggered, which can be slideend (slide end event).
data	Object	RequiredData passed to the event listener.

Case

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
compareMap.on('slideend', function (event) {
  console.log(event.message)
});
compareMap.fire('slideend', { message: 'Slide ended' }); // Trigger the sliding end event

off

Remove the event listener previously added using the Compare#on method, and the return value is the Compare object itself (this).

Parameters

Name	Type	Description
type	String	RequiredThe event type previously used to install the listener.
listener	Function	RequiredPreviously installed listener function

Case

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
function slideEndHandler() {

  // Code executed when the sliding end event is triggered
  console.log('Slide ended');
}

compareMap.on('slideend', slideEndHandler);

compareMap.off('slideend', slideEndHandler);

Usage example

var mapA = new mapmost.Map({
    container: "before",
    center: [120.70899820084962, 31.339048513540533],
    zoom: 14,
    style: "<your style url one>",
    userId: '***', // Authorization code
});

var mapB = new mapmost.Map({
    container: "after",
    center: [120.70899820084962, 31.339048513540533],
    zoom: 14,
    style: "<your style url two>",
    userId: '***', // Authorization code
});

mapB.on('load', function () {
    var container = "comparison-wrapper";
    var compareMap = new mapmost.Compare(mapA, mapB, container, {
        orientation: 'vertical',
        mousemove: true
    });
})

Refer to Example.