OpenLayers 6 - ES6 project structure

Question

I'm working on a project using OpenLayers 6 in ES6 with Webpack.
It's my first real ES6 project and I want to make it organized (and a bit modular) but I'm struggling with the use of imports and exports.

Currently my structure is:

- all.js
- map/
   - index.js
   - gpx.js

The all.js file is the "entry point".

all.js

import 'ol/ol.css';
import map from './map/index';
import { vector as GPXvector } from './map/gpx';

map.addLayer(GPXvector);

map/index.js

import { Map, View } from 'ol';
import { OSM } from 'ol/source';
import { Tile as TileLayer } from 'ol/layer';

const map = new Map({
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    target: 'map',
    view: new View({
        center: [1037749, 5135381],
        zoom: 10
    })
});

export { map as default };

map/gpx.js

import { Vector as VectorLayer } from 'ol/layer';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { unByKey } from 'ol/Observable';
import VectorSource from 'ol/source/Vector';
import GPX from 'ol/format/GPX';
import map from './index.js'; // Is that good ??

const style = {
    // [...] Some style here
};

const source = new VectorSource({
    url: 'test.gpx',
    format: new GPX()
});

var onChange = source.on('change', function() {
    if (source.getState() == 'ready') {
        map.getView().fit(source.getExtent()); // Access to "map" from "index.js" HERE
        unByKey(onChange);
    }
});

const vector = new VectorLayer({
    source: source,
    style: function (feature) {
        return style[feature.getGeometry().getType()];
    }
});

export { vector, source };

I want to access to the map instance (initialized in map/index.js ) from the map/gpx.js file (see comment in source code).
But I feel like I am importing map from map/index.js inside all.js , which is importing map/gpx.js which himself also imports map from map/index.js .
It sounds to me like some kind of "loop" imports where it will be a mess to handle the order of imports for example when I'll get more files in my project.

Also if you have any advice for me to start properly with ES6 it's cool !

EDIT 1

I changed to something else to see if it allows more granularity.

all.js

import 'ol/ol.css';
import map from './ntrak/index';
import MyGPX from './ntrak/gpx';

const gpx = new MyGPX(map, 'test.gpx');

map/gpx.js

import { Vector as VectorLayer } from 'ol/layer';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { unByKey } from 'ol/Observable';
import VectorSource from 'ol/source/Vector';
import GPX from 'ol/format/GPX';

const style = {
    // [...] Some style here
};

const _onSourceChange = function(map, source) {
    if (source.getState() == 'ready') {
        map.getView().fit(source.getExtent());
        unByKey(_onSourceChange);
    }
}

export default class {
    constructor(map, url, fit = true) {
        this.map = map;
        this.url = url;
        this.fit = fit;
        this.loadGPX();
    }

    loadGPX() {
        this.source = new VectorSource({
            url: this.url,
            format: new GPX()
        });

        if (this.fit) {
            this.source.on('change', () => _onSourceChange(this.map, this.source));
        }

        this.vector = new VectorLayer({
            source: this.source,
            style: function(feature) {
                return style[feature.getGeometry().getType()];
            }
        });

        this.map.addLayer(this.vector);
    }
};

I think it's cool because it allows to get multiple GPX vectors on the same map instance.
But if I want to do more stuff that interacts with my GPX source or vector I will need to pass the instance everytime instead of just importing the GPX file directly.

What do you think?

Answer 1

You can use CircularDependencyPlugin for webpack to track such circular dependencies.
There is no circular dependency in your example, import map from './index.js'; // Is that good?? import map from './index.js'; // Is that good?? is ok.

Your es6 code is fine to me, I see one var usage ( var onChange =... ), you should replace that.