spidermaps/index.html at master · EsriUK/spidermaps · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta charset="utf-8">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <!--This isn't needed for the module - just a google font type!-->


    <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- Step 1. Require the module folder. -->
    <script>
        var dojoConfig = {
            async: true,
            isDebug: true,
            paths: {
                modules: location.href.replace(location.href.split("/").pop(), "") + "/lib/modules"
            }
        };
    </script>

    <script src="https://js.arcgis.com/4.4/"></script>


    <script>
        require([
            /*-- Step 2. Add the module name here --*/
            "modules/spiderMaps",

            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",

            "esri/symbols/SimpleLineSymbol",

            "esri/Graphic",
            "dojo/dom",
            "dojo/domReady!"

            /*Step 3. Add module name in the correct order below*/
        ], function(spiderMaps, Map, MapView, FeatureLayer, SimpleLineSymbol, Graphic, dom) {
            var map = new Map({
              basemap: "dark-gray"
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 3,
                center: [-0.0762373,30.5054002]
            });


             var featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/Qo2anKIAMzIEkIJB/arcgis/rest/services/whats_the_points/FeatureServer"
            });
                map.add(featureLayer)

            //Starting coordinates (long latt)
            var startPointLongLatt = [-0.0762373,51.5054002]


            var lineSymbol = new SimpleLineSymbol({
                cap: "round",
                color: "gold",
                width: 1,
                style: "solid"
            });

            spiderMaps.create(view, startPointLongLatt, featureLayer, lineSymbol, true, "high");

            document.getElementById("fs-button").addEventListener("click", updateFL);


             function updateFL() {
                 console.log(document.getElementById("fs-text").value)
                 map.remove(featureLayer)
                 featureLayer = new FeatureLayer({
                     url: document.getElementById("fs-text").value
                 });

                map.add(featureLayer)
                spiderMaps.update(view, startPointLongLatt, featureLayer, lineSymbol, true, "low");

            }

            view.on("click", function(event){

                startPointLongLatt = [event.mapPoint.longitude,event.mapPoint.latitude]
                lineSymbol = new SimpleLineSymbol({
                    cap: "round",
                    color: "gold",
                    width: 1,
                    style: "solid"
                });
                if(event.button === 0){
                spiderMaps.update(view, startPointLongLatt, featureLayer, lineSymbol, true, "low");
                }else if(event.button === 1){
                 lineSymbol = new SimpleLineSymbol({
                        cap: "round",
                        color: [Math.random()*255, Math.random()*255, Math.random()*255, 1],
                        width: (Math.random()*4)+1,
                        style: "dash"
                });

                spiderMaps.update(view, startPointLongLatt, featureLayer, lineSymbol, true, "low");
                }
                else if(event.button === 2){
                spiderMaps.update(view, startPointLongLatt, featureLayer, lineSymbol, false, "low");
                }

            })

        });
    </script>

</head>

<body>
    <div id="viewDiv"></div>

        <div id="configFs">
       <p>Click to generate a new starting point. Left click for GeoDesic, Right click straight lines.</p>
        <p><input type="text" id="fs-text" placeholder="https://services.arcgis.com/FeatureServer" />
        <button id="fs-button">Let's go!</button></p>
        <p> <a href="https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Airports_by_scale/FeatureServer" target="_blank">Here's</a> an example of another feature layer.
        <p><a href="https://github.com/maplabs/spider-maps" target="_blank">View on GitHub here</a></p>
    </div>
</body>