How to use OpenLayers 6.5 examples?

Question

The OpenLayers community provides many examples on this page : https://openlayers.org/en/latest/examples/

My goal is to be able to understand each example (for example : Draw Features) and then use the technics in my own website project.

The problem is that when I work with the code they provide below each example, it does not work

Then, I downloaded the ol package from here : https://openlayers.org/download/

The problem is that for each example there is 3 files : ".js" file, ".map.js" file and ".html" file. (see picture)

the problem is that the ".js" file contain some code that I could not understand but I think it refers to other functions in a separate common.js file there in the folder.

(window.webpackJsonp = window.webpackJsonp || []).push([
    [29], {
        22622: function(e, n, t) {
            "use strict";
            t.r(n);
            var o, a = t(66),
                c = t(3),
                r = t(2),
                w = t(9),
                u = t(10),
                i = t(5),
                d = t(19),
                s = new i.a({
                    source: new w.b
                }),
                p = new u.a({
                    wrapX: !1
                }),
                m = new d.a({
                    source: p
                }),
                map = new c.a({
                    layers: [s, m],
                    target: "map",
                    view: new r.a({
                        center: [-11e6, 46e5],
                        zoom: 4
                    })
                }),
                l = document.getElementById("type");

            function y() {
                "None" !== l.value && (o = new a.c({
                    source: p,
                    type: l.value
                }), map.addInteraction(o))
            }
            l.onchange = function() {
                map.removeInteraction(o), y()
            }, document.getElementById("undo").addEventListener("click", (function() {
                o.removeLastPoint()
            })), y()
        }
    },
    [
        [22622, 0]
    ]
]);
//# sourceMappingURL=draw-features.js.map

The problem is that common.js file is very long, weird and delicate to understand how it works, see below snippet

!(function (t) {
  function e(e) {
    for (
      var r, a, s = e[0], h = e[1], l = e[2], u = 0, p = [];
      u < s.length;
      u++
    )
      (a = s[u]),
        Object.prototype.hasOwnProperty.call(n, a) && n[a] && p.push(n[a][0]),
        (n[a] = 0);
    for (r in h) Object.prototype.hasOwnProperty.call(h, r) && (t[r] = h[r]);
    for (c && c(e); p.length; ) p.shift()();
    return o.push.apply(o, l || []), i();
  }

  function i() {
    for (var t, e = 0; e < o.length; e++) {
      for (var i = o[e], r = !0, s = 1; s < i.length; s++) {
        var h = i[s];
        0 !== n[h] && (r = !1);
      }
      r && (o.splice(e--, 1), (t = a((a.s = i[0]))));
    }
    return t;
  }
  var r = {},
    n = {
      0: 0,
    },
    o = [];

My questions are :

• How to use OpenLayers example in order to make my own website
• Is Common.js created manually or automatically
• is there any way to get a separated working code for each Ol example

Answer 1

The procedure is described in the getting started page archive .

The idea is that, when developing, you can import only the modules you need from OpenLayers (and from other libraries). Then, you use a bundler (parcel, webpack or else) to extract the modules you are actually using from the entire OL library, and to pack them in a new javascript file, optionally linting or obfuscating it (remove comments, rename long variables to single letter etc to make is smaller and/or less readable). This JS file is the one you would use in your website.

The code that is shown on the various example pages is what one would typically use in the 1st step, i.e. you would have to bundle it and use the output JS in your website.

Two things to remember:

1. Node is required when developing only, it is not necessary to use it for your website nor to run it on a server.
2. It is a good idea to practice a bit the importing, bundling, publishing and to understand the possible configuration using dedicated tutorials, as OL tutorials assumes the reader is familiar with these aspects