<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>°N, <span id="lon"></span>°E
</p>
<p>Download VWC data for selected point:
<br/><span id="download-url"></span>
</p>
</body>
</html>
