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