forked from makinacorpus/Leaflet.Snap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (99 loc) · 4.45 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
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
<!DOCTYPE html>
<html>
<head>
<title>Leaflet.Snap</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<link rel="stylesheet" href="Leaflet.draw/dist/leaflet.draw.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="Leaflet.draw/dist/leaflet.draw.js"></script>
<script src="Leaflet.GeometryUtil/dist/leaflet.geometryutil.js"></script>
<script src="leaflet.snap.js"></script>
<style>
#map {
position: absolute;
top:0;
left: 0;
right: 0;
bottom:0;
}
.help {
font-size: 1.5em;
position: absolute;
top:0;
left: 0;
right: 0;
height: 30px;
z-index: 10;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
margin: 0px;
text-align: center;
}
.help a.sources {
float: left;
margin-left: 50px;
color: white;
}
.help a.logo {
float: right;
}
.help a.logo img {
height: 30px;
}
.leaflet-editing-icon.marker-snapped {
background-color: yellow;
}
.leaflet-marker-icon.marker-snapped {
content: url('marker-snap.png');
}
</style>
</head>
<body>
<p class="help">Move stuff around and it will snap !
<a class="sources" href="http://github.com/makinacorpus/Leaflet.Snap/">Sources</a>
<a class="logo" href="http://makina-corpus.com"><img src="http://depot.makina-corpus.org/public/logo.gif"/></a>
</p>
<div id="map"></div>
<script type="text/javascript">
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © 2013 OpenStreetMap contributors',
});
var map = L.map('map', { drawControl: true })
.setView([48.49, 1.4], 16)
.addLayer(osm);
var guides = L.polyline([[48.505431207150885, 1.3999843597412107], [48.50335551764662, 1.398911476135254], [48.50173471468476, 1.3994693756103516], [48.49974418399956, 1.3991689682006836], [48.49684355649577, 1.3993835449218748], [48.4956206932084, 1.398611068725586], [48.49465375716902, 1.3980531692504883], [48.49419872206354, 1.3975811004638672], [48.492406981637345, 1.3971948623657227], [48.49156797030711, 1.396486759185791], [48.49067206152607, 1.3961219787597656], [48.48988, 1.39638], [48.489342389949364, 1.394963264465332], [48.48864554279267, 1.3944590091705322], [48.487628697617744, 1.3940191268920896], [48.485666057669334, 1.3944482803344727], [48.48541005555473, 1.3942551612854002], [48.48461359626773, 1.3942766189575195], [48.483489998505746, 1.3933539390563965], [48.48164098598135, 1.3928818702697754], [48.480232846617845, 1.3912296295166016], [48.479450530080534, 1.3906073570251463], [48.478511734309954, 1.3902640342712402], [48.47714618217502, 1.389319896697998], [48.47600819398379, 1.388998031616211]],
{
weight: 5,
color: 'red',
opacity: 1.0
}).addTo(map);
var marker = L.marker([48.488, 1.395]).addTo(map);
marker.snapediting = new L.Handler.MarkerSnap(map, marker);
marker.snapediting.addGuideLayer(guides);
marker.snapediting.enable();
var road = L.polyline([[48.48922, 1.40033], [48.48935, 1.39981], [48.48948, 1.3976], [48.48986, 1.39634]],
{color: 'green', opacity: 1.0}).addTo(map);
road.snapediting = new L.Handler.PolylineSnap(map, road);
road.snapediting.addGuideLayer(guides);
road.snapediting.enable();
marker.snapediting.addGuideLayer(road);
for (var m in road.snapediting._markerGroup._layers) {
road.snapediting._markerGroup._layers[m].fire('move');
}
var guideLayers = [guides, road];
map.drawControl.setDrawingOptions({
polyline: { guideLayers: guideLayers },
polygon: { guideLayers: guideLayers, snapDistance: 5 },
marker: { guideLayers: guideLayers, snapVertices: false },
rectangle: false,
circle: false
});
map.on('draw:created', function (e) {
var layer = e.layer;
map.addLayer(layer);
guideLayers.push(layer);
});
</script>
</body>
</html>