-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
113 lines (100 loc) · 3.19 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
<!DOCTYPE html>
<html>
<head>
<title>Test - map-distance-ruler</title>
<!--<script src="/jspm_packages/system.js"></script>-->
<script src="/jspm_packages/github/components/[email protected]/jquery.min.js"></script>
<script src="/jspm_packages/github/Leaflet/[email protected]/dist/leaflet.js"></script>
<!--<script src="jspm.config.js"></script>-->
<script src="build.js"></script>
<script>
$(function () {
var map = L.map('mapid').setView([52, 37], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
let options = {
center: [52, 37],
renderRuler: function (map, _el) {
$('#distance').append(_el);
},
_updateTooltipDistance(tooltip, total, difference) {
var totalRound = total, differenceRound = difference;
var text = '<span class="ruler-tooltip-total">' + totalRound.toFixed(2) + ' m</span>';
if (differenceRound > 0 && totalRound != differenceRound) {
text += '<span class="ruler-tooltip-difference">+' + differenceRound.toFixed(2) + ' m</span>';
}
if (tooltip._icon) {
tooltip._icon.innerHTML = text;
}
},
// _createTooltip(position) {
// this._tooltip = L.marker(position, {
// icon: L.divIcon({
// className: 'ruler-tooltip',
// iconAnchor: [-10, -10]
// }),
// clickable: false,
// }).addTo(this._layerPaint);
//
// return this._tooltip;
// },
// lineOptions: {
// color: '#000000',
// weight: 4,
// opacity: 1
// },
iconOptions: {
iconSize: new L.Point(14, 14)
}
};
map.addLayer(L.mapDistanceRuler(options));
// System.import('lib/app').then(function(mapRuler) {
// debugger;
// var map = L.map('mapid').setView([52, 37], 13);
// L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
// console.log(mapRuler.init(map));
// });
var ruler = map.__dr;
$('#toggleRuler').on('click', function () {
ruler.view._toggleMeasure();
if (ruler.view.__enabled) {
$('#toggleRuler').text('toggle ruler (on)');
} else {
$('#toggleRuler').text('toggle ruler (off)');
}
});
});
// });
</script>
<link rel="stylesheet" href="jspm_packages/github/Leaflet/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="lib/app.css"/>
<style type="text/css">
#mapid {
height: 300px;
}
.distance-container {
padding: 10px;
/*position: absolute;*/
/*top: 10px;*/
/*left: 10px;*/
/*z-index: 1;*/
}
.distance-container > * {
/*background-color: rgba(0, 0, 0, 0.5);*/
color: #fff;
font-size: 11px;
line-height: 18px;
display: block;
margin: 0;
padding: 5px 10px;
border-radius: 3px;
}
</style>
<script src="http://0.0.0.0:35729/livereload.js?snipver=1"></script>
</head>
<body>
<div id="mapid"></div>
<div id='distance' class='distance-container'>
<button id="toggleRuler">toggle ruler (off)</button>
</div>
</body>
</html>