Skip to content

Commit ddd8ced

Browse files
makbnmakbn
committed
added new demo items to the vaadin demo project for vector layer
1 parent c3be9f8 commit ddd8ced

1 file changed

Lines changed: 202 additions & 3 deletions

File tree

  • jlmap-vaadin-demo/src/main/java/io/github/makbn/vaadin/demo/views

‎jlmap-vaadin-demo/src/main/java/io/github/makbn/vaadin/demo/views/HomeView.java‎

Lines changed: 202 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@
99
import io.github.makbn.jlmap.listener.event.ClickEvent;
1010
import io.github.makbn.jlmap.listener.event.Event;
1111
import io.github.makbn.jlmap.listener.event.MoveEvent;
12-
import io.github.makbn.jlmap.model.JLLatLng;
13-
import io.github.makbn.jlmap.model.JLMarker;
14-
import io.github.makbn.jlmap.model.JLOptions;
12+
import io.github.makbn.jlmap.model.*;
1513
import io.github.makbn.jlmap.vaadin.JLMapView;
1614
import org.slf4j.Logger;
1715
import org.slf4j.LoggerFactory;
@@ -99,6 +97,207 @@ public HomeView() {
9997
.build(), (Integer) event.get("Radius"),
10098
JLOptions.DEFAULT.toBuilder().draggable(true).build()).setOnActionListener((jlCircle, jlEvent)
10199
-> Notification.show(String.format("Circle '%s' Event: %s", jlCircle, jlEvent)))))
100+
101+
// NEW: Circle Marker Demo
102+
.item("Draw Circle Marker", e -> DialogBuilder.builder()
103+
.decimalField(LATITUDE)
104+
.decimalField(LONGITUDE)
105+
.numberField("Radius (pixels)")
106+
.get(event -> {
107+
JLCircleMarker circleMarker = mapView.getVectorLayer().addCircleMarker(
108+
JLLatLng.builder()
109+
.lat((Double) event.get(LATITUDE))
110+
.lng((Double) event.get(LONGITUDE))
111+
.build(),
112+
(Integer) event.get("Radius (pixels)"),
113+
JLOptions.DEFAULT.toBuilder().color(JLColor.RED).build());
114+
circleMarker.setOnActionListener((jlCircleMarker, jlEvent) ->
115+
Notification.show(String.format("Circle Marker '%s' Event: %s", jlCircleMarker, jlEvent)));
116+
}))
117+
118+
// NEW: Simple Polyline Demo
119+
.item("Draw Simple Polyline", e -> {
120+
// Create a simple polyline connecting major European cities
121+
JLLatLng[] vertices = {
122+
new JLLatLng(48.864716, 2.349014), // Paris
123+
new JLLatLng(52.520008, 13.404954), // Berlin
124+
new JLLatLng(41.902783, 12.496366), // Rome
125+
new JLLatLng(40.416775, -3.703790) // Madrid
126+
};
127+
JLPolyline polyline = mapView.getVectorLayer().addPolyline(vertices,
128+
JLOptions.DEFAULT.toBuilder().color(JLColor.BLUE).weight(5).build());
129+
polyline.setOnActionListener((jlPolyline, jlEvent) ->
130+
Notification.show(String.format("Polyline '%s' Event: %s", jlPolyline, jlEvent)));
131+
Notification.show("European Cities Route Added!");
132+
})
133+
134+
// NEW: Custom Polyline Demo
135+
.item("Draw Custom Polyline", e -> DialogBuilder.builder()
136+
.decimalField("Start Latitude")
137+
.decimalField("Start Longitude")
138+
.decimalField("Mid Latitude")
139+
.decimalField("Mid Longitude")
140+
.decimalField("End Latitude")
141+
.decimalField("End Longitude")
142+
.get(event -> {
143+
JLLatLng[] vertices = {
144+
new JLLatLng((Double) event.get("Start Latitude"), (Double) event.get("Start Longitude")),
145+
new JLLatLng((Double) event.get("Mid Latitude"), (Double) event.get("Mid Longitude")),
146+
new JLLatLng((Double) event.get("End Latitude"), (Double) event.get("End Longitude"))
147+
};
148+
JLPolyline polyline = mapView.getVectorLayer().addPolyline(vertices,
149+
JLOptions.DEFAULT.toBuilder().color(JLColor.GREEN).weight(3).build());
150+
polyline.setOnActionListener((jlPolyline, jlEvent) ->
151+
Notification.show(String.format("Custom Polyline '%s' Event: %s", jlPolyline, jlEvent)));
152+
}))
153+
154+
// NEW: Multi-Polyline Demo
155+
.item("Draw Multi-Polyline", e -> {
156+
// Create multiple connected routes
157+
JLLatLng[][] routes = {
158+
{ // Route 1: Northern Europe
159+
new JLLatLng(59.334591, 18.063240), // Stockholm
160+
new JLLatLng(60.169857, 24.938379), // Helsinki
161+
new JLLatLng(55.676097, 12.568337) // Copenhagen
162+
},
163+
{ // Route 2: Central Europe
164+
new JLLatLng(50.075538, 14.437800), // Prague
165+
new JLLatLng(47.497912, 19.040235), // Budapest
166+
new JLLatLng(48.208174, 16.373819) // Vienna
167+
}
168+
};
169+
JLMultiPolyline multiPolyline = mapView.getVectorLayer().addMultiPolyline(routes,
170+
JLOptions.DEFAULT.toBuilder().color(JLColor.PURPLE).weight(4).build());
171+
multiPolyline.setOnActionListener((jlMultiPolyline, jlEvent) ->
172+
Notification.show(String.format("Multi-Polyline '%s' Event: %s", jlMultiPolyline, jlEvent)));
173+
Notification.show("Multi-Route Network Added!");
174+
})
175+
176+
// NEW: Simple Polygon Demo
177+
.item("Draw Triangle Polygon", e -> {
178+
// Create a triangle polygon around Paris
179+
JLLatLng[][][] triangleVertices = {{
180+
{
181+
new JLLatLng(48.864716, 2.349014), // Paris center
182+
new JLLatLng(48.874716, 2.339014), // Northwest
183+
new JLLatLng(48.854716, 2.339014), // Southwest
184+
new JLLatLng(48.864716, 2.349014) // Close the triangle
185+
}
186+
}};
187+
JLPolygon polygon = mapView.getVectorLayer().addPolygon(triangleVertices,
188+
JLOptions.DEFAULT.toBuilder()
189+
.color(JLColor.ORANGE)
190+
.fillColor(JLColor.YELLOW)
191+
.fillOpacity(0.3)
192+
.build());
193+
polygon.setOnActionListener((jlPolygon, jlEvent) ->
194+
Notification.show(String.format("Triangle Polygon '%s' Event: %s", jlPolygon, jlEvent)));
195+
Notification.show("Triangle Polygon Added around Paris!");
196+
})
197+
198+
// NEW: Complex Polygon Demo
199+
.item("Draw Custom Polygon", e -> DialogBuilder.builder()
200+
.decimalField("Center Latitude")
201+
.decimalField("Center Longitude")
202+
.decimalField("Size (degrees)")
203+
.get(event -> {
204+
Double centerLat = (Double) event.get("Center Latitude");
205+
Double centerLng = (Double) event.get("Center Longitude");
206+
Double size = (Double) event.get("Size (degrees)");
207+
208+
// Create a square polygon
209+
JLLatLng[][][] squareVertices = {{
210+
{
211+
new JLLatLng(centerLat + size, centerLng - size), // Top-left
212+
new JLLatLng(centerLat + size, centerLng + size), // Top-right
213+
new JLLatLng(centerLat - size, centerLng + size), // Bottom-right
214+
new JLLatLng(centerLat - size, centerLng - size), // Bottom-left
215+
new JLLatLng(centerLat + size, centerLng - size) // Close the square
216+
}
217+
}};
218+
JLPolygon polygon = mapView.getVectorLayer().addPolygon(squareVertices,
219+
JLOptions.DEFAULT.toBuilder()
220+
.color(JLColor.RED)
221+
.fillColor(new JLColor(0.0, 1.0, 1.0)) // CYAN equivalent
222+
.fillOpacity(0.5)
223+
.weight(3)
224+
.build());
225+
polygon.setOnActionListener((jlPolygon, jlEvent) ->
226+
Notification.show(String.format("Custom Polygon '%s' Event: %s", jlPolygon, jlEvent)));
227+
}))
228+
229+
// NEW: Polygon with Hole Demo
230+
.item("Draw Polygon with Hole", e -> {
231+
// Create a polygon with a hole (like a donut)
232+
JLLatLng[][][] donutVertices = {{
233+
{ // Outer ring
234+
new JLLatLng(48.874716, 2.329014),
235+
new JLLatLng(48.874716, 2.369014),
236+
new JLLatLng(48.854716, 2.369014),
237+
new JLLatLng(48.854716, 2.329014),
238+
new JLLatLng(48.874716, 2.329014)
239+
},
240+
{ // Inner ring (hole)
241+
new JLLatLng(48.869716, 2.339014),
242+
new JLLatLng(48.869716, 2.359014),
243+
new JLLatLng(48.859716, 2.359014),
244+
new JLLatLng(48.859716, 2.339014),
245+
new JLLatLng(48.869716, 2.339014)
246+
}
247+
}};
248+
JLPolygon donutPolygon = mapView.getVectorLayer().addPolygon(donutVertices,
249+
JLOptions.DEFAULT.toBuilder()
250+
.color(new JLColor(0.0, 0.5, 0.0)) // DARK_GREEN equivalent
251+
.fillColor(new JLColor(0.5, 1.0, 0.5)) // LIGHT_GREEN equivalent
252+
.fillOpacity(0.7)
253+
.weight(2)
254+
.build());
255+
donutPolygon.setOnActionListener((jlPolygon, jlEvent) ->
256+
Notification.show(String.format("Donut Polygon '%s' Event: %s", jlPolygon, jlEvent)));
257+
Notification.show("Donut-shaped Polygon Added!");
258+
})
259+
260+
// NEW: Demo All Shapes at Once
261+
.item("Demo All Vector Shapes", e -> {
262+
// Add one of each shape type for demonstration
263+
264+
// Circle
265+
mapView.getVectorLayer().addCircle(
266+
new JLLatLng(48.864716, 2.349014), 5000,
267+
JLOptions.DEFAULT.toBuilder().color(JLColor.BLUE).fillOpacity(0.2).build());
268+
269+
// Circle Marker
270+
mapView.getVectorLayer().addCircleMarker(
271+
new JLLatLng(48.874716, 2.359014), 10,
272+
JLOptions.DEFAULT.toBuilder().color(JLColor.RED).build());
273+
274+
// Polyline
275+
JLLatLng[] lineVertices = {
276+
new JLLatLng(48.854716, 2.339014),
277+
new JLLatLng(48.864716, 2.359014)
278+
};
279+
mapView.getVectorLayer().addPolyline(lineVertices,
280+
JLOptions.DEFAULT.toBuilder().color(JLColor.GREEN).weight(3).build());
281+
282+
// Polygon
283+
JLLatLng[][][] polygonVertices = {{
284+
{
285+
new JLLatLng(48.869716, 2.344014),
286+
new JLLatLng(48.869716, 2.354014),
287+
new JLLatLng(48.859716, 2.354014),
288+
new JLLatLng(48.859716, 2.344014),
289+
new JLLatLng(48.869716, 2.344014)
290+
}
291+
}};
292+
mapView.getVectorLayer().addPolygon(polygonVertices,
293+
JLOptions.DEFAULT.toBuilder()
294+
.color(JLColor.PURPLE)
295+
.fillColor(JLColor.YELLOW)
296+
.fillOpacity(0.4)
297+
.build());
298+
299+
Notification.show("All vector shapes demonstrated! Check the map.");
300+
})
102301
.build();
103302

104303
add(accordion);

0 commit comments

Comments
 (0)