Skip to content

Commit 9e14f5b

Browse files
AB-xdevAB-xdev
committed
Add example to showcase how a control can be extended
for #335
1 parent 055f0ef commit 9e14f5b

File tree

3 files changed

+165
-0
lines changed

3 files changed

+165
-0
lines changed

‎vaadin-maps-leaflet-flow-demo/src/main/java/software/xdev/vaadin/maps/leaflet/flow/DemoView.java

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
import software.xdev.vaadin.maps.leaflet.flow.demo.InitialResizeDemo;
1919
import software.xdev.vaadin.maps.leaflet.flow.demo.MinimalisticDemo;
2020
import software.xdev.vaadin.maps.leaflet.flow.demo.NotOfThisEarthDemo;
21+
import software.xdev.vaadin.maps.leaflet.flow.demo.WatermarkControlDemo;
2122

2223

2324
@PageTitle("Leaflet + Vaadin demos")
@@ -73,6 +74,11 @@ protected void onAttach(final AttachEvent attachEvent)
7374
"Not of this earth",
7475
"Displays a map that is not from this earth"
7576
),
77+
new Example(
78+
WatermarkControlDemo.NAV,
79+
"Watermark-Control",
80+
"Creates a custom control interface"
81+
),
7682
new Example(
7783
FreeingUpResourceBenchmarkDemo.NAV,
7884
"Freeing up resources Benchmark",

‎vaadin-maps-leaflet-flow-demo/src/main/java/software/xdev/vaadin/maps/leaflet/flow/demo/WatermarkControlDemo.java

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
package software.xdev.vaadin.maps.leaflet.flow.demo;
2+
3+
import com.vaadin.flow.component.UI;
4+
import com.vaadin.flow.component.html.Anchor;
5+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
6+
import com.vaadin.flow.router.Route;
7+
8+
import software.xdev.vaadin.maps.leaflet.MapContainer;
9+
import software.xdev.vaadin.maps.leaflet.basictypes.LLatLng;
10+
import software.xdev.vaadin.maps.leaflet.controls.LControl;
11+
import software.xdev.vaadin.maps.leaflet.controls.LControlOptions;
12+
import software.xdev.vaadin.maps.leaflet.layer.raster.LTileLayer;
13+
import software.xdev.vaadin.maps.leaflet.map.LMap;
14+
import software.xdev.vaadin.maps.leaflet.registry.LComponentManagementRegistry;
15+
import software.xdev.vaadin.maps.leaflet.registry.LDefaultComponentManagementRegistry;
16+
17+
18+
@Route(WatermarkControlDemo.NAV)
19+
@SuppressWarnings("checkstyle:MagicNumber")
20+
public class WatermarkControlDemo extends VerticalLayout
21+
{
22+
public static final String NAV = "/watermark-control";
23+
24+
@SuppressWarnings("checkstyle:LineLength")
25+
public WatermarkControlDemo()
26+
{
27+
LWatermark.register();
28+
29+
// Let the view use 100% of the site
30+
this.setSizeFull();
31+
32+
this.add(new Anchor(
33+
"https://leafletjs.com/examples/extending/extending-3-controls.html#controls",
34+
"Based on this example"));
35+
36+
// Create the registry which is needed so that components can be reused and their methods invoked
37+
// Note: You normally don't need to invoke any methods of the registry and just hand it over to the components
38+
final LComponentManagementRegistry reg = new LDefaultComponentManagementRegistry(this);
39+
40+
// Create and add the MapContainer (which contains the map) to the UI
41+
final MapContainer mapContainer = new MapContainer(reg);
42+
mapContainer.setSizeFull();
43+
this.add(mapContainer);
44+
45+
final LMap map = mapContainer.getlMap();
46+
47+
// Add a (default) TileLayer so that we can see something on the map
48+
map.addLayer(LTileLayer.createDefaultForOpenStreetMapTileServer(reg));
49+
50+
new LWatermark(reg,
51+
new LWatermarkOptions()
52+
.withPosition(LControl.Positions.BOTTOM_LEFT)
53+
.withWidth("20em")
54+
.withSrc("""
55+
data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="200" viewBox="0 0 18300 4500">
56+
<defs>
57+
<style>
58+
.fil0{fill:%23d71e23}
59+
</style>
60+
</defs>
61+
<g>
62+
<path class="fil0" d="M9763 10965h-920l-17-6-1503-588-1506 588-11 4-13 2-1562 148-1102 105 1064-369 2311-801-1638-633-683-263h1609l16 6 1515 588 1521-588 10-4 9-1 1388-211 1177-178-1131 441-2177 849 1675 647 682 264zM25514 9520l-1909 1442-22 17h-693l-23-19-1765-1440-285-233h907l22 17 1490 1178 1395-1177 23-19h1171zM20426 10961h-4015V9260h4126l-1 127-1 99v126h-112l-3041-3 2 322 3038 3h110l2 124 1 83 2 128h-3146v352l3035-6h112v346z" transform="translate(-5400 -7700)"/>
63+
<path class="fil0" d="M10994 9275h2026a12150 12150 0 0 1 1368 73c292 35 559 83 798 143h1c290 73 510 158 659 254 165 106 248 229 248 368 0 134-85 254-254 359-151 94-375 180-672 256-292 76-618 132-977 170-359 37-751 56-1174 56h-2102V9275h79zm917 1354h1106c300 0 574-14 822-41 247-27 469-67 665-121h1a2470 2470 0 0 0 277-96c176-79 264-164 264-256 0-60-39-118-117-173-92-66-234-125-425-178-197-55-418-96-665-123-248-27-522-41-822-41h-1106v1029z" transform="translate(-5400 -7700)"/>
64+
</g>
65+
</svg>
66+
"""))
67+
.addTo(map);
68+
69+
// Set what part of the world should be shown
70+
map.setView(new LLatLng(reg, 49.6751, 12.1607), 5);
71+
}
72+
73+
public static class LWatermark extends LControl<LWatermark>
74+
{
75+
public LWatermark(
76+
final LComponentManagementRegistry compReg,
77+
final LWatermarkOptions options)
78+
{
79+
super(compReg, "L.control.watermark(" + compReg.writeOptions(options) + ")");
80+
}
81+
82+
public static void register()
83+
{
84+
UI.getCurrent().getPage().executeJs("""
85+
L.Control.Watermark = L.Control.extend({
86+
onAdd: function(map) {
87+
var img = L.DomUtil.create('img');
88+
img.src = this.options.src;
89+
img.style.width = this.options.width;
90+
return img;
91+
},
92+
93+
onRemove: function(map) {
94+
// Nothing to do here
95+
}
96+
});
97+
98+
L.control.watermark = function(opts) {
99+
return new L.Control.Watermark(opts);
100+
}
101+
""");
102+
}
103+
}
104+
105+
public static class LWatermarkOptions extends LControlOptions<LWatermarkOptions>
106+
{
107+
private String src;
108+
private String width;
109+
110+
public String getSrc()
111+
{
112+
return this.src;
113+
}
114+
115+
public void setSrc(final String src)
116+
{
117+
this.src = src;
118+
}
119+
120+
public LWatermarkOptions withSrc(final String src)
121+
{
122+
this.setSrc(src);
123+
return this.self();
124+
}
125+
126+
public String getWidth()
127+
{
128+
return this.width;
129+
}
130+
131+
public void setWidth(final String width)
132+
{
133+
this.width = width;
134+
}
135+
136+
public LWatermarkOptions withWidth(final String width)
137+
{
138+
this.setWidth(width);
139+
return this.self();
140+
}
141+
}
142+
}

‎vaadin-maps-leaflet-flow/src/main/java/software/xdev/vaadin/maps/leaflet/controls/LControl.java

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,21 @@ public S addTo(final LMap map)
5252
this.invokeSelf(".addTo(" + map.clientComponentJsAccessor() + ")");
5353
return this.self();
5454
}
55+
56+
/**
57+
* The possible values of position
58+
*
59+
* @see <a href="https://leafletjs.com/reference.html#control-position>Leaflet docs</a>
60+
*/
61+
public static final class Positions
62+
{
63+
public static final String TOP_LEFT = "topleft";
64+
public static final String TOP_RIGHT = "topright";
65+
public static final String BOTTOM_LEFT = "bottomleft";
66+
public static final String BOTTOM_RIGHT = "bottomright";
67+
68+
private Positions()
69+
{
70+
}
71+
}
5572
}

0 commit comments

Comments
 (0)