-
Notifications
You must be signed in to change notification settings - Fork 39
/
index.html
66 lines (59 loc) · 2.58 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<link rel="stylesheet" href="../src/leaflet-areaselect.css" />
</head>
<body>
<div id="map"></div>
<div id="result">
<div class="left">
South west:<br>
<input type="text" class="sw"><br>
North east:<br>
<input type="text" class="ne">
<button id="remove">Remove</button>
</div>
<div class="right">
Width:<br>
<input type="text" class="width" /><br>
Height:<br>
<input type="text" class="height" />
<button id="setDimensions">Set Dimensions</button>
</div>
</div>
<a href="https://github.com/heyman/leaflet-areaselect"><img style="position:absolute; top:0; right:0; border:0; z-index:1000; pointer-events:none;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" alt="Fork me on GitHub"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="../src/leaflet-areaselect.js"></script>
<script>
// initialize map
var map = L.map('map').setView([38, 0], 2);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var areaSelect = L.areaSelect({
width:200,
height:250,
//keepAspectRatio:true,
//minHorizontalSpacing: 80,
//minVerticalSpacing: 80,
});
areaSelect.on("change", function() {
var bounds = this.getBounds();
$("#result .sw").val(bounds.getSouthWest().lat + ", " + bounds.getSouthWest().lng);
$("#result .ne").val(bounds.getNorthEast().lat + ", " + bounds.getNorthEast().lng);
$(".width").val(this.getDimensions().width);
$(".height").val(this.getDimensions().height);
});
areaSelect.addTo(map);
$("#remove").click(function() {
areaSelect.remove();
});
$("#setDimensions").click(function () {
areaSelect.setDimensions({width: $('.width').val(), height: $('.height').val()})
})
</script>
</body>