I’m currently starting to get into NodeJS-Projekts and my first one should be a simple wrapper-class for an Openlayers-Map, that should work as a standalone.
I have put together my configuration, based on a basic tutorial, sprinkled with anything I could find, that promised to help with the problem.
But whatever I do, I cant get the class to work and get the error:
Uncaught ReferenceError: OpenLayersMap is not defined
The following is an extreme simplification of the Problem:
Please note, that index.js will later include more imports.
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
library: { type: "umd" },
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
devServer: {
static: path.join(__dirname, "public"),
compress: true,
port: 9000,
open: true,
},
};
index.js
import OpenLayersMap from "./map";
export default OpenLayersMap;
map.js
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default class OpenLayersMap {
constructor(elementId) {
this.map = new Map({
target: elementId,
layers: [
new TileLayer({source: new OSM()}),
],
view: new View({
center: [998616.32, 7084710.0],
zoom: 12,
}),
});
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLayers Map</title>
<style>
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="bundle.js"></script>
<script>
const map = new OpenLayersMap("map")
</script>
</body>
</html>
The following does work:
index.js
import OpenLayersMap from "./map";
document.addEventListener('DOMContentLoaded', () => {
const map = new OpenLayersMap('map');
});
or
import OpenLayersMap from './map';
window.createMap = (elementId) => {
new OpenLayersMap(elementId);
};
But the first does not allow me to customize the ID of the target and the second one does not give me the instance of the class for further use, therefore i cant use these.
Vetri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.