1

I am working on a webmap which will allow users to click on a portion of the globe and download associated river data. Here is my code so far.

<!DOCTYPE html>
<html>
<head>
    <title>GRWL test</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
        <style>
            #mapid {
                height: 1920px;
                width: 1080px;
            }
        </style>

        <script src="leaflet-src.js"></script>
        <script type="text/javascript" src="../dist/leaflet.ajax.js"></script>
        <script src="spin.js"></script>
        <script src="leaflet.spin.js"></script>

    </head>
    <body>

    <div id="mapid"></div>
      <script>

        var map = L.map('mapid').setView([0.478320099108, -79.381377894799996], 14);
            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                    maxZoom: 18,
                    id: 'mapbox.streets',
                    accessToken: 'pk.eyJ1IjoiamltbXlzd2lzaGVyIiwiYSI6ImNqc29vYW02ejAxYjI0YW94NnBlcDhpYWEifQ.6DiOztwTzMJu3eBEyHHfrw'
            }).addTo(map);

        function popUp(f,l){
            var out = [];
            if (f.properties){
                for(key in f.properties){
                    out.push(key+": "+f.properties[key]);
                }
                l.bindPopup(out.join("<br />"));
            }
        }
        var jsonTest = new L.GeoJSON.AJAX(["tiles.geojson"],{onEachFeature:popUp}).addTo(map);
    </script>
    </body>
</html>

This code outputs a grid system over the basemap as illustrated below, each grid is its own feature with an identifying attribute. How would I allow the user to click on a tile of their choosing and download a shapefile whose name matches the identifying attribute of the tile. All shapefiles will exist in a folder on my machine, eventually the shapefiles will be pushed to a server to allow functionality to non local users.
Output of the code

  • what format does your download link take? you'll need to generate it in the popup code – Ian Turton Apr 18 '19 at 6:50
  • On click it will download a shapefile. – M. C. Griffin Apr 18 '19 at 8:29
  • always the same shapefile? or is it based on the properties of the square? – Ian Turton Apr 18 '19 at 8:37
  • Each tile has a different associated shapefile – M. C. Griffin Apr 18 '19 at 8:48
  • @IanTurton can you please help me rephrase or tell me what details to add in order to make my question more clear – M. C. Griffin Apr 18 '19 at 15:11