-
Notifications
You must be signed in to change notification settings - Fork 52
/
index.html
executable file
·93 lines (78 loc) · 3.68 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
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
<html>
<head>
<meta charset="utf-8">
<title>Leaflet.curve plugin demo</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
#map { height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
<script src="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);
//use a mix of renderers
var customPane = map.createPane("customPane");
var canvasRenderer = L.canvas({pane:"customPane"});
customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
//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]], {animate: 3000, renderer: canvasRenderer}).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, renderer: canvasRenderer }).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);
pathThree.on('click', function(e){
console.log("path three clicked");
});
var pathFour = L.curve(['M',[46.86019101567027,-29.047851562500004],
'Q',[50.48547354578499,-23.818359375000004],
[46.70973594407157,-19.907226562500004],
'T',[46.6795944656402,-11.0302734375]], {dashArray: '5', animate: {duration: 3000, iterations: Infinity}}).addTo(map);
var pathFive = L.curve(['M',
[42.45588764197166, -20.126953125000004],'L',
[50.48547354578499, -23.774414062500004],
[47.96050238891509, -15.644531250000002],
'Z'], {color: 'red', fill: true, dashArray: '5', animate: {duration: 3000, iterations: Infinity, delay: 1000}});
map.on('click', function(e) {
console.log(e.latlng);
});
function traceCurves(){
pathOne.trace([0, 0.25, 0.75, 1]).forEach(i => L.circle(i, {color: 'green'}).addTo(map));
pathTwo.trace([0, 0.25, 0.75, 1]).forEach(i => L.circle(i, {color: 'green'}).addTo(map));
pathThree.trace([0, 0.25, 0.75, 1]).forEach(i => L.circle(i, {color: 'green'}).addTo(map));
pathFour.trace([0, 0.25, 0.75, 1]).forEach(i => L.circle(i, {color: 'green'}).addTo(map));
pathFive.trace([0, 0.25, 0.75, 1]).forEach(i => L.circle(i, {color: 'green'}).addTo(map));
}
</script>
<button onclick="pathFive.addTo(map)">Add</button>
<button onclick="pathFive.remove()">Remove</button>
<button onclick="traceCurves()">Trace curves</button>
</body>
</html>