how to use ol3-ext in webpack

[houzw]

ol3-ext is great!
But how to use it in webpack with npm?
thanks

[Viglino]

Hello,
I plane to publish to npm, but no time to handle versions yet.
You also can see the issue #14.

[aleksandrmelnyk]

Would be great ability to import individual components from npm. For example,
import buttonControl from 'ol3-ext/control/buttoncontrol'

thanks.

[houzw]

I think I found a solution，may be useful

in webpack.base.conf.js

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'ol': resolve('node_modules/openlayers/dist/ol.js'),  
            'ol3-ext-dir': resolve('src/libs/ol3-ext'),
            'ol3-ext': resolve('src/libs/ol3-ext/ol3-ext.modified.js'), // I modified ol3-ext's js file, deleted lines about WSynchro
            'jspanel': 'jspanel3/source/jquery.jspanel.min.js'
        }
    },

and in module rules, add config

{
  test: require.resolve(path.join(libs, "ol3-ext/ol3-ext.modified.js")),
  loader: "imports-loader?$=jquery,ol=openlayers"
}

then , you just have to

import 'ol3-ext'
// your code

[Siedlerchr]

It would be really awesome, if this extension could be implemented with the ES2016 module syntax
http://exploringjs.com/es6/ch_modules.html

[Viglino]

ol3-ext change is name and is now available on npm: https://www.npmjs.com/package/ol-ext

[SamuelIrungu]

@Viglino I would appreciate to see the best way to use ol-ext npm with ol modules, maybe an example would help alot, am confused about how to import the modules, currently I am ol3-xt cdn

[Viglino]

Hello,

There is no best way to use ol-ext:

• you can download the ol-ext.min.css and the ol-ext.min.js in the repo.
• or link to the github cdn https://cdn.rawgit.com/Viglino/ol-ext/gh-pages/dist/ol-ext.min.js
• or install it in your project using the npm install ol-ext command.

You should consider how you want to control your code:

• download update by yourself
• always up to date (but may introduce new bugs)
• automatic update throw npm with stable version and possible roll-back

Look at the Getting Started section.

[SamuelIrungu]

Thanks for the fast feedback, my problem is specific, I want to consume node modules for both ol-ext and ol, if I use any ol-ext package file for instance togglecontrol.js, I get "ol is not defined", anyone who has already used ol-ext and ol node modules with webpack?

[Viglino]

Hi,
If you get ol is not defined, this means the ol package is not included in your page.
ol is a dependencies of ol-ext. Just check out the ol package: npm install ol and include the js in your page.
You also have to include jQuery.
@+

[SamuelIrungu]

Thanks much @Viglino, I created a very simple repo here to demonstrate what am doing, please check it and modify what you see wrong.
Collaborate here

[Viglino]

I'm not very aware with webpacks.
Look at houzw solution above.

[SamuelIrungu]

ok thanks much, I was using @houzw method before node modules were published, now am looking for a better way to import per file as we do for openlayers, I will keep using @houzw method till someone comes up with another better way. Cheers!

[Viglino]

If you have a running example using @houzw solution, you're welcome! This will be a first step.

[SamuelIrungu]

Some good news, I just finished recreating ol-ext node modules with required import, export structure, check it out and test it here. Feel free to use and I look forward to seeing it added as the future npm module by @Viglino when its tested and approved.

[Viglino]

Hey @DarkScript! I can see you've done a great work!
I'm pretty busy this week but I'll try to have a look at it.
I gave you access to the project if you want to create a branch on it, for future merge.
If you have an idea to recreate the dist to ensure compatibility with the current version it will be great to recreate example page.
The doc issue is just a matter of time that can be handle later.

[thhomas]

Thanks @DarkScript for your work! As openlayers promotes to use its "packaged" version it is great to have same with ol-ext. We will still have to find a way to keep the 2 version (packaged and old-fashion single file) of the same library in the same place.
You could also rename the files to fit the openlayers spirit (for instance the file interaction/clipinteraction.js could be renamed to interaction/clip).

[SamuelIrungu]

@Viglino I will create a branch and ensure I have latest of your modifications, @tthomas, sure we got lots of improvements that can be done, will try and do some good work

[Viglino]

OK! I'll stop updates for my part until we get something working.

[Viglino]

@DarkScript I've started to write a gulp script to recreate the current (old-fashion) dist with your modifications. I use the ol_namespace_class notation you used to recreate the ol.namespace.class, so no need to rename or move files.
The documentation should use the dist to be recreated as is.
I'll try to push it this week-end 😃

[SamuelIrungu]

@Viglino Ok, I will see what you will have, I will create a branch also from the last commit you will do on this week.

[SamuelIrungu]

Am also concerned if we should rename the 'classes', for instance, instead of ol_control_Button, should we use Button. And when the class is being imported and exported, we can just do:

buttoncontrol.js (in ol-ext/control/)

var Button = function(){
...
Button.prototype....
}
...
export default Button

in a class using Button module

import Button from 'ol-ext/control/buttoncontrol'
...
var myButton = new Button();
...

What do you think about such es6 based way, openlayers are also switching to this way here to create class and here to export it

[Viglino]

Well, I've got a script that takes the es6 ol_control_Button to create the js ol.control.Button (quite simple as it just replace "_" with "." 😀 ). If we only use Button as class name it will be more difficult to know how to recreate the js classes...
If we use the default export it can be imported with any name for example:

