polygon list view in map

catalog/static/css/body.css

@@ -23,38 +23,92 @@ body
     background-color:  #ec5a32;
 }
 
-ul.no-bullet {
-    list-style: none;
-    text-align: left;
-    padding: 0px;
-    margin: 0px;
-}
-
+/*--------option list classes--------*/
 #option-list {
     margin-top: 3px;
     display: none;
     position: absolute;
     border-radius: 3px;
     background-color: white;
-    width: 208px;
-    max-height: 173px;
+    /*width: 208px;*/
+    /*max-height: 173px;*/
+    width: 400px;
+    max-height: 541px;
     overflow: auto;
     left: 26px;
     z-index: 1;
 }
 
+ul.no-bullet {
+    list-style: none;
+    text-align: left;
+    padding: 0px;
+    margin: 0px;
+}
+
 li.pol {
-    font: bold 13px Helvetica;
+    /*font: bold 13px Helvetica;*/
+    /*text-align: center;*/
+    /*text-decoration: none;*/
+    /*background-color: #EEEEEE;*/
+    /*color: #333333;*/
+    padding: 5px;
+    /*border-radius: 3px;*/
+    /*border-top: 1px solid #CCCCCC;*/
+    /*border-right: 1px solid #333333;*/
+    /*border-bottom: 1px solid #333333;*/
+    /*border-left: 1px solid #CCCCCC;*/
+    /*margin: 3px;*/
+    cursor: pointer;
+}
+
+.box-header.with-border {
+    border-bottom: 1px solid #dc7828;
     text-align: center;
-    text-decoration: none;
-    background-color: #EEEEEE;
-    color: #333333;
-    padding: 7px;
+}
+
+.box.box-solid {
+    border: 1px solid #dc7828;
+}
+
+.box.box-solid.box-warning>.box-header {
+    color: #ffffff;
+    background: #dc7828;
+    background-color: #dc7828
+}
+
+.box {
+    position: relative;
     border-radius: 3px;
-    border-top: 1px solid #CCCCCC;
-    border-right: 1px solid #333333;
-    border-bottom: 1px solid #333333;
-    border-left: 1px solid #CCCCCC;
-    margin: 3px;
-    cursor: pointer;
+    background: #ffffff;
+    border-top: 3px solid #d2d6de;
+    margin-bottom: 0px;
+    width: 100%;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.box-body {
+    /*border-top-left-radius: 0;*/
+    /*border-top-right-radius: 0;*/
+    /*border-bottom-right-radius: 3px;*/
+    /*border-bottom-left-radius:3px;*/
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 10px;
+}
+
+.pol-title {
+    font: bold 15px Helvetica;
+    text-decoration: none;
+}
+
+.pol-body {
+    font: 11px Helvetica;
+}
+
+.pol-src {
+    font: 10px Helvetica;
+    font-style: italic;
+    padding-left: 280px;
 }
+/*--------option list classes--------*/
\ No newline at end of file

catalog/static/js/dataRetrieval.js

@@ -62,7 +62,26 @@ var makeRequest = function (value) {
             }
 
             data.polygonList.forEach(function (polygon) {
-                $('#polygon-list').append('<li onclick="drawPolygon(this)" id="'+ polygon.id +'" class="pol">' + polygon.city + ", " + polygon.state + '</li>');
+                // '<li onclick="drawPolygon(this)" id="'+ polygon.id +'" class="pol">' + polygon.city + ", " + polygon.state + '</li>'
+                var html_element = '<li id="'+ polygon.id +'" onclick="drawPolygon(this)" class="pol">' +
+                                       '<div class="box box-warning box-solid">'+
+                                           '<div class="box-header with-border">'+
+                                               '<span class="pol-title">'+
+                                                   polygon.city + ', ' + polygon.state +
+                                               '</span>'+
+                                           '</div>'+
+                                           '<div class="box-body">'+
+                                               '<span class="pol-body">'+
+                                                   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' +
+                                               '</span><br>'+
+                                               '<div class="pol-src">'+
+                                                   'Fuente: INEGI.' +
+                                               '</div>'+
+                                           '</div>'+
+                                       '</div>'+
+                                   '</li>';
+
+                $('#polygon-list').append(html_element);
             });
 
             if (OPT_LIST_IS_HIDDEN) {
@@ -85,7 +104,7 @@ function drawPolygon(element) {
           // get the biggest area
           var biggest = osmap.getBiggestPolygon(coords);
 
-          // draw coords
+          // draw coordsR
           osmap.addPolygon(biggest);
         }
     })

catalog/views.py

@@ -55,8 +55,8 @@ class SearchSubmitView(View):
     # template = 'search_submit.html'
     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",
+        '05': "Coahuila",        '06': "Colima",          '07': "Chiapas",             '08': "Chihuahua",
+        '09': "Ciudad de México",'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í",