draw states

catalog/static/js/dataRetrieval.js

@@ -61,16 +61,16 @@ $(document).ready(function () {
            },
            dataType: 'json',
            success: function(data) {
-               // console.log("DATA: ", data.polygonList);
-               // data.forEach(function(polygon) {
-               //     console.log(polygon);
-               //     // Create a new <option> element
-               //     var option = document.createElement('option');
-               //     // Set the value using the item in the JSON array
-               //     option.value = polygon.city + " " + polygon.state;
-               //     // Add the <option> element to the <datalist>.
-               //     dataList.appendChild(option);
-               // });
+               if (data.polygonList.length > 0) {
+                var polygon = data.polygonList[0]; // todos los posibles valores para una ciudad
+                var coordinates = polygon.geojson.geometry.coordinates;
+                console.log("DATA: ", polygon);
+
+                coordinates.forEach(coor => {
+                  osmap.addPolygon(coor[0]);
+                })
+               }
+               
                $('#ajax-input').autocomplete({
                    source: data.polygonList,
                    minLength: 3

catalog/static/js/openLayers4.js

@@ -85,23 +85,28 @@ OpenStreetMapsClass.prototype.geolocation = function()
  *	Draw a polygon in the map
  *	@param jsonObj Longitude
  */
-OpenStreetMapsClass.prototype.addPolygon = function(jsonObj)
+OpenStreetMapsClass.prototype.addPolygon = function(coords)
 {
+	// formar coords
 	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(',');
+	for (var index in coords) {
+		var c = coords[index];
 		polyCoords.push(ol.proj.fromLonLat([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:3857', 'EPSG:4326'));
 	}
 
+	//todo: remove older features in map, if there is a feature
+	this.vectorLayer.getSource().clear();
+
+	// create feature
 	var feature = new ol.Feature({
 	    geometry: new ol.geom.Polygon([polyCoords])
 	})
 
+	// add feature to map with zoom animation
 	this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
 	this.vectorLayer.getSource().addFeature(feature);
 
+	// show coords
 	document.getElementById("id_polygon").value = feature.getGeometry().clone().transform( 'EPSG:3857', 'EPSG:4326').getCoordinates();
 }
 //------------------------------------------------------------------------------

catalog/views.py

@@ -53,7 +53,40 @@ def productList(request):
 class SearchSubmitView(View):
     template = 'map.html'
     # template = 'search_submit.html'
-    state_parser = {'31': "Yucatán"}
+    state_parser = {
+        '01': "Aguascalientes",
+        '02': "Baja California",
+        '03': "Baja California Sur",
+        '04': "Campeche",
+        '05': "Chiapas",
+        '06': "Chihuahua",
+        '07': "Ciudad de México",
+        '08': "Coahuila",
+        '09': "Colima",
+        '10': "Durango",
+        '11': "Guanajuato",
+        '12': "Guerrero",
+        '13': "Hidalgo",
+        '14': "Jalisco",
+        '15': "México",
+        '16': "Michoacán",
+        '17': "Morelos",
+        '18': "Nayarit",
+        '19': "Nuevo León",
+        '20': "Oaxaca",
+        '21': "Puebla",
+        '22': "Querétaro",
+        '23': "Quintana Roo",
+        '24': "San Luis Potosí",
+        '25': "Sinaloa",
+        '26': "Sonora",
+        '27': "Tabasco",
+        '28': "Tamaulipas",
+        '29': "Tlaxcala",
+        '30': "Veracruz",
+        '31': "Yucatán",
+        '32': "Zacatecas"
+    }
 
     def post(self, request):
         template = loader.get_template(self.template)