-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathdemo.html
112 lines (105 loc) · 3.11 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Vector Icon</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<style>
html, body, #map {
height: 100%;
font-family: "Avenir LT W01 35 Light", "Century Gothic", Helvetica, Arial, sans-serif;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="L.VectorIcon.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
console.log('%c⚛ Leaflet.VectorIcon: Hello geohacker! ⚛', 'font-family:monospace;font-size:16px;color:darkblue;');
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup(); // just comment this
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
var map = L.map('map').setView([36, 140], 5);
L.tileLayer('//cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png', {
attributions: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var pathIcon = L.vectorIcon({
className: 'my-vector-icon',
svgHeight: 32,
svgWidth: 32,
type: 'path', // path | circle | rect | text
shape: {
d: 'M23.963,20.834L17.5,9.64c-0.825-1.429-2.175-1.429-3,0L8.037,20.834c-0.825,1.429-0.15,2.598,1.5,2.598h12.926C24.113,23.432,24.788,22.263,23.963,20.834z'
},
style: {
fill: '#ddd',
stroke: '#fff',
strokeWidth: 2
}
});
var circleIcon = L.vectorIcon({
className: 'my-vector-icon',
svgHeight: 32,
svgWidth: 32,
type: 'circle', // path | circle | rect | text
shape: {
r: '15',
cx: '16',
cy: '16'
},
style: {
fill: '#ddd',
stroke: '#fff',
strokeWidth: 2
}
});
var rectIcon = L.vectorIcon({
className: 'my-vector-icon',
svgHeight: 32,
svgWidth: 32,
type: 'rect', // path | circle | rect | text
shape: {
x: '1',
y: '1',
width: '30',
height: '30'
},
style: {
fill: '#ddd',
stroke: '#fff',
strokeWidth: 2
}
});
var textIcon = L.vectorIcon({
className: 'my-vector-icon',
svgHeight: 32,
svgWidth: 50,
type: 'text', // path | circle | rect | text
shape: {
x: '25',
y: '24'
},
style: {
fill: '#ddd',
//stroke: '#fff',
strokeWidth: 2,
fontFamily: 'Helvetica',
fontSize: '16',
fontWeight: '100'
},
text: 'Hello!'
});
var pathMarker = L.marker([36, 137], { icon: pathIcon }).addTo(map).bindPopup('Path');
var circleMarker = L.marker([36, 139], { icon: circleIcon }).addTo(map).bindPopup('Circle');
var rectMarker = L.marker([36, 141], { icon: rectIcon }).addTo(map).bindPopup('Rect');
var textMarker = L.marker([36, 143], { icon: textIcon }).addTo(map).bindPopup('Text');
</script>
</body>
</html>