Made MapWidget a JS class.

1 files changed, 19 insertions, 22 deletions

diff --git a/django/contrib/gis/static/gis/js/OLMapWidget.js b/django/contrib/gis/static/gis/js/OLMapWidget.js
index 69dfa71a5b..9dea7d05aa 100644
--- a/django/contrib/gis/static/gis/js/OLMapWidget.js
+++ b/django/contrib/gis/static/gis/js/OLMapWidget.js
@@ -36,10 +36,8 @@ function GeometryTypeControl(opt_options) {
 ol.inherits(GeometryTypeControl, ol.control.Control);
 
 // TODO: allow deleting individual features (#8972)
-{
-    const jsonFormat = new ol.format.GeoJSON();
-
-    function MapWidget(options) {
+class MapWidget {
+    constructor(options) {
         this.map = null;
         this.interactions = {draw: null, modify: null};
         this.typeChoices = false;
@@ -92,6 +90,7 @@ ol.inherits(GeometryTypeControl, ol.control.Control);
 
         const initial_value = document.getElementById(this.options.id).value;
         if (initial_value) {
+            const jsonFormat = new ol.format.GeoJSON();
             const features = jsonFormat.readFeatures('{"type": "Feature", "geometry": ' + initial_value + '}');
             const extent = ol.extent.createEmpty();
             features.forEach(function(feature) {
@@ -117,18 +116,17 @@ ol.inherits(GeometryTypeControl, ol.control.Control);
         this.ready = true;
     }
 
-    MapWidget.prototype.createMap = function() {
-        const map = new ol.Map({
+    createMap() {
+        return new ol.Map({
             target: this.options.map_id,
             layers: [this.options.base_layer],
             view: new ol.View({
                 zoom: this.options.default_zoom
             })
         });
-        return map;
-    };
+    }
 
-    MapWidget.prototype.createInteractions = function() {
+    createInteractions() {
         // Initialize the modify interaction
         this.interactions.modify = new ol.interaction.Modify({
             features: this.featureCollection,
@@ -156,17 +154,17 @@ ol.inherits(GeometryTypeControl, ol.control.Control);
 
         this.map.addInteraction(this.interactions.draw);
         this.map.addInteraction(this.interactions.modify);
-    };
+    }
 
-    MapWidget.prototype.defaultCenter = function() {
+    defaultCenter() {
         const center = [this.options.default_lon, this.options.default_lat];
         if (this.options.map_srid) {
             return ol.proj.transform(center, 'EPSG:4326', this.map.getView().getProjection());
         }
         return center;
-    };
+    }
 
-    MapWidget.prototype.enableDrawing = function() {
+    enableDrawing() {
         this.interactions.draw.setActive(true);
         if (this.typeChoices) {
             // Show geometry type icons
@@ -175,9 +173,9 @@ ol.inherits(GeometryTypeControl, ol.control.Control);
                 divs[i].style.visibility = "visible";
             }
         }
-    };
+    }
 
-    MapWidget.prototype.disableDrawing = function() {
+    disableDrawing() {
         if (this.interactions.draw) {
             this.interactions.draw.setActive(false);
             if (this.typeChoices) {
@@ -188,16 +186,16 @@ ol.inherits(GeometryTypeControl, ol.control.Control);
                 }
             }
         }
-    };
+    }
 
-    MapWidget.prototype.clearFeatures = function() {
+    clearFeatures() {
         this.featureCollection.clear();
         // Empty textarea widget
         document.getElementById(this.options.id).value = '';
         this.enableDrawing();
-    };
+    }
 
-    MapWidget.prototype.serializeFeatures = function() {
+    serializeFeatures() {
         // Three use cases: GeometryCollection, multigeometries, and single geometry
         let geometry = null;
         const features = this.featureOverlay.getSource().getFeatures();
@@ -228,8 +226,7 @@ ol.inherits(GeometryTypeControl, ol.control.Control);
                 geometry = features[0].getGeometry();
             }
         }
+        const jsonFormat = new ol.format.GeoJSON();
         document.getElementById(this.options.id).value = jsonFormat.writeGeometry(geometry);
-    };
-
-    window.MapWidget = MapWidget;
+    }
 }