draw a test polygon

catalog/static/js/openLayers4.js

@@ -81,6 +81,30 @@ OpenStreetMapsClass.prototype.geolocation = function()
 	}
 }
 //------------------------------------------------------------------------------
+/**
+ *	Draw a polygon in the map
+ *	@param jsonObj Longitude
+ */
+OpenStreetMapsClass.prototype.addPolygon = function(jsonObj)
+{
+	var polyCoords = [];
+	var coords = "-93.69140625,21.371244370618314 -91.845703125,26.273714024406416 -84.462890625,21.207458730482657 -87.978515625,17.47643219719552 -93.69140625,21.371244370618314".split(' ');
+
+	for (var i in coords) {
+		var c = coords[i].split(',');
+		polyCoords.push(ol.proj.fromLonLat([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:3857', 'EPSG:4326'));
+	}
+
+	var feature = new ol.Feature({
+	    geometry: new ol.geom.Polygon([polyCoords])
+	})
+
+	this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
+	this.vectorLayer.getSource().addFeature(feature);
+
+	document.getElementById("id_polygon").value = feature.getGeometry().clone().transform( 'EPSG:3857', 'EPSG:4326').getCoordinates();
+}
+//------------------------------------------------------------------------------
 /**
  *	@param lng Longitude
  *	@param lat Latitude

catalog/templates/map.html

@@ -244,6 +244,8 @@
 		osmap.geolocation();
     osmap.addInteraction();
 
-
+    setTimeout(() => {
+      osmap.addPolygon();
+    },5000);
 	</script>
 {% endblock %}