How to integrate openlayers 3 transform extension

Question

I am working on an openlayers 3 project, developed using typescript, hence:

let ol = require("openlayers");

I would like to use the transform extension plugin, which is not published on NPM (http://viglino.github.io/ol3-ext/interaction/transforminteraction.js)

I tried the following:

let ol = require("openlayers");
require("<path>/ol/transforminteraction");

however I get the following errors:

ERROR TypeError: ol.interaction.Transform is not a constructor

and

Uncaught ReferenceError: ol is not defined

How am I able include/integrate this resource correctly?

Answer 1

let ol = require("openlayers");

This means ol is not in the global scope, therefore it isn't available to transforminteraction to extend.

Looking at the plugin code, you should be able to wrap it in a

module.exports = function(ol) {
   ...
}

This puts ol into the function scope.

Then you can use it by passing in ol as an argument to extend it. e.g.

let ol = require("openlayers");
require("<path>/ol/transforminteraction")(ol);

Answer 2

You can include "transforminteraction.js" code in a separate file that the browser will download alongside the HTML document. Cut JS code from html file,and paste it into your "transforminteraction.js" file,don't forget about window.onload = function() { ...your code js + transforminteraction.js }. Also check:

Clone repository of OL3-ext: https://github.com/Viglino/ol3-ext

or:

https://github.com/Rep1ay/openLayer.git

Answer 3

I solved this problem adding in my load.js file:

if (debugMode) { 
    addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js');
    addScriptFile('//viglino.github.io/ol-ext/dist/ol-ext.js'); 
} else { 
    addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol.js');   
    addScriptFile('//viglino.github.io/ol-ext/dist/ol-ext.js'); 
}