Merge pull request #230 from jonataswalker/add-webpack-example

feat: add webpack example
jonataswalker · Sep 24, 2022 · 32159b0 · 32159b0
2 parents fd822e6 + c520a09
commit 32159b0
Show file tree

Hide file tree

Showing 8 changed files with 3,452 additions and 131 deletions.
diff --git a/examples/my-project-with-webpack/index.html b/examples/my-project-with-webpack/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css"
+    />
+  </head>
+  <body>
+      <div id="map"></div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/my-project-with-webpack/package-lock.json b/examples/my-project-with-webpack/package-lock.json
diff --git a/examples/my-project-with-webpack/package.json b/examples/my-project-with-webpack/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "ol-contextmenu-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "dependencies": {
+    "ol": "^7.1.0",
+    "ol-contextmenu": "^5.0.3"
+  }
+}
diff --git a/examples/my-project-with-webpack/src/index.js b/examples/my-project-with-webpack/src/index.js
@@ -0,0 +1,147 @@
+import { Map as OlMap, View, Feature } from 'ol';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import OSM from 'ol/source/OSM';
+import { transform } from 'ol/proj';
+import { Style, Icon, Text } from 'ol/style';
+import Fill from 'ol/style/Fill';
+import Stroke from 'ol/style/Stroke';
+import { format } from 'ol/coordinate';
+import Point from 'ol/geom/Point';
+
+import ContextMenu from 'ol-contextmenu';
+
+import 'ol-contextmenu/ol-contextmenu.css';
+import './style.css';
+
+const view = new View({ center: [0, 0], zoom: 4 });
+const vectorLayer = new VectorLayer({ source: new VectorSource() });
+const baseLayer = new TileLayer({ source: new OSM() });
+
+const map = new OlMap({
+    target: 'map',
+    view,
+    layers: [baseLayer, vectorLayer],
+});
+
+const pinIcon =
+    'https://cdn.jsdelivr.net/gh/jonataswalker/ol-contextmenu@604befc46d737d814505b5d90fc171932f747043/examples/img/pin_drop.png';
+const centerIcon =
+    'https://cdn.jsdelivr.net/gh/jonataswalker/ol-contextmenu@604befc46d737d814505b5d90fc171932f747043/examples/img/center.png';
+const listIcon =
+    'https://cdn.jsdelivr.net/gh/jonataswalker/ol-contextmenu@604befc46d737d814505b5d90fc171932f747043/examples/img/view_list.png';
+
+const actionsSubmenuItems = [
+    {
+        text: 'Add a Marker',
+        icon: pinIcon,
+        callback: marker,
+    },
+];
+
+const actionsSubmenu = {
+    text: 'Some more Actions',
+    icon: listIcon,
+    items: actionsSubmenuItems,
+};
+
+const actionsItems = [
+    {
+        text: 'Add a Marker',
+        icon: pinIcon,
+        callback: marker,
+    },
+    {
+        text: 'Center map here',
+        icon: centerIcon,
+        callback: center,
+    },
+];
+
+const firstLevelSubmenu = {
+    text: 'Some Actions',
+    icon: listIcon,
+    items: [actionsSubmenu, ...actionsItems],
+};
+
+const items = [
+    {
+        text: 'Center map here',
+        classname: 'bold',
+        icon: centerIcon,
+        callback: center,
+    },
+    {
+        text: 'Add a Marker',
+        icon: pinIcon,
+        callback: marker,
+    },
+    '-', // this is a separator
+    {
+        text: 'Some more Actions, loooong',
+        items: [
+            {
+                text: 'Add a Marker',
+                icon: pinIcon,
+                callback: marker,
+            },
+        ],
+    },
+    '-', // this is a separator
+];
+
+items.push(firstLevelSubmenu);
+
+const contextmenu = new ContextMenu({
+    width: 200,
+    defaultItems: true,
+    items,
+});
+
+map.addControl(contextmenu);
+
+console.log({ contextmenu });
+
+// @ts-ignore
+contextmenu.on('beforeopen', (evt) => {
+    console.log({ evt });
+});
+
+map.on('moveend', () => {
+    console.log('moveend', contextmenu.isOpen());
+});
+
+function elastic(t) {
+    return 2 ** (-10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1;
+}
+
+function center(obj) {
+    view.animate({
+        duration: 700,
+        easing: elastic,
+        center: obj.coordinate,
+    });
+}
+
+function marker(obj) {
+    const coord4326 = transform(obj.coordinate, 'EPSG:3857', 'EPSG:4326');
+    const template = 'Coordinate is ({x} | {y})';
+    const iconStyle = new Style({
+        image: new Icon({ scale: 0.6, src: pinIcon }),
+        text: new Text({
+            offsetY: 25,
+            text: format(coord4326, template, 2),
+            font: '15px Open Sans,sans-serif',
+            fill: new Fill({ color: '#111' }),
+            stroke: new Stroke({ color: '#eee', width: 2 }),
+        }),
+    });
+    const feature = new Feature({
+        type: 'removable',
+        geometry: new Point(obj.coordinate),
+    });
+
+    feature.setStyle(iconStyle);
+    vectorLayer.getSource()?.addFeature(feature);
+}
diff --git a/examples/my-project-with-webpack/src/style.css b/examples/my-project-with-webpack/src/style.css
@@ -0,0 +1,12 @@
+html,
+body {
+    margin: 0;
+    height: 100%;
+}
+#map {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/examples/my-project-with-webpack/webpack.config.js b/examples/my-project-with-webpack/webpack.config.js
@@ -0,0 +1,21 @@
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/index.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "bundle.js",
+  },
+  externals: {
+    "ol/control/Control": "ol.control.Control",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+};