mason/breeders_toolbox/location_map.mas

   1
   2 <%args>
   3 $user_id => undef
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => ['leaflet', 'esri-leaflet', 'esri-leaflet-geocoder-debug', 'leaflet_extra-markers_min', 'jquery.dstk'] &>
   7 <center><p><i> Add a new location by clicking on the map. Or select an exisiting location to view details and options.</i></p></center>
   8 <br>
   9 <div id="location_map" style="height: 540px;"></div>
  10
  11 <div class="modal fade" id="store_location_dialog" name="store_location_dialog" tabindex="-1" role="dialog" aria-labelledby="storeLocationDialog">
  12   <div class="modal-dialog" role="document">
  13     <div class="modal-content">
  14       <div class="modal-header">
  15         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  16         <h4 class="modal-title" id="storeLocationDialog">Location Details</h4>
  17       </div>
  18       <div class="modal-body">
  19         <div class="container-fluid">
  20           <form class="form-horizontal" role="form" name="store_location_form" id="store_location_form">
  21         <div class="form-group" id="location_id" style="display: none"></div>
  22             <div class="form-group">
  23               <label class="col-sm-2 control-label">Name: </label>
  24               <div class="col-sm-10">
  25                 <input class="form-control" name="location_name" id="location_name" type="text" />
  26               </div>
  27             </div>
  28         <div class="form-group">
  29               <label class="col-sm-2 control-label">Abbreviation: </label>
  30               <div class="col-sm-10">
  31                 <input class="form-control" name="location_abbreviation" id="location_abbreviation" type="text" />
  32               </div>
  33             </div>
  34         <div class="form-group">
  35               <label class="col-sm-2 control-label">Country: </label>
  36               <div class="col-sm-10">
  37                   <select class="form-control" id="location_country" name="location_country">
  38                     <option value=""></option>
  39                     <option value="ABW">ABW Aruba </option>
  40                     <option value="AFG">AFG Afghanistan </option>
  41                     <option value="AGO">AGO Angola </option>
  42                     <option value="AIA">AIA Anguilla </option>
  43                     <option value="ALA">ALA Åland Islands </option>
  44                     <option value="ALB">ALB Albania </option>
  45                     <option value="AND">AND Andorra </option>
  46                     <option value="ANT">ANT Netherlands Antilles </option>
  47                     <option value="ARE">ARE United Arab Emirates </option>
  48                     <option value="ARG">ARG Argentina </option>
  49                     <option value="ARM">ARM Armenia </option>
  50                     <option value="ASM">ASM American Samoa </option>
  51                     <option value="ATA">ATA Antarctica </option>
  52                     <option value="ATF">ATF French Southern Territories </option>
  53                     <option value="ATG">ATG Antigua and Barbuda </option>
  54                     <option value="AUS">AUS Australia </option>
  55                     <option value="AUT">AUT Austria </option>
  56                     <option value="AZE">AZE Azerbaijan </option>
  57                     <option value="BDI">BDI Burundi </option>
  58                     <option value="BEL">BEL Belgium </option>
  59                     <option value="BEN">BEN Benin </option>
  60                     <option value="BFA">BFA Burkina Faso </option>
  61                     <option value="BGD">BGD Bangladesh </option>
  62                     <option value="BGR">BGR Bulgaria </option>
  63                     <option value="BHR">BHR Bahrain </option>
  64                     <option value="BHS">BHS Bahamas </option>
  65                     <option value="BIH">BIH Bosnia and Herzegovina </option>
  66                     <option value="BLM">BLM Saint Barthélemy </option>
  67                     <option value="BLR">BLR Belarus </option>
  68                     <option value="BLZ">BLZ Belize </option>
  69                     <option value="BMU">BMU Bermuda </option>
  70                     <option value="BOL">BOL Bolivia, Plurinational State of </option>
  71                     <option value="BRA">BRA Brazil </option>
  72                     <option value="BRB">BRB Barbados </option>
  73                     <option value="BRN">BRN Brunei Darussalam </option>
  74                     <option value="BTN">BTN Bhutan </option>
  75                     <option value="BVT">BVT Bouvet Island </option>
  76                     <option value="BWA">BWA Botswana </option>
  77                     <option value="CAF">CAF Central African Republic </option>
  78                     <option value="CAN">CAN Canada </option>
  79                     <option value="CCK">CCK Cocos (Keeling) Islands </option>
  80                     <option value="CHE">CHE Switzerland </option>
  81                     <option value="CHL">CHL Chile </option>
  82                     <option value="CHN">CHN China </option>
  83                     <option value="CIV">CIV Côte d'Ivoire </option>
  84                     <option value="CMR">CMR Cameroon </option>
  85                     <option value="COD">COD Congo, the Democratic Republic of the </option>
  86                     <option value="COG">COG Congo </option>
  87                     <option value="COK">COK Cook Islands </option>
  88                     <option value="COL">COL Colombia </option>
  89                     <option value="COM">COM Comoros </option>
  90                     <option value="CPV">CPV Cape Verde </option>
  91                     <option value="CRI">CRI Costa Rica </option>
  92                     <option value="CUB">CUB Cuba </option>
  93                     <option value="CXR">CXR Christmas Island </option>
  94                     <option value="CYM">CYM Cayman Islands </option>
  95                     <option value="CYP">CYP Cyprus </option>
  96                     <option value="CZE">CZE Czech Republic </option>
  97                     <option value="DEU">DEU Germany </option>
  98                     <option value="DJI">DJI Djibouti </option>
  99                     <option value="DMA">DMA Dominica </option>
 100                     <option value="DNK">DNK Denmark </option>
 101                     <option value="DOM">DOM Dominican Republic </option>
 102                     <option value="DZA">DZA Algeria </option>
 103                     <option value="ECU">ECU Ecuador </option>
 104                     <option value="EGY">EGY Egypt </option>
 105                     <option value="ERI">ERI Eritrea </option>
 106                     <option value="ESH">ESH Western Sahara </option>
 107                     <option value="ESP">ESP Spain </option>
 108                     <option value="EST">EST Estonia </option>
 109                     <option value="ETH">ETH Ethiopia </option>
 110                     <option value="FIN">FIN Finland </option>
 111                     <option value="FJI">FJI Fiji </option>
 112                     <option value="FLK">FLK Falkland Islands (Malvinas) </option>
 113                     <option value="FRA">FRA France </option>
 114                     <option value="FRO">FRO Faroe Islands </option>
 115                     <option value="FSM">FSM Micronesia, Federated States of </option>
 116                     <option value="GAB">GAB Gabon </option>
 117                     <option value="GBR">GBR United Kingdom </option>
 118                     <option value="GEO">GEO Georgia </option>
 119                     <option value="GGY">GGY Guernsey </option>
 120                     <option value="GHA">GHA Ghana </option>
 121                     <option value="GIB">GIB Gibraltar </option>
 122                     <option value="GIN">GIN Guinea </option>
 123                     <option value="GLP">GLP Guadeloupe </option>
 124                     <option value="GMB">GMB Gambia </option>
 125                     <option value="GNB">GNB Guinea-Bissau </option>
 126                     <option value="GNQ">GNQ Equatorial Guinea </option>
 127                     <option value="GRC">GRC Greece </option>
 128                     <option value="GRD">GRD Grenada </option>
 129                     <option value="GRL">GRL Greenland </option>
 130                     <option value="GTM">GTM Guatemala </option>
 131                     <option value="GUF">GUF French Guiana </option>
 132                     <option value="GUM">GUM Guam </option>
 133                     <option value="GUY">GUY Guyana </option>
 134                     <option value="HKG">HKG Hong Kong </option>
 135                     <option value="HMD">HMD Heard Island and McDonald Islands </option>
 136                     <option value="HND">HND Honduras </option>
 137                     <option value="HRV">HRV Croatia </option>
 138                     <option value="HTI">HTI Haiti </option>
 139                     <option value="HUN">HUN Hungary </option>
 140                     <option value="IDN">IDN Indonesia </option>
 141                     <option value="IMN">IMN Isle of Man </option>
 142                     <option value="IND">IND India </option>
 143                     <option value="IOT">IOT British Indian Ocean Territory </option>
 144                     <option value="IRL">IRL Ireland </option>
 145                     <option value="IRN">IRN Iran, Islamic Republic of </option>
 146                     <option value="IRQ">IRQ Iraq </option>
 147                     <option value="ISL">ISL Iceland </option>
 148                     <option value="ISR">ISR Israel </option>
 149                     <option value="ITA">ITA Italy </option>
 150                     <option value="JAM">JAM Jamaica </option>
 151                     <option value="JEY">JEY Jersey </option>
 152                     <option value="JOR">JOR Jordan </option>
 153                     <option value="JPN">JPN Japan </option>
 154                     <option value="KAZ">KAZ Kazakhstan </option>
 155                     <option value="KEN">KEN Kenya </option>
 156                     <option value="KGZ">KGZ Kyrgyzstan </option>
 157                     <option value="KHM">KHM Cambodia </option>
 158                     <option value="KIR">KIR Kiribati </option>
 159                     <option value="KNA">KNA Saint Kitts and Nevis </option>
 160                     <option value="KOR">KOR Korea, Republic of </option>
 161                     <option value="KWT">KWT Kuwait </option>
 162                     <option value="LAO">LAO Lao People's Democratic Republic </option>
 163                     <option value="LBN">LBN Lebanon </option>
 164                     <option value="LBR">LBR Liberia </option>
 165                     <option value="LBY">LBY Libyan Arab Jamahiriya </option>
 166                     <option value="LCA">LCA Saint Lucia </option>
 167                     <option value="LIE">LIE Liechtenstein </option>
 168                     <option value="LKA">LKA Sri Lanka </option>
 169                     <option value="LSO">LSO Lesotho </option>
 170                     <option value="LTU">LTU Lithuania </option>
 171                     <option value="LUX">LUX Luxembourg </option>
 172                     <option value="LVA">LVA Latvia </option>
 173                     <option value="MAC">MAC Macao </option>
 174                     <option value="MAF">MAF Saint Martin (French part) </option>
 175                     <option value="MAR">MAR Morocco </option>
 176                     <option value="MCO">MCO Monaco </option>
 177                     <option value="MDA">MDA Moldova, Republic of </option>
 178                     <option value="MDG">MDG Madagascar </option>
 179                     <option value="MDV">MDV Maldives </option>
 180                     <option value="MEX">MEX Mexico </option>
 181                     <option value="MHL">MHL Marshall Islands </option>
 182                     <option value="MKD">MKD Macedonia, the former Yugoslav Republic of </option>
 183                     <option value="MLI">MLI Mali </option>
 184                     <option value="MLT">MLT Malta </option>
 185                     <option value="MMR">MMR Myanmar </option>
 186                     <option value="MNE">MNE Montenegro </option>
 187                     <option value="MNG">MNG Mongolia </option>
 188                     <option value="MNP">MNP Northern Mariana Islands </option>
 189                     <option value="MOZ">MOZ Mozambique </option>
 190                     <option value="MRT">MRT Mauritania </option>
 191                     <option value="MSR">MSR Montserrat </option>
 192                     <option value="MTQ">MTQ Martinique </option>
 193                     <option value="MUS">MUS Mauritius </option>
 194                     <option value="MWI">MWI Malawi </option>
 195                     <option value="MYS">MYS Malaysia </option>
 196                     <option value="MYT">MYT Mayotte </option>
 197                     <option value="NAM">NAM Namibia </option>
 198                     <option value="NCL">NCL New Caledonia </option>
 199                     <option value="NER">NER Niger </option>
 200                     <option value="NFK">NFK Norfolk Island </option>
 201                     <option value="NGA">NGA Nigeria </option>
 202                     <option value="NIC">NIC Nicaragua </option>
 203                     <option value="NIU">NIU Niue </option>
 204                     <option value="NLD">NLD Netherlands </option>
 205                     <option value="NOR">NOR Norway </option>
 206                     <option value="NPL">NPL Nepal </option>
 207                     <option value="NRU">NRU Nauru </option>
 208                     <option value="NZL">NZL New Zealand </option>
 209                     <option value="OMN">OMN Oman </option>
 210                     <option value="PAK">PAK Pakistan </option>
 211                     <option value="PAN">PAN Panama </option>
 212                     <option value="PCN">PCN Pitcairn </option>
 213                     <option value="PER">PER Peru </option>
 214                     <option value="PHL">PHL Philippines </option>
 215                     <option value="PLW">PLW Palau </option>
 216                     <option value="PNG">PNG Papua New Guinea </option>
 217                     <option value="POL">POL Poland </option>
 218                     <option value="PRI">PRI Puerto Rico </option>
 219                     <option value="PRK">PRK Korea, Democratic People's Republic of </option>
 220                     <option value="PRT">PRT Portugal </option>
 221                     <option value="PRY">PRY Paraguay </option>
 222                     <option value="PSE">PSE Palestinian Territory, Occupied </option>
 223                     <option value="PYF">PYF French Polynesia </option>
 224                     <option value="QAT">QAT Qatar </option>
 225                     <option value="REU">REU Réunion </option>
 226                     <option value="ROU">ROU Romania </option>
 227                     <option value="RUS">RUS Russian Federation </option>
 228                     <option value="RWA">RWA Rwanda </option>
 229                     <option value="SAU">SAU Saudi Arabia </option>
 230                     <option value="SDN">SDN Sudan </option>
 231                     <option value="SEN">SEN Senegal </option>
 232                     <option value="SGP">SGP Singapore </option>
 233                     <option value="SGS">SGS South Georgia and the South Sandwich Islands </option>
 234                     <option value="SHN">SHN Saint Helena, Ascension and Tristan da Cunha </option>
 235                     <option value="SJM">SJM Svalbard and Jan Mayen </option>
 236                     <option value="SLB">SLB Solomon Islands </option>
 237                     <option value="SLE">SLE Sierra Leone </option>
 238                     <option value="SLV">SLV El Salvador </option>
 239                     <option value="SMR">SMR San Marino </option>
 240                     <option value="SOM">SOM Somalia </option>
 241                     <option value="SPM">SPM Saint Pierre and Miquelon </option>
 242                     <option value="SRB">SRB Serbia </option>
 243                     <option value="STP">STP Sao Tome and Principe </option>
 244                     <option value="SUR">SUR Suriname </option>
 245                     <option value="SVK">SVK Slovakia </option>
 246                     <option value="SVN">SVN Slovenia </option>
 247                     <option value="SWE">SWE Sweden </option>
 248                     <option value="SWZ">SWZ Swaziland </option>
 249                     <option value="SYC">SYC Seychelles </option>
 250                     <option value="SYR">SYR Syrian Arab Republic </option>
 251                     <option value="TCA">TCA Turks and Caicos Islands </option>
 252                     <option value="TCD">TCD Chad </option>
 253                     <option value="TGO">TGO Togo </option>
 254                     <option value="THA">THA Thailand </option>
 255                     <option value="TJK">TJK Tajikistan </option>
 256                     <option value="TKL">TKL Tokelau </option>
 257                     <option value="TKM">TKM Turkmenistan </option>
 258                     <option value="TLS">TLS Timor-Leste </option>
 259                     <option value="TON">TON Tonga </option>
 260                     <option value="TTO">TTO Trinidad and Tobago </option>
 261                     <option value="TUN">TUN Tunisia </option>
 262                     <option value="TUR">TUR Turkey </option>
 263                     <option value="TUV">TUV Tuvalu </option>
 264                     <option value="TWN">TWN Taiwan, Province of China </option>
 265                     <option value="TZA">TZA Tanzania, United Republic of </option>
 266                     <option value="UGA">UGA Uganda </option>
 267                     <option value="UKR">UKR Ukraine </option>
 268                     <option value="UMI">UMI United States Minor Outlying Islands </option>
 269                     <option value="URY">URY Uruguay </option>
 270                     <option value="USA">USA United States </option>
 271                     <option value="UZB">UZB Uzbekistan </option>
 272                     <option value="VAT">VAT Holy See (Vatican City State) </option>
 273                     <option value="VCT">VCT Saint Vincent and the Grenadines </option>
 274                     <option value="VEN">VEN Venezuela, Bolivarian Republic of </option>
 275                     <option value="VGB">VGB Virgin Islands, British </option>
 276                     <option value="VIR">VIR Virgin Islands, U.S. </option>
 277                     <option value="VNM">VNM Viet Nam </option>
 278                     <option value="VUT">VUT Vanuatu </option>
 279                     <option value="WLF">WLF Wallis and Futuna </option>
 280                     <option value="WSM">WSM Samoa </option>
 281                     <option value="YEM">YEM Yemen </option>
 282                     <option value="ZAF">ZAF South Africa </option>
 283                     <option value="ZMB">ZMB Zambia </option>
 284                     <option value="ZWE">ZWE Zimbabwe</option>
 285                   </select>
 286               </div>
 287             </div>
 288         <div class="form-group">
 289               <label class="col-sm-2 control-label">Program: </label>
 290               <div class="col-sm-10" id="breeding_program" name="breeding_program">
 291               </div>
 292             </div>
 293         <div class="form-group">
 294               <label class="col-sm-2 control-label">Type: </label>
 295               <div class="col-sm-10">
 296                   <select class="form-control" id="location_type" name="location_type">
 297                       <option value=""></option>
 298                       <option value="Farm">Farm</option>
 299                       <option value="Field">Field</option>
 300                       <option value="Greenhouse">Greenhouse</option>
 301                       <option value="Screenhouse">Screenhouse</option>
 302                       <option value="Lab">Lab</option>
 303                       <option value="Storage">Storage</option>
 304                       <option value="Other">Other</option>
 305                   </select>
 306               </div>
 307             </div>
 308       <div class="form-group">
 309               <label class="col-sm-2 control-label">Latitude: </label>
 310               <div class="col-sm-10">
 311     <input class="form-control" name="location_latitude" id="location_latitude" type="text" size="4"/>
 312               </div>
 313       </div>
 314             <div class="form-group">
 315               <label class="col-sm-2 control-label">Longitude: </label>
 316               <div class="col-sm-10">
 317                 <input class="form-control" name="location_longitude" id="location_longitude" type="text" size="4"/>
 318               </div>
 319             </div>
 320             <div class="form-group">
 321               <label class="col-sm-2 control-label">Altitude (m): </label>
 322               <div class="col-sm-10">
 323                 <input class="form-control" name="location_altitude" id="location_altitude" type="text" size="4"/>
 324               </div>
 325             </div>
 326           </form>
 327         </div>
 328       </div>
 329       <div class="modal-footer">
 330         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 331         <button type="button" class="btn btn-primary" name="store_location_submit" id="store_location_submit">Store Location Details</button>
 332       </div>
 333     </div>
 334   </div>
 335 </div>
 336
 337 <script defer="defer">
 338
 339 jQuery(document).ready(function() {
 340
 341   $('#add_location_link').click( function() {
 342       $('#add_location_dialog').modal("show");
 343    });
 344
 345    get_select_box("breeding_programs", "breeding_program", {'empty':1, 'default':'please select'});
 346
 347    $('#store_location_submit').click( function(event) {
 348        event.preventDefault();
 349        var id= $('#location_id').val();
 350        var name = $('#location_name').val();
 351        name = name.trim();
 352        var abbreviation = $('#location_abbreviation').val();
 353        var country_code = $('#location_country').val();
 354        var country_text = $('#location_country option:selected').text();
 355        var country_name = country_text.replace(/^[^\s]+(.*)/, '$1').trim();
 356        var program = $('#breeding_program_select option:selected').text();
 357        var type = $('#location_type').val();
 358        var latitude = $('#location_latitude').val();
 359        var longitude = $('#location_longitude').val();
 360        var altitude = $('#location_altitude').val();
 361        //console.log("Location program to store is "+program);
 362        //console.log("Location name to store is "+name);
 363        //console.log("Location country name to store is "+country_name+" and country code is "+country_code);
 364
 365        if (name == '') { alert('A location name is required.');  return; }
 366
 367        $.ajax({
 368          type: 'POST',
 369          url: '/ajax/location/store',
 370          data: { 'id': id, 'name': name, 'abbreviation': abbreviation, 'country_name': country_name, 'country_code': country_code, 'program': program, 'type': type, 'latitude':latitude, 'longitude':longitude, 'altitude': altitude },
 371          success: function(response) {
 372                   if (response.error) { alert(response.error); }
 373                   else {
 374                       alert(response.success);
 375                       $('#store_location_dialog').modal("hide");
 376                       location.reload();
 377                   }
 378                  },
 379          error: function() { alert('An error occurred while storing the location details. Please try again later.'); }
 380        });
 381    });
 382
 383 });
 384
 385 function initialize_map (id, locationJSON, table) {
 386
 387     var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
 388            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
 389     });
 390
 391     var topomap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
 392         attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
 393     });
 394
 395     var streetmap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
 396         attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
 397     });
 398
 399     var baseMaps = {
 400         "Street (Default)": streetmap,
 401         "Topographical": topomap,
 402         "Satellite": satellite
 403     };
 404
 405     var location_layer = L.geoJSON(locationJSON, {
 406         pointToLayer: function (feature, latlng) {
 407            return L.marker(latlng, style(feature));
 408        },
 409        onEachFeature: onEachFeature
 410     });
 411
 412     var overlayMaps = {
 413         "Locations": location_layer
 414     };
 415
 416     var mymap = L.map( id, {
 417         layers: [streetmap, location_layer]
 418     });
 419
 420     var locateUser = L.Control.extend({
 421         onAdd: function (map) {
 422             var container = L.DomUtil.create('button', 'leaflet-bar leaflet-control leaflet-control-custom glyphicon glyphicon-map-marker');
 423
 424             container.style.backgroundColor = 'white';
 425             container.style.cursor = "pointer";
 426             container.title = 'Zoom to my location';
 427             container.style.width = '30px';
 428             container.style.height = '30px';
 429
 430             container.onclick = function(){
 431               map.locate({setView: true});
 432             }
 433             return container;
 434         }
 435     });
 436
 437     mymap.addControl(new locateUser({ position: 'topleft' }));
 438
 439     mymap.fitBounds(location_layer.getBounds());
 440     var layerControl = L.control.layers(baseMaps, overlayMaps, {position: 'bottomright'}).addTo(mymap);
 441     var scale = L.control.scale().addTo(mymap);
 442
 443     var popup = L.popup();
 444
 445     function onMapClick(e) {
 446         popup
 447             .setLatLng(e.latlng)
 448             .setContent(
 449                 'Add a new location here?<br><center><a href="javascript:;" onclick="add_from_map(\''+e.latlng.lat+','+e.latlng.lng+'\')">Add Location</a></center>'
 450             )
 451             .openOn(mymap);
 452     }
 453
 454     mymap.on('click', onMapClick);
 455
 456     var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
 457
 458     var searchControl = L.esri.Geocoding.geosearch({
 459         providers: [
 460           arcgisOnline,
 461           L.esri.Geocoding.featureLayerProvider({
 462             url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/gisday/FeatureServer/0/',
 463             searchFields: ['Name', 'Organization'],
 464             label: 'GIS Day Events',
 465             bufferRadius: 5000,
 466             formatSuggestion: function(feature){
 467               return feature.properties.Name + ' - ' + feature.properties.Organization;
 468             }
 469           })
 470       ],
 471       position: 'topright',
 472       expanded: true
 473     }).addTo(mymap);
 474
 475     table.on( 'draw.dt', function () {  // recreate location layer based on filtered table contents
 476         location_layer.clearLayers();
 477         var ids = {};
 478         table.column(0,  { search:'applied' } ).data().each(function(value, index) {
 479             ids[value] = true;
 480         });
 481         layerControl.removeLayer(location_layer);
 482         location_layer = L.geoJson(locationJSON, {
 483             filter: function(feature, layer) {
 484                 return ids[feature.properties.Id];
 485             },
 486             pointToLayer: function (feature, latlng) {
 487                return L.marker(latlng, style(feature));
 488            },
 489            onEachFeature: onEachFeature
 490         });
 491
 492         layerControl.addOverlay(location_layer, "Locations");
 493         location_layer.addTo(mymap);
 494         mymap.fitBounds(location_layer.getBounds());
 495     });
 496     return;
 497 }
 498
 499 function style(feature) {
 500     //console.log("Type of marker "+feature.properties.Name+" is "+feature.properties.Type);
 501
 502     var label = feature.properties.Abbreviation || feature.properties.Id;
 503     var farmMarker = L.ExtraMarkers.icon({
 504         icon: 'fa-number',
 505         // number: feature.properties.Id,
 506         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 507         markerColor: 'red',
 508         shape: 'circle',
 509         prefix: ''
 510     });
 511
 512     var fieldMarker = L.ExtraMarkers.icon({
 513         icon: 'fa-number',
 514         // number: feature.properties.Id,
 515         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 516         markerColor: 'orange',
 517         shape: 'circle',
 518         prefix: ''
 519     });
 520
 521     var defaultMarker = L.ExtraMarkers.icon({
 522         icon: 'fa-number',
 523         // number: feature.properties.Id,
 524         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 525         markerColor: 'cyan',
 526         shape: 'circle',
 527         prefix: ''
 528     });
 529
 530     var greenhouseMarker = L.ExtraMarkers.icon({
 531         icon: 'fa-number',
 532         // number: feature.properties.Id,
 533         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 534         markerColor: 'green-light',
 535         shape: 'penta',
 536         prefix: ''
 537     });
 538
 539     var screenhouseMarker = L.ExtraMarkers.icon({
 540         icon: 'fa-number',
 541         // number: feature.properties.Id,
 542         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 543         markerColor: 'white',
 544         shape: 'penta',
 545         prefix: ''
 546     });
 547
 548     var labMarker = L.ExtraMarkers.icon({
 549         icon: 'fa-number',
 550         // number: feature.properties.Id,
 551         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 552         markerColor: 'blue',
 553         shape: 'square',
 554         prefix: ''
 555     });
 556
 557     var storageMarker = L.ExtraMarkers.icon({
 558         icon: 'fa-number',
 559         // number: feature.properties.Id,
 560         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 561         markerColor: 'purple',
 562         shape: 'square',
 563         prefix: ''
 564     });
 565
 566     var otherMarker = L.ExtraMarkers.icon({
 567         icon: 'fa-number',
 568         // number: feature.properties.Id,
 569         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 570         markerColor: 'pink',
 571         shape: 'circle',
 572         prefix: ''
 573     });
 574
 575     switch (feature.properties.Type) {
 576         case 'Farm':   return { icon: farmMarker };
 577         case 'Field': return { icon: fieldMarker };
 578         case 'Greenhouse':   return { icon: greenhouseMarker };
 579         case 'Screenhouse':   return { icon: screenhouseMarker };
 580         case 'Lab':   return { icon: labMarker };
 581         case 'Storage':   return { icon: storageMarker };
 582         case 'Other':   return { icon: otherMarker };
 583         default:    return { icon: defaultMarker };
 584     }
 585 }
 586
 587 function onEachFeature(feature, layer) {
 588         // var keys = ["Id","Name","Abbreviation","Country","Program","Type","Latitude","Longitude","Altitude","Trials"];
 589         var keys = ["Abbreviation","Program","Type","Trials"];
 590         var popupContent = '<table class="table table-sm"><caption style="text-align: center;"><font id="'+feature.properties.Id+'_name" size="3" color="black">'+feature.properties.Name+'</font></caption><tbody>';
 591         for (var i = 0; i < keys.length; i++) {
 592             popupContent += '<tr><th>'+keys[i]+'</th><td>'+feature.properties[keys[i]]+'</td></tr>';
 593         }
 594         var options = '[<a href="javascript:;" onclick="edit_location('+feature.properties.Id+')">Edit</a>]&nbsp[<a href="javascript:;" onclick="delete_location('+feature.properties.Id+')">Delete</a>]';
 595         popupContent += '<tr><th>Options</th><td>'+options+'</td></tr></tbody></table>';
 596         layer.bindPopup(popupContent);
 597         layer.on('mouseover', function (e) {
 598             this.openPopup();
 599         });
 600 }
 601
 602   function delete_location(id) {
 603     var name = $('#'+id+'_name').text();
 604     var yes = confirm('Are you sure you want to delete location '+name+'? ');
 605
 606     if (! yes) { return; }
 607
 608     new jQuery.ajax( {
 609       type: 'POST',
 610       url: '/ajax/location/delete/'+id,
 611       success: function(response) {
 612                   if (response.error) { alert(response.error); }
 613                   else {
 614                     alert(response.success);
 615                     location.reload();
 616                   }
 617                },
 618       error: function(response) {
 619                  alert("An error occurred");
 620              }
 621       });
 622    }
 623
 624
 625     function add_from_map(coordinate_string) {
 626         //console.log("coordinate_string is"+coordinate_string);
 627         var latlng = coordinate_string.split(',');
 628         latitude = latlng[0], longitude = latlng[1];
 629         var coordinates = [parseFloat(latitude),parseFloat(longitude)];
 630
 631
 632         // removed because of mixed content restrictions. Can be uncommented once datascience toolkit can be accessed locally or over https
 633
 634         // var dstk = $.DSTK();
 635         // dstk.coordinates2statistics(coordinates, function(c2s_result) {
 636         //
 637         //   dstk.coordinates2politics(coordinates, function(c2p_result) {
 638             //console.log("elevation result is "+JSON.stringify(c2s_result));
 639             //console.log("politics result is "+JSON.stringify(c2p_result));
 640             //console.log("elevation result is "+c2s_result[0].statistics.elevation+" and politics result is "+c2p_result[0].politics);
 641             // if (!c2s_result[0].statistics.elevation || !c2p_result[0].politics) {
 642             //     alert("Unable to add a location at these coordinates. Please make sure your new location is located on land between 60 north and south.");
 643             //     return;
 644             // }
 645             // var elevation = c2s_result[0].statistics.elevation.value;
 646             // var code= c2p_result[0].politics[0].code.toUpperCase();
 647             //console.log("elevation is "+elevation+" and code is "+code);
 648
 649
 650             $('#location_id').val('');
 651             $('#location_name').val('');
 652             $('#location_abbreviation').val('');
 653             $('#breeding_program_select').val('');
 654             $('#location_type').val('');
 655             // $('#location_country').val(code);
 656             // $('#location_altitude').val(elevation);
 657             $('#location_country').val('');
 658             $('#location_altitude').val('');
 659             $('#location_latitude').val(coordinates[0]);
 660             $('#location_longitude').val(coordinates[1]);
 661             $('#store_location_dialog').modal("show");
 662         //   });
 663         // });
 664
 665     }
 666
 667    function edit_location(id) {
 668         var table = jQuery('#location_table').DataTable();
 669         var index = table.rows().eq( 0 ).filter( function (rowIdx) {
 670             return table.cell( rowIdx, 0 ).data() === id ? true : false;
 671         } );
 672        var data = table.rows(index).data();
 673        var all_rows = [];
 674        for (var i=0; i < data.length ;i++){
 675            all_rows.push(data[i]);
 676        }
 677        var loc_data = all_rows.shift();
 678         //console.log("Data for location to edit: "+JSON.stringify(loc_data));
 679         //console.log("Program for location to edit is "+loc_data.properties.Program);
 680         $('#location_id').val(loc_data.properties.Id);
 681         $('#location_name').val(loc_data.properties.Name);
 682         $('#location_abbreviation').val(loc_data.properties.Abbreviation);
 683         $('#location_country').val(loc_data.properties.Code);
 684         $('#breeding_program_select option:first').text('');
 685         $('#breeding_program_select option:first').prop('selected', true);
 686         $("#breeding_program_select option").filter(function() {
 687             return this.text == loc_data.properties.Program;
 688         }).attr('selected', true);
 689         $('#location_type').val(loc_data.properties.Type);
 690         $('#location_latitude').val(loc_data.properties.Latitude);
 691         $('#location_longitude').val(loc_data.properties.Longitude);
 692         $('#location_altitude').val(loc_data.properties.Altitude);
 693         $('#store_location_dialog').modal("show");
 694     }
 695
 696 </script>