draw the biggest polygon and more stuff

catalog/static/js/dataRetrieval.js

@@ -55,7 +55,6 @@ var makeRequest = function (value) {
         },
         dataType: 'json',
         success: function(data) {
-            console.log("DATA: ", data.polygonList);
             polygonList = data.polygonList;
             
             while (pol_element.firstChild) {
@@ -75,9 +74,19 @@ var makeRequest = function (value) {
 };
 
 function drawPolygon(element) {
-    polygonList.forEach(function (pol) {
-        if (pol.id === element.id) {
-            console.log(pol);
+    polygonList.forEach(function (polygon) {
+        if (polygon.id === element.id) {
+          // remove prev polygon
+          osmap.removePolygon();
+
+          // format coords to draw
+          var coords = osmap.formatCoords(polygon.geojson.geometry.coordinates);
+
+          // get the biggest area
+          var biggest = osmap.getBiggestPolygon(coords);
+
+          // draw coords
+          osmap.addPolygon(biggest);
         }
     })
 }
@@ -138,7 +147,6 @@ $(document).ready(function () {
             
             return
         }
-        console.log(value);
         // console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value);
         makeRequest(value);
         // $.ajax({

catalog/static/js/openLayers4.js

@@ -87,29 +87,71 @@ OpenStreetMapsClass.prototype.geolocation = function()
  */
 OpenStreetMapsClass.prototype.addPolygon = function(coords)
 {
-	// formar coords
-	var polyCoords = [];
-	for (var index in coords) {
-		var c = coords[index];
-		polyCoords.push(ol.proj.fromLonLat([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:3857', 'EPSG:4326'));
-	}
-
-	// remove previous layers
-	this.vectorLayer.getSource().clear();
-
 	// create feature
 	var feature = new ol.Feature({
-	    geometry: new ol.geom.Polygon([polyCoords])
+	    geometry: new ol.geom.Polygon(coords)
 	})
 
-	// add feature to map with zoom animation
+	// fit zoom with animation
 	this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
+
+	// add feature to map
 	this.vectorLayer.getSource().addFeature(feature);
 
 	// show coords
 	document.getElementById("id_polygon").value = feature.getGeometry().clone().transform( 'EPSG:3857', 'EPSG:4326').getCoordinates();
 }
 //------------------------------------------------------------------------------
+/**
+ *	calculate the area of each polygon and return the coords of the biggest polygon
+ *	@param coords polygons coords
+ *	@return biggest coords of the biggest polygon
+ */
+OpenStreetMapsClass.prototype.getBiggestPolygon = function(coords)
+{
+	if (coords.length <= 1) { return coords; }
+
+	// calculate areas
+	var areas = [];
+	for (var index in coords) {
+		var polygon = new ol.geom.Polygon([coords[index]]);
+		var area = ol.Sphere.getArea(polygon);
+		areas.push(area);
+	}
+
+	// get coords with max area
+	var max = Math.max.apply(null, areas);
+	var biggest = coords[areas.indexOf(max)];
+
+	return [biggest];
+}
+//------------------------------------------------------------------------------
+/**
+ *	format database coords to openlayers coords
+ *	@param coords database coords array
+ *	@return formatCoords coords with correct format
+ */
+OpenStreetMapsClass.prototype.formatCoords = function(coords)
+{
+	var formatCoords = [];
+
+	// algunos municipios tienes regiones separadas (campeche tiene 4, merida tiene 1)
+	for (var index = coords.length - 1; index >= 0; index--) {
+		var regionCoords = [];
+		var region = coords[index][0];
+
+		// se formatea las coordenadas de una region
+		for (var regionIndex = region.length - 1; regionIndex >= 0; regionIndex--) {
+			var c = region[regionIndex];
+			regionCoords.push(ol.proj.fromLonLat([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:3857', 'EPSG:4326'));
+		}
+
+		formatCoords.push(regionCoords);
+	}
+
+	return formatCoords;
+}
+//------------------------------------------------------------------------------
 /**
  *	set value in input with wkt format
  * 	POLYGON ((30 10, 40 40, 20 40, 10 20, 30 10))
@@ -121,6 +163,14 @@ OpenStreetMapsClass.prototype.setPolygonInputValue = function(coords)
 	// todo
 }
 //------------------------------------------------------------------------------
+/**
+ *	delete current polygon in map
+ */
+OpenStreetMapsClass.prototype.removePolygon = function()
+{
+	this.vectorLayer.getSource().clear();
+}
+//------------------------------------------------------------------------------
 /**
  *	@param lng Longitude
  *	@param lat Latitude