forked from makinacorpus/Leaflet.AlmostOver
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (77 loc) · 3.79 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Leaflet.AlmostOver</title>
<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script type='text/javascript' src="Leaflet.GeometryUtil/dist/leaflet.geometryutil.js"></script>
<script type='text/javascript' src="leaflet.almostover.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<style type='text/css'>
#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;
}
</style>
</head>
<body>
<p class="help">Move your mouse around, click approximatively !
<a class="sources" href="http://github.com/makinacorpus/Leaflet.AlmostOver/">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'>
window.onload = function () {
var map = L.map('map').setView([48.49, 1.395], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var lines = L.geoJson({type:"FeatureCollection",features:[{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:[[1.3988685607910156,48.494596878004174],[1.3979887962341309,48.49458265820301],[1.3975811004638672,48.49409918258983],[1.397409439086914,48.49331707992515],[1.3971948623657227,48.49280515164832],[1.3970017433166504,48.49222211592656],[1.3965296745300293,48.49166751475012],[1.396315097808838,48.49134043941787],[1.396036148071289,48.49060095697656],[1.3963580131530762,48.48983302148858],[1.3957571983337402,48.489705031109914],[1.3952207565307617,48.48947749186131],[1.3948774337768552,48.4892499515917],[1.3946199417114258,48.488993967567986],[1.394383907318115,48.48853888166857],[1.3941478729248045,48.48804112678984],[1.3940191268920896,48.48777091495253],[1.3939118385314941,48.48741537086776],[1.3943195343017578,48.48616383585965],[1.3945555686950684,48.485708724562784],[1.3942551612854002,48.48539583317714]]}},{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:[[1.3963472843170166,48.48983302148858],[1.3966315984725952,48.489783247490834],[1.3977956771850584,48.48944904938345],[1.398932933807373,48.489392164379844],[1.3996410369873047,48.4893495005853],[1.400349140167236,48.489235730290964],[1.4006924629211426,48.489548597986165],[1.4010357856750488,48.49000367482429],[1.4014005661010742,48.490202769656726],[1.4019370079040525,48.49017432758567],[1.4039969444274902,48.489705031109914]]}}]}).addTo(map);
map.almostOver.addLayer(lines);
var circle = L.circleMarker([0, 0], {radius: 5, fillColor: 'white', fillOpacity: 1});
map.on('almost:over', function (e) {
map.addLayer(circle);
e.layer.setStyle({color: 'red'});
});
map.on('almost:move', function (e) {
circle.setLatLng(e.latlng);
});
map.on('almost:out', function (e) {
map.removeLayer(circle);
e.layer.setStyle({weight: 5, color: '#03f'});
});
map.on('almost:click', function (e) {
e.layer.setStyle({weight: 10});
});
};
</script>
</body>
</html>