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 modal-lg" 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, Republic 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         <div class="form-group">
 327             <label class="col-sm-6 control-label">Nearest NOAA Weather Station ID: (<a href="https://www.ncdc.noaa.gov/cdo-web/datatools/findstation" target="_blank">Search Here</a>)</label>
 328             <div class="col-sm-6">
 329                 <input class="form-control" name="location_noaa_station_id" id="location_noaa_station_id" type="text" placeholder="e.g. GHCND:USC00300331"/>
 330             </div>
 331         </div>
 332           </form>
 333         </div>
 334       </div>
 335       <div class="modal-footer">
 336         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 337         <button type="button" class="btn btn-primary" name="store_location_submit" id="store_location_submit">Store Location Details</button>
 338       </div>
 339     </div>
 340   </div>
 341 </div>
 342
 343 <script defer="defer">
 344
 345 jQuery(document).ready(function() {
 346
 347   $('#add_location_link').click( function() {
 348       $('#add_location_dialog').modal("show");
 349    });
 350
 351    // get_select_box("breeding_programs", "breeding_program", {'empty':1, 'default':'please select'});
 352    get_select_box('breeding_programs', 'breeding_program',
 353        {
 354            empty: 1,
 355            id: 'breeding_program_select',
 356            default: 'please select',
 357            multiple: 1,
 358        });
 359
 360    $('#store_location_submit').click( function(event) {
 361        event.preventDefault();
 362        var id= $('#location_id').val();
 363        var name = $('#location_name').val();
 364        name = name.trim();
 365        var abbreviation = $('#location_abbreviation').val();
 366        var country_code = $('#location_country').val();
 367        var country_text = $('#location_country option:selected').text();
 368        var country_name = country_text.replace(/^[^\s]+(.*)/, '$1').trim();
 369     //    var program = $('#breeding_program_select option:selected').text();
 370         var programs = [];
 371         $('#breeding_program_select option:selected').each( function() {
 372             programs.push($(this).text());
 373         });
 374
 375         var noaa_station_id = $('#location_noaa_station_id').val();
 376
 377         programs = programs.join("&");
 378         var type = $('#location_type').val();
 379         var latitude = $('#location_latitude').val();
 380         var longitude = $('#location_longitude').val();
 381         var altitude = $('#location_altitude').val();
 382         console.log("Location programs to store are "+JSON.stringify(programs));
 383         //console.log("Location name to store is "+name);
 384         //console.log("Location country name to store is "+country_name+" and country code is "+country_code);
 385
 386         if (name == '') { alert('A location name is required.');  return; }
 387
 388         $.ajax({
 389             type: 'POST',
 390             url: '/ajax/location/store',
 391             data: {
 392                 'id': id,
 393                 'name': name,
 394                 'abbreviation': abbreviation,
 395                 'country_name': country_name,
 396                 'country_code': country_code,
 397                 'programs': programs,
 398                 'type': type,
 399                 'latitude':latitude,
 400                 'longitude':longitude,
 401                 'altitude': altitude,
 402                 'noaa_station_id': noaa_station_id
 403             },
 404             success: function(response) {
 405                 if (response.error) { alert(response.error); }
 406                 else {
 407                     var token = '<% $c->config->{noaa_ncdc_access_token} %>';
 408                     if (noaa_station_id == '') {
 409                       // do nothing
 410                     } else if (token == 'NULL') {
 411                       alert(`Configuration variable 'noaa_ncdc_access_token' is undefined. Data from station `+noaa_station_id+` can't be accessed without a token.\r\nPlease visit https://www.ncdc.noaa.gov/cdo-web/token to generate a valid access token, then include the token in sgn_local.conf`);
 412                     } else {
 413                         $.ajax({
 414                             url:'https://www.ncdc.noaa.gov/cdo-web/api/v2/stations/'+noaa_station_id,
 415                             headers:{ token: token },
 416                             success: function(response) {
 417                                 console.log(response);
 418                                 if (response.name) {
 419                                     alert('Found NOAA Station from given NOAA StationID: '+response.name);
 420                                 }
 421                                 else {
 422                                     alert('Could not verify the NOAA StationID you provided, however, your details were still updated.');
 423                                 }
 424                                 $('#store_location_dialog').modal("hide");
 425                                 location.reload();
 426                             },
 427                             error: function() {
 428                                 alert('The NOAA NCDC authorization token may not be valid! We could not verify your NOAA StationID. Please contact us!');
 429                             }
 430                         });
 431                     }
 432                     alert(response.success);
 433                 }
 434             },
 435             error: function() { alert('An error occurred while storing the location details. Please try again later.'); }
 436         });
 437    });
 438 });
 439
 440 function initialize_map (id, locationJSON, table) {
 441
 442     var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
 443            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
 444     });
 445
 446     var topomap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
 447         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'
 448     });
 449
 450     var streetmap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
 451         attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
 452     });
 453
 454     var baseMaps = {
 455         "Street (Default)": streetmap,
 456         "Topographical": topomap,
 457         "Satellite": satellite
 458     };
 459
 460     var location_layer = L.geoJSON(locationJSON, {
 461         pointToLayer: function (feature, latlng) {
 462            return L.marker(latlng, style(feature));
 463        },
 464        onEachFeature: onEachFeature
 465     });
 466
 467     var overlayMaps = {
 468         "Locations": location_layer
 469     };
 470
 471     var mymap = L.map( id, {
 472         layers: [streetmap, location_layer]
 473     });
 474
 475     var locateUser = L.Control.extend({
 476         onAdd: function (map) {
 477             var container = L.DomUtil.create('button', 'leaflet-bar leaflet-control leaflet-control-custom glyphicon glyphicon-map-marker');
 478
 479             container.style.backgroundColor = 'white';
 480             container.style.cursor = "pointer";
 481             container.title = 'Zoom to my location';
 482             container.style.width = '30px';
 483             container.style.height = '30px';
 484
 485             container.onclick = function(){
 486               map.locate({setView: true});
 487             }
 488             return container;
 489         }
 490     });
 491
 492     mymap.addControl(new locateUser({ position: 'topleft' }));
 493
 494     // Set Map Bounds if provided, otherwise fit the map to the world
 495     if ( Object.entries(location_layer.getBounds()).length !== 0 ) {
 496         mymap.fitBounds(location_layer.getBounds());
 497     }
 498     else {
 499         mymap.fitWorld();
 500     }
 501     var layerControl = L.control.layers(baseMaps, overlayMaps, {position: 'bottomright'}).addTo(mymap);
 502     var scale = L.control.scale().addTo(mymap);
 503
 504     var popup = L.popup();
 505
 506     function onMapClick(e) {
 507         popup
 508             .setLatLng(e.latlng)
 509             .setContent(
 510                 'Add a new location here?<br><center><a href="javascript:;" onclick="add_from_map(\''+e.latlng.lat+','+e.latlng.lng+'\')">Add Location</a></center>'
 511             )
 512             .openOn(mymap);
 513     }
 514
 515     mymap.on('click', onMapClick);
 516
 517     var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
 518
 519     var searchControl = L.esri.Geocoding.geosearch({
 520         providers: [
 521           arcgisOnline,
 522           L.esri.Geocoding.featureLayerProvider({
 523             url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/gisday/FeatureServer/0/',
 524             searchFields: ['Name', 'Organization'],
 525             label: 'GIS Day Events',
 526             bufferRadius: 5000,
 527             formatSuggestion: function(feature){
 528               return feature.properties.Name + ' - ' + feature.properties.Organization;
 529             }
 530           })
 531       ],
 532       position: 'topright',
 533       expanded: true
 534     }).addTo(mymap);
 535
 536     table.on( 'draw.dt', function () {  // recreate location layer based on filtered table contents
 537         location_layer.clearLayers();
 538         var ids = {};
 539         table.column(0,  { search:'applied' } ).data().each(function(value, index) {
 540             ids[value] = true;
 541         });
 542         layerControl.removeLayer(location_layer);
 543         location_layer = L.geoJson(locationJSON, {
 544             filter: function(feature, layer) {
 545                 return ids[feature.properties.Id];
 546             },
 547             pointToLayer: function (feature, latlng) {
 548                return L.marker(latlng, style(feature));
 549            },
 550            onEachFeature: onEachFeature
 551         });
 552
 553         layerControl.addOverlay(location_layer, "Locations");
 554         location_layer.addTo(mymap);
 555         mymap.fitBounds(location_layer.getBounds());
 556     });
 557     return;
 558 }
 559
 560 function style(feature) {
 561     //console.log("Type of marker "+feature.properties.Name+" is "+feature.properties.Type);
 562
 563     var label = feature.properties.Abbreviation || feature.properties.Id;
 564     var farmMarker = L.ExtraMarkers.icon({
 565         icon: 'fa-number',
 566         // number: feature.properties.Id,
 567         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 568         markerColor: 'red',
 569         shape: 'circle',
 570         prefix: ''
 571     });
 572
 573     var fieldMarker = L.ExtraMarkers.icon({
 574         icon: 'fa-number',
 575         // number: feature.properties.Id,
 576         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 577         markerColor: 'orange',
 578         shape: 'circle',
 579         prefix: ''
 580     });
 581
 582     var defaultMarker = L.ExtraMarkers.icon({
 583         icon: 'fa-number',
 584         // number: feature.properties.Id,
 585         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 586         markerColor: 'cyan',
 587         shape: 'circle',
 588         prefix: ''
 589     });
 590
 591     var greenhouseMarker = L.ExtraMarkers.icon({
 592         icon: 'fa-number',
 593         // number: feature.properties.Id,
 594         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 595         markerColor: 'green-light',
 596         shape: 'penta',
 597         prefix: ''
 598     });
 599
 600     var screenhouseMarker = L.ExtraMarkers.icon({
 601         icon: 'fa-number',
 602         // number: feature.properties.Id,
 603         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 604         markerColor: 'white',
 605         shape: 'penta',
 606         prefix: ''
 607     });
 608
 609     var labMarker = L.ExtraMarkers.icon({
 610         icon: 'fa-number',
 611         // number: feature.properties.Id,
 612         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 613         markerColor: 'blue',
 614         shape: 'square',
 615         prefix: ''
 616     });
 617
 618     var storageMarker = L.ExtraMarkers.icon({
 619         icon: 'fa-number',
 620         // number: feature.properties.Id,
 621         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 622         markerColor: 'purple',
 623         shape: 'square',
 624         prefix: ''
 625     });
 626
 627     var otherMarker = L.ExtraMarkers.icon({
 628         icon: 'fa-number',
 629         // number: feature.properties.Id,
 630         innerHTML: '<div style="color: white; position: relative; top: 50%; transform: translateY(-50%); font-size: 80%">'+label+'</div>',
 631         markerColor: 'pink',
 632         shape: 'circle',
 633         prefix: ''
 634     });
 635
 636     switch (feature.properties.Type) {
 637         case 'Farm':   return { icon: farmMarker };
 638         case 'Field': return { icon: fieldMarker };
 639         case 'Greenhouse':   return { icon: greenhouseMarker };
 640         case 'Screenhouse':   return { icon: screenhouseMarker };
 641         case 'Lab':   return { icon: labMarker };
 642         case 'Storage':   return { icon: storageMarker };
 643         case 'Other':   return { icon: otherMarker };
 644         default:    return { icon: defaultMarker };
 645     }
 646 }
 647
 648 function onEachFeature(feature, layer) {
 649         // var keys = ["Id","Name","Abbreviation","Country","Program","Type","Latitude","Longitude","Altitude","Trials"];
 650         var keys = ["Abbreviation","Program","Type","Trials"];
 651         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>';
 652         for (var i = 0; i < keys.length; i++) {
 653             popupContent += '<tr><th>'+keys[i]+'</th><td>'+feature.properties[keys[i]]+'</td></tr>';
 654         }
 655         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>]';
 656         popupContent += '<tr><th>Options</th><td>'+options+'</td></tr></tbody></table>';
 657         layer.bindPopup(popupContent);
 658         layer.on('mouseover', function (e) {
 659             this.openPopup();
 660         });
 661 }
 662
 663   function delete_location(id) {
 664     var name = $('#'+id+'_name').text();
 665     var yes = confirm('Are you sure you want to delete location '+name+'? ');
 666
 667     if (! yes) { return; }
 668
 669     new jQuery.ajax( {
 670       type: 'POST',
 671       url: '/ajax/location/delete/'+id,
 672       success: function(response) {
 673                   if (response.error) { alert(response.error); }
 674                   else {
 675                     alert(response.success);
 676                     location.reload();
 677                   }
 678                },
 679       error: function(response) {
 680                  alert("An error occurred");
 681              }
 682       });
 683    }
 684
 685
 686     function add_from_map(coordinate_string) {
 687         //console.log("coordinate_string is"+coordinate_string);
 688         var latlng = coordinate_string.split(',');
 689         latitude = latlng[0], longitude = latlng[1];
 690         var coordinates = [parseFloat(latitude),parseFloat(longitude)];
 691
 692
 693         // removed because of mixed content restrictions. Can be uncommented once datascience toolkit can be accessed locally or over https
 694
 695         // var dstk = $.DSTK();
 696         // dstk.coordinates2statistics(coordinates, function(c2s_result) {
 697         //
 698         //   dstk.coordinates2politics(coordinates, function(c2p_result) {
 699             //console.log("elevation result is "+JSON.stringify(c2s_result));
 700             //console.log("politics result is "+JSON.stringify(c2p_result));
 701             //console.log("elevation result is "+c2s_result[0].statistics.elevation+" and politics result is "+c2p_result[0].politics);
 702             // if (!c2s_result[0].statistics.elevation || !c2p_result[0].politics) {
 703             //     alert("Unable to add a location at these coordinates. Please make sure your new location is located on land between 60 north and south.");
 704             //     return;
 705             // }
 706             // var elevation = c2s_result[0].statistics.elevation.value;
 707             // var code= c2p_result[0].politics[0].code.toUpperCase();
 708             //console.log("elevation is "+elevation+" and code is "+code);
 709
 710
 711             $('#location_id').val('');
 712             $('#location_name').val('');
 713             $('#location_abbreviation').val('');
 714             $('#breeding_program_select').val('');
 715             $('#location_type').val('');
 716             // $('#location_country').val(code);
 717             // $('#location_altitude').val(elevation);
 718             $('#location_country').val('');
 719             $('#location_altitude').val('');
 720             $('#location_latitude').val(coordinates[0]);
 721             $('#location_longitude').val(coordinates[1]);
 722             $('#store_location_dialog').modal("show");
 723         //   });
 724         // });
 725
 726     }
 727
 728    function edit_location(id) {
 729
 730         var table = jQuery('#location_table').DataTable();
 731         var loc_data = table.row('#'+id).data();
 732         //console.log("Data for location to edit: "+JSON.stringify(loc_data));
 733         //console.log("Program for location to edit is "+loc_data.properties.Program);
 734         $('#location_id').val(loc_data.properties.Id);
 735         $('#location_name').val(loc_data.properties.Name);
 736         $('#location_abbreviation').val(loc_data.properties.Abbreviation);
 737         $('#location_country').val(loc_data.properties.Code);
 738
 739         $('#breeding_program_select option:selected').prop('selected', false);
 740
 741         var programs = loc_data.properties.Program;
 742         var program_array = [];
 743         if (programs) { program_array = programs.split(" & ") };
 744
 745         if (program_array.length > 0) {
 746             program_array.forEach(function(program) {
 747                 $("#breeding_program_select option").filter(function() {
 748                     return this.text == program
 749                 }).attr('selected', true);
 750             });
 751         } else {
 752             $('#breeding_program_select option:first').text('');
 753             $('#breeding_program_select option:first').prop('selected', true);
 754         }
 755
 756         $('#location_type').val(loc_data.properties.Type);
 757         $('#location_latitude').val(loc_data.properties.Latitude);
 758         $('#location_longitude').val(loc_data.properties.Longitude);
 759         $('#location_altitude').val(loc_data.properties.Altitude);
 760         $('#location_noaa_station_id').val(loc_data.properties.NOAAStationID);
 761         $('#store_location_dialog').modal("show");
 762     }
 763
 764 </script>