|
| 1 | +package software.xdev.vaadin.maps.leaflet.flow.demo; |
| 2 | + |
| 3 | +import java.util.Arrays; |
| 4 | +import java.util.List; |
| 5 | + |
| 6 | +import com.vaadin.flow.component.ClickEvent; |
| 7 | +import com.vaadin.flow.component.button.Button; |
| 8 | +import com.vaadin.flow.component.dialog.Dialog; |
| 9 | +import com.vaadin.flow.component.html.AnchorTarget; |
| 10 | +import com.vaadin.flow.component.icon.Icon; |
| 11 | +import com.vaadin.flow.component.icon.VaadinIcon; |
| 12 | +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; |
| 13 | +import com.vaadin.flow.component.orderedlayout.VerticalLayout; |
| 14 | +import com.vaadin.flow.router.Route; |
| 15 | + |
| 16 | +import software.xdev.vaadin.maps.leaflet.flow.LMap; |
| 17 | +import software.xdev.vaadin.maps.leaflet.flow.data.LCenter; |
| 18 | +import software.xdev.vaadin.maps.leaflet.flow.data.LCircle; |
| 19 | +import software.xdev.vaadin.maps.leaflet.flow.data.LComponent; |
| 20 | +import software.xdev.vaadin.maps.leaflet.flow.data.LDivIcon; |
| 21 | +import software.xdev.vaadin.maps.leaflet.flow.data.LIcon; |
| 22 | +import software.xdev.vaadin.maps.leaflet.flow.data.LMarker; |
| 23 | +import software.xdev.vaadin.maps.leaflet.flow.data.LPoint; |
| 24 | +import software.xdev.vaadin.maps.leaflet.flow.data.LPolygon; |
| 25 | +import software.xdev.vaadin.maps.leaflet.flow.data.LTileLayer; |
| 26 | + |
| 27 | + |
| 28 | +@Route("") |
| 29 | +public class LeafletView extends VerticalLayout |
| 30 | +{ |
| 31 | + private boolean viewLunch = false; |
| 32 | + |
| 33 | + /** |
| 34 | + * UI-Components |
| 35 | + */ |
| 36 | + private final Button btnLunch = new Button("Where do XDEV employees go for lunch?"); |
| 37 | + |
| 38 | + private LMap map; |
| 39 | + |
| 40 | + private LMarker markerZob; |
| 41 | + private LMarker markerRathaus; |
| 42 | + |
| 43 | + private LCircle circleRange; |
| 44 | + private LMarker markerPizza; |
| 45 | + private LMarker markerKebab; |
| 46 | + private LMarker markerAsia; |
| 47 | + private LMarker markerGreek; |
| 48 | + private LMarker markerBakery; |
| 49 | + private LMarker markerLeberkaese; |
| 50 | + |
| 51 | + public LeafletView() |
| 52 | + { |
| 53 | + this.initMapComponents(); |
| 54 | + |
| 55 | + this.btnLunch.addClickListener(this::btnLunchClick); |
| 56 | + |
| 57 | + final HorizontalLayout hlButtonContainer = new HorizontalLayout(); |
| 58 | + hlButtonContainer.setWidthFull(); |
| 59 | + hlButtonContainer.setJustifyContentMode(JustifyContentMode.BETWEEN); |
| 60 | + hlButtonContainer.setPadding(false); |
| 61 | + hlButtonContainer.setSpacing(false); |
| 62 | + hlButtonContainer.add( |
| 63 | + this.btnLunch, |
| 64 | + new Button("Open dialog over map", ev -> |
| 65 | + { |
| 66 | + final Icon icoClose = VaadinIcon.CLOSE.create(); |
| 67 | + |
| 68 | + final Dialog dialog = new Dialog(icoClose); |
| 69 | + dialog.setWidth("50vw"); |
| 70 | + dialog.setHeight("50vh"); |
| 71 | + dialog.open(); |
| 72 | + |
| 73 | + icoClose.addClickListener(iev -> dialog.close()); |
| 74 | + })); |
| 75 | + |
| 76 | + this.add(this.map, hlButtonContainer); |
| 77 | + this.setSizeFull(); |
| 78 | + } |
| 79 | + |
| 80 | + private void btnLunchClick(final ClickEvent<Button> event) |
| 81 | + { |
| 82 | + this.viewLunch = !this.viewLunch; |
| 83 | + |
| 84 | + final List<LComponent> normalComponents = Arrays.asList(this.markerRathaus, this.markerZob); |
| 85 | + final List<LComponent> lunchComponents = Arrays.asList( |
| 86 | + this.circleRange, |
| 87 | + this.markerPizza, |
| 88 | + this.markerKebab, |
| 89 | + this.markerAsia, |
| 90 | + this.markerGreek, |
| 91 | + this.markerBakery, |
| 92 | + this.markerLeberkaese); |
| 93 | + |
| 94 | + this.map.setViewPoint(new LCenter(49.675126, 12.160733, this.viewLunch ? 16 : 17)); |
| 95 | + this.map.removeLComponents(this.viewLunch ? normalComponents : lunchComponents); |
| 96 | + this.map.addLComponents(this.viewLunch ? lunchComponents : normalComponents); |
| 97 | + |
| 98 | + this.btnLunch.setText(this.viewLunch ? "Go back to the normal view" : "Where do XDEV employees go for lunch?"); |
| 99 | + } |
| 100 | + |
| 101 | + private void initMapComponents() |
| 102 | + { |
| 103 | + this.markerZob = new LMarker(49.673470, 12.160108, "ZoB"); |
| 104 | + this.markerZob.setPopup("Central bus station"); |
| 105 | + |
| 106 | + final LMarker markerXDev = new LMarker(49.675806677512824, 12.160990185846394); |
| 107 | + final LIcon xDevLogo = new LIcon( |
| 108 | + // Important replace # with %23! |
| 109 | + "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1000\" height=\"200\" viewBox=\"0 0 18300 4500\" style=\"background-color:rgba(180,180,180,0.7)\">\n" |
| 110 | + + " <defs>\n" |
| 111 | + + " <style>\n" |
| 112 | + + " .fil0{fill:%23d71e23}\n" |
| 113 | + + " </style>\n" |
| 114 | + + " </defs>\n" |
| 115 | + + " <g>\n" |
| 116 | + + " <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)\"/>\n" |
| 117 | + + " <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)\"/>\n" |
| 118 | + + " </g>\n" |
| 119 | + + "</svg>"); |
| 120 | + |
| 121 | + xDevLogo.setIconSize(100, 20); |
| 122 | + xDevLogo.setIconAnchor(50, 0); |
| 123 | + markerXDev.setPopup("<a href='https://xdev.software/en' target='" + AnchorTarget.BLANK.getValue() + "'>XDEV Software GmbH</a>"); |
| 124 | + markerXDev.setIcon(xDevLogo); |
| 125 | + |
| 126 | + final LMarker markerInfo = new LMarker(49.674095, 12.162257); |
| 127 | + final LDivIcon div = new LDivIcon( |
| 128 | + "<p><center><b>Welcome to Weiden in der Oberpfalz!</b></center></p><p>This demo shows you different markers,<br> popups, polygons and other stuff</p>"); |
| 129 | + |
| 130 | + markerInfo.setDivIcon(div); |
| 131 | + |
| 132 | + final LPolygon polygonNoc = new LPolygon( |
| 133 | + Arrays.asList( |
| 134 | + new LPoint(49.674883, 12.159098), |
| 135 | + new LPoint(49.675719, 12.160248), |
| 136 | + new LPoint(49.676080, 12.159985), |
| 137 | + new LPoint(49.675750, 12.158008), |
| 138 | + new LPoint(49.675306, 12.158499))); |
| 139 | + polygonNoc.setFill(true); |
| 140 | + polygonNoc.setFillColor("#3366ff"); |
| 141 | + polygonNoc.setFillOpacity(0.8); |
| 142 | + polygonNoc.setStroke(false); |
| 143 | + polygonNoc.setPopup("NOC-Nordoberpfalz Center"); |
| 144 | + |
| 145 | + this.markerRathaus = new LMarker(49.675519, 12.163868, "L-22556"); |
| 146 | + this.markerRathaus.setPopup("Old Town Hall"); |
| 147 | + |
| 148 | + this.circleRange = new LCircle(49.675126, 12.160733, 450); |
| 149 | + |
| 150 | + this.markerPizza = new LMarker(49.674413, 12.160925); |
| 151 | + this.markerPizza.setPopup("Pizza!"); |
| 152 | + |
| 153 | + this.markerKebab = new LMarker(49.673026, 12.156278); |
| 154 | + this.markerKebab.setPopup("Kebab!"); |
| 155 | + |
| 156 | + this.markerAsia = new LMarker(49.675039, 12.162127); |
| 157 | + this.markerAsia.setPopup("Asian Food"); |
| 158 | + |
| 159 | + this.markerGreek = new LMarker(49.675126, 12.161899); |
| 160 | + this.markerGreek.setPopup("Greek Food"); |
| 161 | + |
| 162 | + this.markerBakery = new LMarker(49.674806, 12.160249); |
| 163 | + this.markerBakery.setPopup("Fresh baked stuff"); |
| 164 | + |
| 165 | + this.markerLeberkaese = new LMarker(49.673800, 12.160113); |
| 166 | + this.markerLeberkaese.setPopup("Fast food like Leberkäsesemmeln"); |
| 167 | + |
| 168 | + this.map = new LMap(49.675126, 12.160733, 17); |
| 169 | + this.map.setTileLayer(LTileLayer.DEFAULT_OPENSTREETMAP_TILE); |
| 170 | + |
| 171 | + this.map.setSizeFull(); |
| 172 | + // add some logic here for called Markers (token) |
| 173 | + this.map.addMarkerClickListener(ev -> System.out.println(ev.getTag())); |
| 174 | + |
| 175 | + this.map.addLComponents( |
| 176 | + markerXDev, |
| 177 | + markerInfo, |
| 178 | + this.markerZob, |
| 179 | + polygonNoc, |
| 180 | + this.markerRathaus); |
| 181 | + } |
| 182 | +} |
0 commit comments