Skip to content

Commit 42f203c

Browse files
ZverikZverik
committed
plugin examples
1 parent 404d674 commit 42f203c

3 files changed

Lines changed: 93 additions & 8 deletions

File tree

‎_includes/plugins-demo.html‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,70 @@
11
<script src="/lib/mapbbcode-config.js"></script>
22
<script>
3+
function createMap(div, coords) {
4+
var map = L.map(div, { scrollWheelZoom: false }).setView(coords || [11, 22], coords ? 13 : 2);
5+
map.addLayer(window.layerList.getLeafletLayer('OpenStreetMap'));
6+
return map;
7+
}
8+
var spbPos = L.latLng(59.939, 30.315);
9+
310
// L.LeafletIcon
4-
var mapli = L.map('mapli').setView([11, 22], 2);
5-
mapli.addLayer(window.layerList.getLeafletLayers('OpenStreetMap')[0]);
6-
mapli.addLayer(L.marker([11, 22], { icon: L.letterIcon('A') }));
11+
var mapli = createMap('mapli');
12+
mapli.addLayer(L.marker([11, 2], { icon: L.letterIcon('A'), clickable: false }));
13+
mapli.addLayer(L.marker([11, 22], { icon: L.letterIcon('Big', { radius: 20 }), clickable: false }));
14+
mapli.addLayer(L.marker([11, 42], { icon: L.letterIcon('42', { color: 'red' }) }).bindPopup('Yes, it is just an icon, and you can customise markers however you like, for example, add popups.<br>(no joke on meaning of life for you)'));
715

816
// L.PopupIcon
9-
var mappi = L.map('mappi').setView([11, 22], 2);
10-
mappi.addLayer(window.layerList.getLeafletLayers('OpenStreetMap')[0]);
11-
mappi.addLayer(L.marker([11, 22], { icon: L.popupIcon("No, you don't have to click me") }));
17+
var mappi = createMap('mappi');
18+
mappi.addLayer(L.marker([11, 22], { clickable: false, icon: L.popupIcon("No, you don't have to click me") }));
19+
mappi.addLayer(L.marker([-20, 100], { icon: L.popupIcon("(but I'm ok with that)") }).bindPopup('Popup on a popup. Oh, the irony.'));
1220

1321
// L.FunctionButtons
22+
var mapfb = createMap('mapfb');
23+
var fb = L.functionButtons(['Saint-Petersburg', 'Hide buttons'], { position: 'topleft' });
24+
var fbspb = false;
25+
fb.on('clicked', function(data) {
26+
if( data.idx == 0 ) {
27+
fbspb = !fbspb;
28+
mapfb.setView(fbspb ? spbPos : [11, 22], fbspb ? 13 : 2);
29+
fb.setContent(0, fbspb ? 'Whole world' : 'Saint-Petersburg');
30+
} else {
31+
mapfb.removeControl(fb);
32+
}
33+
});
34+
mapfb.addControl(fb);
1435

1536
// L.StaticLayerSwitcher
37+
var mapls = L.map('mapls', { scrollWheelZoom: false }).setView(spbPos, 13);
38+
mapls.addControl(L.staticLayerSwitcher(['OpenMapSurfer', 'CycleMap', 'Humanitarian'], { editable: true }));
1639

1740
// window.layerList
41+
var mapll = createMap('mapll', spbPos);
42+
var sel = document.getElementById('llselect');
43+
var layerKeys = window.layerList.getSortedKeys();
44+
for( var i = 0; i < layerKeys.length; i++ ) {
45+
if( !window.layerList.requiresKey(layerKeys[i]) ) {
46+
var opt = document.createElement('option');
47+
opt.innerHTML = opt.value = layerKeys[i];
48+
sel.appendChild(opt);
49+
}
50+
}
51+
L.DomEvent.on(document.getElementById('lladd'), 'click', function() {
52+
mapll.eachLayer(function(layer) { mapll.removeLayer(layer); });
53+
mapll.addLayer(window.layerList.getLeafletLayer(sel.value));
54+
});
1855

1956
// L.Control.Search
57+
var mapcs = createMap('mapcs');
58+
mapcs.addControl(L.control.search());
2059

