graemediack.github.io/index.html at master · graemediack/graemediack.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>LazyGrae Web Application</title>
    <script language="javascript" type="text/javascript" src="resources/cssImport.txt"></script>
    <script language="javascript" type="text/javascript" src="resources/jsImport.txt"></script>
</head>
    <body>
        <script language="javascript" type="text/javascript" src="resources/header.txt"></script>
        <div id="side_panel" class="col-md-3">
            <p class="text-left">Random Points in Central Scotland</p>
            <button id="btnBuffer" class="form-control btn btn-warning attraction">Buffer</button>
            <button id="btnVoronoi" class="form-control btn btn-warning attraction">Voronoi</button>
            <button id="btnTin" class="form-control btn btn-warning attraction">Tin</button>

            <select id="selectPointsCat" class="custom-select attraction">
                <option selected>Select a Location Category:</option>
                <option value="Random Points A">Random Points A</option>
                <option value="Random Points B">Random Points B</option>
                <option value="Random Points C">Random Points C</option>
                <option value="Random Points D">Random Points D</option>
                <option value="Random Points E">Random Points E</option>
                <option value="Random Points F">Random Points F</option>
            </select>

        </div>
        <div id="mapdiv" class="col-md-9"></div>
        <script language="javascript" type="text/javascript" src="resources/footer.txt"></script>
        <script>
            // add map object to mapdiv
            var mymap = L.map('mapdiv')
            mymap.setView([57, -5], 6);
            // add background layer
            var backgroundLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
            mymap.addLayer(backgroundLayer);
            // add all locations as little orange dots
            var Points_LocLayerMarkerOptions = {
                radius: 3,
                fillColor: "#ff7800",
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            };

            var Points_LocLayer = new L.GeoJSON.AJAX('data/central.geojson', {pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng, Points_LocLayerMarkerOptions);
                }
            }).addTo(mymap);

            // add and remove buffer to all objects using buffer button
            var bufferLayer = L.geoJSON();
            $("#btnBuffer").click(function(){

                if ($("#btnBuffer").html()=='Buffer') {
                    var bufferedLocations = turf.buffer(Points_LocLayer.toGeoJSON(), 15, {units:'kilometres'});
                    bufferLayer = L.geoJSON(bufferedLocations).addTo(mymap);
                    $("#btnBuffer").html("Remove Buffer");
                } else {
                    mymap.removeLayer(bufferLayer);
                    $("#btnBuffer").html("Buffer");
                }
            });

            var voronoiLayer = L.geoJSON();
            $("#btnVoronoi").click(function(){

                if ($("#btnVoronoi").html()=='Voronoi') {
                    var voronoiLocations = turf.voronoi(Points_LocLayer.toGeoJSON());
                    voronoiLayer = L.geoJSON(voronoiLocations).addTo(mymap);
                    $("#btnVoronoi").html("Remove Voronoi");
                } else {
                    mymap.removeLayer(voronoiLayer);
                    $("#btnVoronoi").html("Voronoi");
                }
            });

            var tinLayer = L.geoJSON();
            $("#btnTin").click(function(){

                if ($("#btnTin").html()=='Tin') {
                    var tinLocations = turf.tin(Points_LocLayer.toGeoJSON());
                    tinLayer = L.geoJSON(tinLocations).addTo(mymap);
                    $("#btnTin").html("Remove Tin");
                } else {
                    mymap.removeLayer(tinLayer);
                    $("#btnTin").html("Tin");
                }
            });


            // highlight particular categories using drop down and view button
            var categorySelect = L.geoJSON();
            $("#selectPointsCat").click(function(){
                mymap.removeLayer(categorySelect);
                categorySelect = new L.GeoJSON.AJAX('data/central.geojson', {filter: locationCatFilter}).addTo(mymap);
            });

            function locationCatFilter(feature) {
                if (feature.properties.Category == $("#selectPointsCat").val()) {
                    return true;
                }
            };


        </script>
        <script src="resources/js/watermark.js"></script>
        <script>L.control.watermark({ position: 'topright' }).addTo(mymap);</script>
        <script src="resources/js/mouseposition.js"></script>
        <script>L.control.mousePosition().addTo(mymap);</script>

    </body>
</html>