Fix import

js/ol-wfs-t.js

@@ -1,12 +1,32 @@
-const projection = new ol.proj.Projection({
+import Projection from 'ol/proj/Projection.js';
+import WFS from 'ol/format/WFS.js';
+import GML from 'ol/format/GML.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import {Circle, Fill, Stroke, Style} from 'ol/style.js';
+import Select from 'ol/interaction/Select.js';
+import Snap from 'ol/interaction/Snap.js';
+import MouseWheelZoom from 'ol/interaction/MouseWheelZoom.js';
+import DragPan from 'ol/interaction/DragPan.js';
+import Modify from 'ol/interaction/Modify.js';
+import Draw from 'ol/interaction/Draw.js';
+import OSM from 'ol/source/OSM.js';
+import TileLayer from 'ol/layer/Tile.js';
+import Map from 'ol/Map.js';
+import View from 'ol/View.js';
+import Feature from 'ol/Feature.js';
+import {transform} from 'ol/proj';
+
+const projection = new Projection({
     code: 'EPSG:3857',
     units: 'm',
     axisOrientation: 'neu'
 });
 
-const formatWFS = new ol.format.WFS();
+const formatWFS = new WFS();
 
-const formatGML = new ol.format.GML({
+const formatGML = GML({
     featureNS: 'http://127.0.0.1:8080/geoserver/geodata',
     featureType: 'stazioni_campania',
     srsName: 'EPSG:3857'
@@ -54,20 +74,20 @@ const loaderWFS = function(extent, resolution, projection, success, failure) {
     xhr.send();
 };
 
-const sourceWFS = new ol.source.Vector({
-    format: new ol.format.GeoJSON(),
+const sourceWFS = new VectorSource({
+    format: new GeoJSON(),
     loader: loaderWFS,
     strategy: ol.loadingstrategy.bbox
 });
 
-const layerWFS = new ol.layer.Vector({
+const layerWFS = new VectorLayer({
     source: sourceWFS,
-    style: new ol.style.Style({
-        image: new ol.style.Circle({
-            fill: new ol.style.Fill({
+    style: new Style({
+        image: new Circle({
+            fill: new Fill({
                 color: 'rgba(0, 0, 0, 0.2)',
             }),
-            stoke: new ol.style.Stroke({
+            stoke: new Stroke({
                 color: 'rgba(0, 0, 0, 1.0)',
                 width: 2
             }),
@@ -78,45 +98,45 @@ const layerWFS = new ol.layer.Vector({
 
 let interaction;
 
-let interactionSelectPointerMove = new ol.interaction.Select({
+let interactionSelectPointerMove = new Select({
     condition: ol.events.condition.pointerMove
 });
 
-let interactionSelect = new ol.interaction.Select({
-    style: new ol.style.Style({
-        stroke: new ol.style.Stroke({
+let interactionSelect = new Select({
+    style: new Style({
+        stroke: new Stroke({
             color: '#FF2828'
         })
     })
 });
 
-let interactionSnap = new ol.interaction.Snap({
+let interactionSnap = new Snap({
     source: layerWFS.getSource()
 });
 
-const raster = new ol.layer.Tile({
-    source: new ol.source.OSM({
+const raster = TileLayer ({
+    source: new OSM({
         url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
         opaque: false,
         attributions: []
     })
 });
 
-const map = new ol.Map({
+const map = new Map({
     target: 'map',
     controls: [],
     interactions: [
         interactionSelectPointerMove,
-        new ol.interaction.MouseWheelZoom(),
-        new ol.interaction.DragPan()
+        new MouseWheelZoom(),
+        new DragPan()
     ],
     layers: [
         raster,
         layerWFS
     ],
-    view: new ol.View({
+    view: new View({
         projection: projection,
-        center: ol.proj.transform([14.80, 40.80], 'EPSG:4326', 'EPSG:3857'),
+        center: transform([14.80, 40.80], 'EPSG:4326', 'EPSG:3857'),
         maxZoom: 19,
         zoom: 9
     })
@@ -160,7 +180,7 @@ $('button').click(function () {
 
         case 'btnEdit':
             map.addInteraction(interactionSelect);
-            interaction = new ol.interaction.Modify({
+            interaction = new Modify({
                 features: interactionSelect.getFeatures()
             });
             map.addInteraction(interaction);
@@ -177,15 +197,15 @@ $('button').click(function () {
                     delete dirty[f.getId()];
                     var featureProperties = f.getProperties();
                     delete featureProperties.boundedBy;
-                    var clone = new ol.Feature(featureProperties);
+                    var clone = new Feature(featureProperties);
                     clone.setId(f.getId());
                     transactWFS('update', clone);
                 }
             });
             break;
 
         case 'btnPoint':
-            interaction = new ol.interaction.Draw({
+            interaction = new Draw({
                 type: 'Point',
                 source: layerWFS.getSource()
             });
@@ -196,7 +216,7 @@ $('button').click(function () {
             break;
 
         case 'btnLine':
-            interaction = new ol.interaction.Draw({
+            interaction = new Draw({
                 type: 'LineString',
                 source: layerWFS.getSource()
             });
@@ -207,7 +227,7 @@ $('button').click(function () {
             break;
 
         case 'btnArea':
-            interaction = new ol.interaction.Draw({
+            interaction = new Draw({
                 type: 'Polygon',
                 source: layerWFS.getSource()
             });
@@ -218,7 +238,7 @@ $('button').click(function () {
             break;
 
         case 'btnDelete':
-            interaction = new ol.interaction.Select();
+            interaction = new Select();
             interaction.getFeatures().on('add', function (e) {
                 transactWFS('delete', e.target.item(0));
                 interactionSelectPointerMove.getFeatures().clear();