diff --git a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GeolocationDemo.java b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GeolocationDemo.java index 89ef83f..a9fd1dc 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GeolocationDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/googlemaps/GeolocationDemo.java @@ -23,15 +23,19 @@ import com.flowingcode.vaadin.addons.demo.DemoSource; import com.flowingcode.vaadin.addons.googlemaps.GoogleMap.MapType; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.dependency.CssImport; +import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.component.notification.Notification; -import com.vaadin.flow.component.orderedlayout.FlexLayout; -import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexWrap; import com.vaadin.flow.router.PageTitle; import com.vaadin.flow.router.Route; @PageTitle("Geolocation Demo") @DemoSource +@DemoSource( + value = "/src/test/resources/META-INF/resources/frontend/styles/google-maps/geolocation-demo-styles.css", + caption = "geolocation-demo-styles.css") @Route(value = "googlemaps/geolocation", layout = GooglemapsDemoView.class) +@CssImport("./styles/google-maps/geolocation-demo-styles.css") @SuppressWarnings("serial") public class GeolocationDemo extends AbstractGoogleMapsDemo { @@ -40,22 +44,21 @@ protected void createGoogleMapsDemo(String apiKey) { GoogleMap gmaps = new GoogleMap(apiKey, null, null); gmaps.setMapType(MapType.ROADMAP); gmaps.setSizeFull(); + add(gmaps); - FlexLayout layout = new FlexLayout(); - layout.setFlexWrap(FlexWrap.WRAP); - layout.add(new Button("Go to current location", e -> gmaps.goToCurrentLocation())); - add(gmaps, layout); + // create custom control button to pan to current location + Button currentLocationButton = new Button("Go to current location", + VaadinIcon.CROSSHAIRS.create(), e -> gmaps.goToCurrentLocation()); + currentLocationButton.setClassName("geolocation-button"); + CustomControl geolocationControl = + new CustomControl(currentLocationButton, ControlPosition.TOP_CENTER); + gmaps.addCustomControls(geolocationControl); - gmaps.addCurrentLocationEventListener( - e -> - gmaps.addMarker( - new GoogleMapMarker("You are here!", gmaps.getCenter(), false, Markers.GREEN))); + gmaps.addCurrentLocationEventListener(e -> gmaps + .addMarker(new GoogleMapMarker("You are here!", gmaps.getCenter(), false, Markers.GREEN))); - gmaps.addGeolocationErrorEventListener( - e -> - Notification.show( - e.isBrowserHasGeolocationSupport() - ? "The geolocation service failed on retrieving your location." - : "Your browser doesn't support geolocation.")); + gmaps.addGeolocationErrorEventListener(e -> Notification.show(e.isBrowserHasGeolocationSupport() + ? "The geolocation service failed on retrieving your location." + : "Your browser doesn't support geolocation.")); } } diff --git a/src/test/resources/META-INF/resources/frontend/styles/google-maps/geolocation-demo-styles.css b/src/test/resources/META-INF/resources/frontend/styles/google-maps/geolocation-demo-styles.css new file mode 100644 index 0000000..0d1ebd6 --- /dev/null +++ b/src/test/resources/META-INF/resources/frontend/styles/google-maps/geolocation-demo-styles.css @@ -0,0 +1,31 @@ +/*- + * #%L + * Google Maps Addon + * %% + * Copyright (C) 2020 - 2024 Flowing Code + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * #L% + */ + +.geolocation-button { + background: white; + margin: 10px; + height: 40px; + color: black; + cursor: pointer; + font-family: Arial; + font-size: 18px; + border-radius: 0; + box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; +} \ No newline at end of file