soil_moisture/point_downloader_leaflet/leaflet_point_downloader.html at 89ddbf6f651ecc91e80882dbc1eab1487fec6936

Fork: 0

elinde / soil_moisture

Find file

Newer

Older

soil_moisture / point_downloader_leaflet / leaflet_point_downloader.html

Evan Linde on 5 Jul 2022 1 KB update thredds point data URLs

Raw Blame History

<html>
<head>
<title>Soil Moisture Point Downloader</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
<!-- For testing if a point is in a polygon -->
<script src="https://cdn.rawgit.com/hayeswise/Leaflet.PointInPolygon/v1.0.0/wise-leaflet-pip.js"></script>
<script src="ok_polygon_coords.leaflet.mini.js"></script>
<script src="leaflet_point_downloader.js"></script>
<style>
 div#map {
        width: 100%;
        height: 70vh;
        border:double;
 }
 a {color:#FF7300;}
 a:hover {color:#ffffff; background-color:#FF7300;}   
</style>
</head>
<body>

<h1>Soil Moisture Point Downloader</h1>
<p>Pick a point to generate a download URL.</p>
<!--<p>
  <b>Directions:</b>
  <ol>
    <li>Click the map to select a point.</li>
    <li>Click the link below the map to download soil moisture data for the selected point.</li>
  </ol>
</p>-->

<div id="map"></div>

<p>
  <b>Selected point:</b>
  <br/><span id="lat"></span>&deg;N, <span id="lon"></span>&deg;E
</p>
                                  
<p>Download VWC data for selected point:
  <br/><span id="download-url"></span>
</p>

<p>For more download options, see <a href="https://tiger.hpc.okstate.edu/thredds/ncss/grid/agg-soil-moisture/agg_vwc.nc/pointDataset.html">https://tiger.hpc.okstate.edu/thredds/ncss/grid/agg-soil-moisture/agg_vwc.nc/pointDataset.html</a>.</p>

</body>
</html>