Map Swipe Tool with Google Maps API

Question

I am trying to build side by side map swipe tool like this one. I have the UI working. I need help on getting the map layer change. I get the map id and map token from Earth Engine from this function ee.data.getMapId(params, callback). I am using it to construct my ImageMapType as:

var DEFAULT_ZOOM = 5,
    MAX_ZOOM = 25,
    DEFAULT_CENTER = {
        lng: 102.93,
        lat: 16.4
    },
    // Map options
    mapOptions = {
        center: DEFAULT_CENTER,
        zoom: DEFAULT_ZOOM,
        maxZoom: MAX_ZOOM,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER
        },
        mapTypeId: 'terrain',
        fullscreenControl: true,
        fullscreenControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER
        }
    };

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var leftLayer, rightLayer;

var getMapType = function (mapId, mapToken, name) {
    var eeMapOptions = {
        getTileUrl: function (tile, zoom) {
            var url = 'https://earthengine.googleapis.com/map/';
            url += [mapId, zoom, tile.x, tile.y].join('/');
            url += '?token=' + mapToken;
            return url;
        },
        tileSize: new google.maps.Size(256, 256),
        opacity: 1.0,
        name: name
    };
    return new google.maps.ImageMapType(eeMapOptions);
};

var loadMap = function () {
    // Left Layer
    leftLayer = getMapType(id, token, 'left');
    // Right Layer
    rightLayer = getMapType(id, token, 'right');
    map.overlayMapTypes.push(leftLayer);
    map.overlayMapTypes.push(rightLayer);
};

The slider is the range input type. The HTML looks like:

<div class="sbs">
    <div class="sbs-divider"></div>
    <input class="sbs-range" type="range" min="0" max="1" step="any" style="padding-right: 0; padding-left: 0; left: 0%;" />
</div>

The event attached to the slider as:

var thumbSize = 42;
var padding = 0;
var sbsRange = $('.sbs-range')
.on('input change', function (event) {
    var _x = map.getDiv().clientWidth;
    var _y = map.getDiv().clientHeight;
    var nw = {x: 0, y: 0};
    var se = {x: _x, y: _y};
    var sliderValue = Number(event.target.value);
    var offset = (0.5 - sliderValue) * (2 * padding + thumbSize);
    var shift = _x * sliderValue + offset;
    $('.sbs-divider').css({left: shift + 'px'});
    var clipLeft = 'rect(' + [nw.y, offset, se.y, nw.x].join('px,') + 'px)';
    var clipRight = 'rect(' + [nw.y, se.x, se.y, offset].join('px,') + 'px)';
});

I am trying to set the style to the left and right layer clip. How can I do this in Google Maps API V3? Or is there a better way to do this? Any help on this would be highly appreciated.

Thanks!

Answer 1

Have a look at https://maps.amsterdam.nl/slider

I used two Custom Overlays in the OverlayMouseTarget pane and clip the overlays with a rect. See slider.js in the source of the map. It's readable.