forked from elfalem/Leaflet.curve
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·62 lines (52 loc) · 2.08 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
<html>
<head>
<meta charset="utf-8">
<title>Leaflet.curve plugin demo</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<style>
#map { height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script src="leaflet.curve.js"></script>
<script>
//set up map
var map = L.map('map').setView([46.05, 11.05], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
//quadratic bezier curve
var pathOne = L.curve(['M',[50.14874640066278,14.106445312500002],
'Q',[51.67255514839676,16.303710937500004],
[50.14874640066278,18.676757812500004],
'T',[49.866316729538674,25.0927734375]]).addTo(map);
//cubic bezier curve (and straight lines)
var pathTwo = L.curve(['M',[50.54136296522163,28.520507812500004],
'C',[52.214338608258224,28.564453125000004],
[48.45835188280866,33.57421875000001],
[50.680797145321655,33.83789062500001],
'V',[48.40003249610685],
'L',[47.45839225859763,31.201171875],
[48.40003249610685,28.564453125000004],'Z',
'M',[49.55372551347579,29.465332031250004],
'V',[48.7822260446217],
'H',[33.00292968750001],
'V',[49.55372551347579],'Z'],{color:'red',fill:true}).addTo(map);
var pathThree = L.curve(['M',[49.35375571830993,6.240234375],
'Q',[49.38237278700955,9.843750000000002],
[47.754097979680026,9.360351562500002],
[46.95026224218562,6.635742187500001],
[45.67548217560647,8.437500000000002],
[44.5278427984555,5.5810546875],
[45.85941212790755,3.0761718750000004],
[47.517200697839414,4.218750000000001],
[49.009050809382074,3.7353515625000004],
[48.45835188280866,5.800781250000001],
[48.8936153614802,5.493164062500001],'Z'], {fill:true, color:'orange'}).addTo(map);
function onMapClick(e) {
console.log(e.latlng);
}
map.on('click', onMapClick);
</script>
</body>
</html>