export default ol_control_Button

and then

import Button from 'ol-ext/control/buttoncontrol'

The problem is that with the ol_control_Button there is 2 classes (Button and TextButton) exported and the exported class is ol_control_Button 😬 ...
I think we can split the file to have only one class exported per file and keep the ol_namespace_Class notation.

[Viglino]

I think it will be pretty to rename the files to match the export.
I mean:

import Button from 'ol-ext/control/button'

[SamuelIrungu]

Good, I will create a branch for the node module and work on that this weekend

[Viglino]

You can create a branch "v2", we'll close the current (v1) branch and switch to the v2 when all runs. Anyway the old files won't be used directly except in a webpack, the only issue is to ensure the ./dist.

I'll try to push a script to build the (old-fashion) dist tomorrow!
I'll try to start recreating the examples based on the dist.

[SamuelIrungu]

I created a branch 'npm-restructured' which contains the new structure, I updated to be in line with your last modifification. I have not yet included the fix @thhomas did but I will. I kept the naming we had in the initial repo I created and I moved all source to src as its best practice to separate the project from example and build, config and rest of stuff in the root directory. Its great if you created the script for rebuilding the dist, I will separate TextButton and Button in next push I do

[SamuelIrungu]

for info I accidently did a merge with main branch but after realizing I did a revert, its now back to its earlier state.

[Viglino]

@DarkScript I've pushed a gulpfile.js that recreate the ./dist.
Just run the gulp command to create the dist (js + css).
I've updated 2 example (map.control.bar and map.control.button) that use the new dist files... and it runs!

I've also updated the doc using the dist (+2 bugs correction in the code to make it run). Run gulp doc to create the doc (npm install jsdoc3 before). I thinks there is still some issues but it runs.

I'll work on examples to make them run 😄

[SamuelIrungu]

@Viglino good work with the script, I will use the npm-restructured branch as node module in a branch am working on tomorrow, as I check for possible bugs especially in import/export.

[Viglino]

@DarkScript don't hesitate to rename the files to match the module names and even rename the directories (./src/layer contains sources...)
Some modules are deprecated (control/piratecontrol), just examples (utils/wsynchro) or miscellaneous (utils/jqExportMap is a jQuer plugin) and should be treated apart (in a misc directory).
I'll try to work on it wednesday to make the examples run on the new structure.

[SamuelIrungu]

@Viglino I did rename and reorganized some files, I edited the gulp script, help me test the gulp task and if order of files is good, also remember to modify ol.animation.pan which is used in the code but the class doesn't exist in the version of ol we are using(4.6.*), check also getpreview, settextpathstyle, cspline, convexhull, geomutils, hexbinsource, vectorrenderer3d, wsynchro which I never tested their functionality as node modules.

[SamuelIrungu]

With what we have I think now the node modules are ready, bugs expected but we can remove them as soon as they are identified. We should avoid to commit the dist folder in npm to avoid confusion of current between import based syntax with the old ol.. syntax (my opinion).

[Viglino]

@DarkScript now all examples runs!
I've removed some functions from the .dist and placed them in .dist/extra.
I think we should commit with a new version number (v2.0.0) to avoid confusion.

Maybe we should rename files to match the module name
import Button from 'ol-ext/control/button'
instead of
import Button from 'ol-ext/control/buttoncontrol'

[SamuelIrungu]

@Viglino yeah we can rename the files for instance instead of buttoncontrol.js we can have button.js since the file package (folder) is already control, should I go ahead with this? I can do it by tomorrow.

[Viglino]

OK. I think we also have to move the sources from /layer to ./source to be consistent.
I can work on it this week-end to have a first revision next week.

[SamuelIrungu]

@Viglino I renamed the files to match export names, I also updated the gulp script, please test the script, also check on the merge request by @hkollmann, I placed a TODO on this branch. The next step would be maybe to change the functions name, for instance, instead of ol_control_Button we can have Button, this can be done in next version (you can add it to Roadmap of ol-ext )

[Viglino]

As the script use the function names to recreate the ol classes, renaming the functions would force us to change the method and look in the file path 😒 .
For me the naming convention ol_namespace_class is not an issue as soon as it is documented.

[Viglino]

Hi!

• I've test the scripts and it runs. The examples now run with the ./dist/ol-ext.js
• I've merge @hkollmann request
• I've placed the layer sources in the ./src/source directory
• I also added the animated cluster from this repo to ol-ext
• The files in ./utils are more examples than real extensions. They use extra dependencies and are excluded from build (available in the ./dist/extra).
• TODO: ol.animation.pan is only available for ol<3.20. There is a test for it that use ol.View.animate instead when available (>3.20). I think we can now remove it now.
  I think we are close to a v2.

If all is OK I can push a last version for the gh-pages (v1.1.3) and switch to the restructured branch (v2.0).

[Viglino]

Hi,
I've published a v1.1.3 on npm.

I've pushed the npm-restructured branch on master which is now the default (pay attention on checkout).
The github pages are now built from the master, so is the documentation.
The gulp watch command enable recreating the ./dist on file changes.
OL3-AnimatedCluster is now part of the project.

Next step: create a v2.0.0 based on master and publish to npm.

Todo:

• test the package before publish
• create a contributing.md / developping.md to explain how to use the build

[Viglino]

The new v2.0.0 is available on npm and use module import/export.

 import Button from 'ol-ext/control/Button'

Create new issues to track bugs...