spatialhast.github.io/leaflet.routing.html at master · spatialhast/spatialhast.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
<!doctype html>
<html>
<head>
    <title>Leaflet Routing. Button</title>
    <link rel="stylesheet" href="assets/font-awesome-4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/leaflet-0.7.3/leaflet.css">
    <link rel="stylesheet" href="assets/leaflet.routing-machine/dist/leaflet-routing-machine.css" />

    <style type="text/css">
        html,
        body,
        #map {
            margin: 0px;
            height: 100%;
            width: 100%;
        }
        .leaflet-routing-container {
            visibility: hidden;
        }
    </style>
</head>

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

    <script src="assets/jquery-1.11.1.min.js"></script>
    <script src="assets/leaflet-0.7.3/leaflet.js"></script>
    <script src="assets/leaflet.easybutton/easy-button.js"></script>
    <script src="assets/leaflet.routing-machine/dist/leaflet-routing-machine.js"></script>
    <script src="assets/leaflet.routing-machine/dist/Control.Geocoder.js"></script>

    <script>
        var map = L.map('map', {
            center: [50.0669, 35.1638],
            zoom: 15
        });

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; Map Data <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var rlayer = null;
        L.easyButton('fa-level-up',
            function() {
                if (rlayer) {
                    map.removeLayer(rlayer);
                    rlayer = null;
                } else {
                    var routing = L.Routing.control({
                        plan: L.Routing.plan([
                            L.latLng(50.07132, 35.14103),
                            L.latLng(50.05459, 35.18239)
                        ], {
                            waypointIcon: function(i) {
                                return new L.Icon.Label.Default({
                                    labelText: String.fromCharCode(65 + i)
                                });
                            },
                            geocoder: L.Control.Geocoder.nominatim()
                        }),
                        routeWhileDragging: true,
                        routeDragTimeout: 250
                    });
                    rlayer = L.layerGroup([routing]);
                    map.addLayer(rlayer);
                }
            }, 'Display Route').addTo(map);
    </script>
</body>
</html>