Skip to content

Commit b369947

Browse files
AB-xdevAB-xdev
committed
Add multi-layer/pyramid demo
1 parent 16da47c commit b369947

File tree

2 files changed

+210
-0
lines changed

2 files changed

+210
-0
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import software.xdev.vaadin.maps.leaflet.flow.demo.FreeingUpResourceBenchmarkDemo;
1818
import software.xdev.vaadin.maps.leaflet.flow.demo.InitialResizeDemo;
1919
import software.xdev.vaadin.maps.leaflet.flow.demo.MinimalisticDemo;
20+
import software.xdev.vaadin.maps.leaflet.flow.demo.MultiLayerWithPyramidDemo;
2021
import software.xdev.vaadin.maps.leaflet.flow.demo.NotOfThisEarthDemo;
2122
import software.xdev.vaadin.maps.leaflet.flow.demo.WatermarkControlDemo;
2223

@@ -35,6 +36,7 @@ public DemoView()
3536

3637
final Span spDesc = new Span(example.desc());
3738
spDesc.getStyle().set("font-size", "90%");
39+
spDesc.getStyle().set("white-space", "pre");
3840

3941
final VerticalLayout vl = new VerticalLayout(anchor, spDesc);
4042
vl.setSpacing(false);
@@ -79,6 +81,12 @@ protected void onAttach(final AttachEvent attachEvent)
7981
"Watermark-Control",
8082
"Creates a custom control interface"
8183
),
84+
new Example(
85+
MultiLayerWithPyramidDemo.NAV,
86+
"Multi-Layer",
87+
"using Pyramids ▲ and more...\n"
88+
+ "Showcases a selection of different layers and how they can be displayed on a map"
89+
),
8290
new Example(
8391
FreeingUpResourceBenchmarkDemo.NAV,
8492
"Freeing up resources Benchmark",

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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
package software.xdev.vaadin.maps.leaflet.flow.demo;
2+
3+
import java.util.List;
4+
5+
import com.vaadin.flow.component.html.Anchor;
6+
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
7+
import com.vaadin.flow.component.treegrid.TreeGrid;
8+
import com.vaadin.flow.router.Route;
9+
10+
import software.xdev.vaadin.maps.leaflet.MapContainer;
11+
import software.xdev.vaadin.maps.leaflet.basictypes.LLatLng;
12+
import software.xdev.vaadin.maps.leaflet.layer.LLayerGroup;
13+
import software.xdev.vaadin.maps.leaflet.layer.raster.LTileLayer;
14+
import software.xdev.vaadin.maps.leaflet.layer.vector.LPolygon;
15+
import software.xdev.vaadin.maps.leaflet.map.LMap;
16+
import software.xdev.vaadin.maps.leaflet.registry.LComponentManagementRegistry;
17+
import software.xdev.vaadin.maps.leaflet.registry.LDefaultComponentManagementRegistry;
18+
19+
20+
@Route(MultiLayerWithPyramidDemo.NAV)
21+
@SuppressWarnings("checkstyle:MagicNumber")
22+
public class MultiLayerWithPyramidDemo extends HorizontalLayout
23+
{
24+
public static final String NAV = "/multilayer";
25+
26+
private static final List<BuildingData> DATA = List.of(
27+
new BuildingComplex(
28+
"Pyramids ▲",
29+
List.of(
30+
new Building(
31+
"Great Pyramid of Giza",
32+
"https://en.wikipedia.org/wiki/Great_Pyramid_of_Giza",
33+
createRectangleDataPoints(29.980138, 31.133104, 29.978121, 31.135367)),
34+
new Building(
35+
"Pyramid of Khafre",
36+
"https://en.wikipedia.org/wiki/Pyramid_of_Khafre",
37+
createRectangleDataPoints(29.976912, 31.129671, 29.974964, 31.1318537)),
38+
new Building(
39+
"Pyramid of Menkaure",
40+
"https://en.wikipedia.org/wiki/Pyramid_of_Menkaure",
41+
createRectangleDataPoints(29.972898, 31.127787, 29.972039, 31.1287585)))
42+
),
43+
new BuildingComplex(
44+
"Other",
45+
List.of(
46+
new Building(
47+
"Sphinx 🐈",
48+
"https://en.wikipedia.org/wiki/Great_Sphinx_of_Giza",
49+
List.of(
50+
new DataPoint(29.975283598029613, 31.137253754493454),
51+
new DataPoint(29.97535970910997, 31.137377101561537),
52+
new DataPoint(29.975335184460793, 31.13753679603173),
53+
new DataPoint(29.975318920391995, 31.13770108133231),
54+
new DataPoint(29.975354933683573, 31.137749361094116),
55+
new DataPoint(29.975336346179866, 31.13798405438065),
56+
new DataPoint(29.975286973106307, 31.137998135977842),
57+
new DataPoint(29.975285230526783, 31.137849943931197),
58+
new DataPoint(29.97525560667033, 31.137858661110414),
59+
new DataPoint(29.975253864090273, 31.137986066037392),
60+
new DataPoint(29.97520565269632, 31.137990759903126),
61+
new DataPoint(29.97518358000214, 31.137748690541862),
62+
new DataPoint(29.975196939791317, 31.1377151629295),
63+
new DataPoint(29.975199844093044, 31.137524055539036),
64+
new DataPoint(29.97517719053711, 31.13737251073115)
65+
)),
66+
new Building(
67+
"Tomb of Queen Khentkaus I",
68+
"https://en.wikipedia.org/wiki/Pyramid_of_Khentkaus_I",
69+
createRectangleDataPoints(29.973586, 31.135233, 29.973164, 31.135737)
70+
)
71+
)
72+
)
73+
);
74+
75+
private final LComponentManagementRegistry reg;
76+
77+
private LLayerGroup activeLayerGroup;
78+
79+
public MultiLayerWithPyramidDemo()
80+
{
81+
// Let the view use 100% of the site
82+
this.setSizeFull();
83+
84+
final TreeGrid<BuildingData> treeGrid = new TreeGrid<>();
85+
treeGrid.addHierarchyColumn(BuildingData::name)
86+
.setHeader("Building");
87+
treeGrid.setItems(DATA, BuildingData::nested);
88+
treeGrid.setHeightFull();
89+
treeGrid.setMinWidth("18em");
90+
treeGrid.setWidth("20%");
91+
92+
this.add(treeGrid);
93+
94+
// Create the registry which is needed so that components can be reused and their methods invoked
95+
// Note: You normally don't need to invoke any methods of the registry and just hand it over to the components
96+
this.reg = new LDefaultComponentManagementRegistry(this);
97+
98+
// Create and add the MapContainer (which contains the map) to the UI
99+
final MapContainer mapContainer = new MapContainer(this.reg);
100+
mapContainer.setSizeFull();
101+
this.add(mapContainer);
102+
103+
final LMap map = mapContainer.getlMap();
104+
105+
// Add a (default) TileLayer so that we can see something on the map
106+
map.addLayer(LTileLayer.createDefaultForOpenStreetMapTileServer(this.reg));
107+
108+
// Set what part of the world should be shown
109+
map.setView(new LLatLng(this.reg, 29.9759, 31.1350), 17);
110+
111+
treeGrid.addSelectionListener(ev ->
112+
{
113+
if(this.activeLayerGroup != null)
114+
{
115+
this.activeLayerGroup.removeFrom(map);
116+
this.activeLayerGroup = null;
117+
118+
// Free up memory if needed
119+
this.reg.freeUpClient();
120+
}
121+
122+
ev.getFirstSelectedItem().ifPresent(buildingData -> {
123+
this.activeLayerGroup = new LLayerGroup(this.reg);
124+
125+
if(buildingData instanceof final BuildingComplex complex)
126+
{
127+
complex.buildings().forEach(this::createPolygonAndAddToActiveLayerGroup);
128+
}
129+
else if(buildingData instanceof final Building building)
130+
{
131+
this.createPolygonAndAddToActiveLayerGroup(building);
132+
}
133+
134+
map.addLayer(this.activeLayerGroup);
135+
});
136+
});
137+
138+
DATA.forEach(treeGrid::expand);
139+
treeGrid.select(DATA.get(0));
140+
}
141+
142+
private void createPolygonAndAddToActiveLayerGroup(final Building building)
143+
{
144+
new LPolygon(this.reg, building.dataPoints().stream()
145+
.map(dp -> new LLatLng(this.reg, dp.lat(), dp.lng()))
146+
.toList())
147+
.bindPopup(new Anchor(building.url(), building.name()).getElement().getOuterHTML())
148+
.addTo(this.activeLayerGroup);
149+
}
150+
151+
record BuildingComplex(
152+
String name,
153+
List<Building> buildings
154+
) implements BuildingData
155+
{
156+
@Override
157+
public List<BuildingData> nested()
158+
{
159+
return this.buildings()
160+
.stream()
161+
.map(BuildingData.class::cast)
162+
.toList();
163+
}
164+
}
165+
166+
167+
record Building(
168+
String name,
169+
String url,
170+
List<DataPoint> dataPoints
171+
) implements BuildingData
172+
{
173+
@Override
174+
public List<BuildingData> nested()
175+
{
176+
return List.of();
177+
}
178+
}
179+
180+
interface BuildingData
181+
{
182+
String name();
183+
184+
List<BuildingData> nested();
185+
}
186+
187+
static List<DataPoint> createRectangleDataPoints(
188+
final double lat1, final double lng1,
189+
final double lat2, final double lng2)
190+
{
191+
return List.of(
192+
new DataPoint(lat1, lng1),
193+
new DataPoint(lat1, lng2),
194+
new DataPoint(lat2, lng2),
195+
new DataPoint(lat2, lng1)
196+
);
197+
}
198+
199+
record DataPoint(double lat, double lng)
200+
{
201+
}
202+
}

0 commit comments

Comments
 (0)