Package Exports

ol-comparison-tools

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ol-comparison-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ol-comparison-tools

An Openlayers extension adding a control to handle comparison tools between 2 layers.

Based on ol-ext, some cool openlayers extension.

To make it works, it needs font-awesome css, so add:

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Quickstart

  var layer1 = ...
  var layer2 = ...

  /* layer order is important here */
  /* first layer in map is left layer in control */
  /* second layer in map is right layer in control */
  var olMap = new ol.Map({
    target: doc.getElementById('map'),
    layers: [ layer1, layer2 ]
  });

  var control = new ol.control.ComparisonTools({
    leftLayer: layer1,
    rightLayer: layer2
  });

  olMap.addControl(control);

ol-comparison-tools is available

as a javascript module:

import ol_control_ComparisonTools from 'ol-comparison-tools/control/ComparisonTools.js';

import {ComparisonTools as ComparisonToolsControl} from 'ol-comparison-tools/control.js';

loading the script in html:

<script src="ol-comparison-tools/dist/comparisontools.min.js" type="text/javascript"></script>

Examples

To browse examples,

install dependencies with npm install
build them with npm run build-examples
start a web server with npm run serve and browse to http://localhost:8080/examples/package/example.html

If you want to hack/modify the plugin, you can rebuild dist version doing npm run build-dist.