2160
// L.ExportControl
61+
var mapec = createMap('mapec');
62+
mapec.addControl(L.exportControl({ codeid: 'nwrxs' }));
63+
L.popup({ closeButton: false, closeOnClick: false }).setLatLng([0, 22]).setContent('Instead of this popup, what will be exported is <a href="http://share.mapbbcode.org/nwrxs" target="sharemap">this map</a>.').openOn(mapec);
2264

2365
// L.Control.PermalinkAttribution
24-
</script>
66+
var mappa = L.map('mappa', { scrollWheelZoom: false }).setView(spbPos, 13);
67+
L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://www.opencyclemap.org/?lat={lat}&lon={lon}&zoom={zoom}\">Andy Allan</a>', minZoom: 0, maxZoom: 18 }).addTo(mappa);
68+
L.polyline([[59.9412, 30.3207], [59.9304, 30.3556]]).addTo(mappa);
69+
L.polyline([[59.9319, 30.3420], [59.9304, 30.3556], [59.9359, 30.3465]]).addTo(mappa);
70+
</script>

‎leaflet.md‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ A round icon with a white border and text inside. Can be used to display markers
1717

1818
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/LetterIcon.js)
1919

20+
```javascript
21+
L.marker([11, 22], { icon: L.letterIcon('Big', { radius: 20 }), clickable: false }).addTo(map);
22+
```
23+
2024
<div class="map" id="mapli"></div>
2125

2226
## L.PopupIcon
@@ -25,6 +29,10 @@ An icon that looks like a popup panel, but significantly smaller. Title should b
2529

2630
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/PopupIcon.js)
2731

32+
```javascript
33+
L.marker([11, 22], { icon: L.popupIcon("Don't click me"), clickable: false }).addTo(map);
34+
```
35+
2836
<div class="map" id="mappi"></div>
2937

3038
## L.FunctionButtons
@@ -39,6 +47,18 @@ When clicked, the control emits a Leaflet event `clicked` with a single data pro
3947

4048
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/FunctionButton.js)
4149

50+
```javascript
51+
var btn = L.functionButtons(['Saint-Petersburg', 'Hide buttons']);
52+
btn.on('clicked', function(data) {
53+
if( data.idx == 0 ) {
54+
map.setView([59.939, 30.315], 13);
55+
} else {
56+
map.removeControl(btn);
57+
}
58+
});
59+
map.addControl(btn);
60+
```
61+
4262
<div class="map" id="mapfb"></div>
4363

4464
### L.FunctionButton
@@ -83,6 +103,12 @@ When active, the layer switcher emits following Leaflet events:
83103

84104
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/StaticLayerSwitcher.js)
85105

106+
``` javascript
107+
map.addControl(L.staticLayerSwitcher([
108+
'OpenMapSurfer', 'CycleMap', 'Humanitarian'
109+
], { editable: true }));
110+
```
111+
86112
<div class="map" id="mapls"></div>
87113

88114
## window.layerList
@@ -100,7 +126,11 @@ The object has some methods to simplify working with the layer list:
100126

101127
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/LayerList.js)
102128

103-
<select size="1" id="llselect"><input type="button" id="lladd">
129+
``` javascript
130+
map.addLayer(window.layerList.getLeafletLayer('OpenStreetMap'));
131+
```
132+
133+
<select size="1" id="llselect"><input type="button" id="lladd" value="Show layer">
104134
<div class="map" id="mapll"></div>
105135

106136
## L.Control.Search
@@ -112,6 +142,10 @@ Every search control on the Leaflet plugins page has flaws. This is an attempt o
112142

113143
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/Leaflet.Search.js)
114144

145+
``` javascript
146+
map.addControl(L.control.search());
147+
```
148+
115149
<div class="map" id="mapcs"></div>
116150

117151
## L.ExportControl
@@ -129,6 +163,10 @@ An export button for maps downloaded from an external service. Gets the supporte
129163

130164
[Download](https://raw.github.com/MapBBCode/mapbbcode/master/src/ExportButton.js)
131165

166+
``` javascript
167+
map.addControl(L.exportControl({ codeid: 'nwrxs' }));
168+
```
169+
132170
<div class="map" id="mapec"></div>
133171

134172
## L.Control.PermalinkAttribution

‎style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ body {
1111
max-width: 700px;
1212
margin: 0 auto;
1313
line-height: 1.5;
14+
margin-bottom: 1em;
1415
}
1516

1617
#langbar {

0 commit comments

Comments
 (0)