gh-pages-html-template/index.html at master · FernandoTentor/gh-pages-html-template · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <script>
        L_NO_TOUCH = false;
        L_DISABLE_3D = false;
    </script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

    <meta name="viewport" content="width=device-width,
                        initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style>
        #map_af1ade91335842e99ca3120152b8be50 {
            position: relative;
            width: 100.0%;
            height: 100.0%;
            left: 0.0%;
            top: 0.0%;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
    <script src="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/dist/leaflet-measure.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/dist/leaflet-measure.min.css"/>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
    <script src="https://raw.githack.com/digidem/leaflet-side-by-side/gh-pages/leaflet-side-by-side.js"></script>
</head>
<body>

    <div class="folium-map" id="map_af1ade91335842e99ca3120152b8be50"></div>

</body>
<script>

    var map_af1ade91335842e99ca3120152b8be50 = L.map("map_af1ade91335842e99ca3120152b8be50", {
        center: [
            20.0, 0.0
        ],
        crs: L.CRS.EPSG3857,
        zoom: 2,
        zoomControl: true,
        preferCanvas: false,
        drawExport: false,
        layersControl: true
    });
    L.control.scale().addTo(map_af1ade91335842e99ca3120152b8be50);


    var tile_layer_771c761aae3e44eca8b6c4d96f35b232 = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        "attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.",
        "detectRetina": false,
        "maxNativeZoom": 24,
        "maxZoom": 24,
        "minZoom": 0,
        "noWrap": false,
        "opacity": 1,
        "subdomains": "abc",
        "tms": false
    }).addTo(map_af1ade91335842e99ca3120152b8be50);


    L.control.fullscreen({"forceSeparateButton": false, "position": "topleft", "title": "Full Screen", "titleCancel": "Exit Full Screen"}).addTo(map_af1ade91335842e99ca3120152b8be50);


    var options = {
        position: "topleft",
        draw: {},
        edit: {}
    }
    // FeatureGroup is to store editable layers.
    var drawnItems = new L.featureGroup().addTo(map_af1ade91335842e99ca3120152b8be50);
    options.edit.featureGroup = drawnItems;
    var draw_control_89687cbc059143e7a7e9e498151a7fd1 = new L.Control.Draw(options).addTo(map_af1ade91335842e99ca3120152b8be50);
    map_af1ade91335842e99ca3120152b8be50.on(L.Draw.Event.CREATED, function (e) {
        var layer = e.layer,
            type = e.layerType;
        var coords = JSON.stringify(layer.toGeoJSON());
        layer.on('click', function () {
            alert(coords);
            console.log(coords);
        });
        drawnItems.addLayer(layer);
    });
    map_af1ade91335842e99ca3120152b8be50.on('draw:created', function (e) {
        drawnItems.addLayer(e.layer);
    });


    var measure_control_147149cb42564feb9a769a2657f617f6 = new L.Control.Measure({
        "position": "bottomleft",
        "primaryAreaUnit": "sqmeters",
        "primaryLengthUnit": "meters",
        "secondaryAreaUnit": "acres",
        "secondaryLengthUnit": "miles"
    });
    map_af1ade91335842e99ca3120152b8be50.addControl(measure_control_147149cb42564feb9a769a2657f617f6);


    L.Control.geocoder({"collapsed": true, "defaultMarkGeocode": true, "position": "topleft"}).on('markgeocode', function (e) {
        map_af1ade91335842e99ca3120152b8be50.setView(e.geocode.center, 11);
    }).addTo(map_af1ade91335842e99ca3120152b8be50);


    map_af1ade91335842e99ca3120152b8be50.fitBounds([
        [
            20, 0
        ],
        [
            20, 0
        ]
    ], {"maxZoom": 2});


    var tile_layer_19134bbd9cf0448099fcd12defc67263 = L.tileLayer("https://a.tile.opentopomap.org/{z}/{x}/{y}.png", {
        "attribution": "Map data: (C) OpenStreetMap contributors, SRTM | Map style: (C) OpenTopoMap (CC-BY-SA)",
        "detectRetina": false,
        "maxNativeZoom": 17,
        "maxZoom": 17,
        "minZoom": 0,
        "noWrap": false,
        "opacity": 1,
        "subdomains": "abc",
        "tms": false
    }).addTo(map_af1ade91335842e99ca3120152b8be50);


    var tile_layer_e4e7ba8db35c48938dd2c8783e827501 = L.tileLayer("https://mt1.google.com/vt/lyrs=y\u0026x={x}\u0026y={y}\u0026z={z}", {
        "attribution": "Google",
        "detectRetina": false,
        "maxNativeZoom": 22,
        "maxZoom": 22,
        "minZoom": 0,
        "noWrap": false,
        "opacity": 1,
        "subdomains": "abc",
        "tms": false
    }).addTo(map_af1ade91335842e99ca3120152b8be50);


    var split_control_5cd2a7fb3cd240a6b26f0c9f6f2d3cd6 = L.control.sideBySide(tile_layer_19134bbd9cf0448099fcd12defc67263, tile_layer_e4e7ba8db35c48938dd2c8783e827501).addTo(map_af1ade91335842e99ca3120152b8be50);


    var layer_control_4b43a9a0efec4f71985e8ab4614a5424 = {
        base_layers: {
            "openstreetmap": tile_layer_771c761aae3e44eca8b6c4d96f35b232
        },
        overlays: {
            "OpenTopoMap": tile_layer_19134bbd9cf0448099fcd12defc67263,
            "Google Satellite": tile_layer_e4e7ba8db35c48938dd2c8783e827501,
            "Split Control": split_control_5cd2a7fb3cd240a6b26f0c9f6f2d3cd6
        }
    };
    L.control.layers(layer_control_4b43a9a0efec4f71985e8ab4614a5424.base_layers, layer_control_4b43a9a0efec4f71985e8ab4614a5424.overlays, {
        "autoZIndex": true,
        "collapsed": true,
        "position": "topright"
    }).addTo(map_af1ade91335842e99ca3120152b8be50);
</script>