Skip to content

Commit

Permalink
feat: add support for adding custom control buttons
Browse files Browse the repository at this point in the history
Close #115
  • Loading branch information
paodb committed Feb 29, 2024
1 parent d8573b6 commit e6ca2ff
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/*-
* #%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%
*/

package com.flowingcode.vaadin.addons.googlemaps;

/**
* Enum representing supported control positions for map control buttons.
*/
public enum ControlPosition {

/**
* Indicates that the control should be placed along the top center of the map.
*/
TOP_CENTER,

/**
* Indicates that the control should be placed along the top left of the map, with any
* sub-elements of the control "flowing" towards the top center.
*/
TOP_LEFT,

/**
* Indicates that the control should be placed along the top right of the map, with any
* sub-elements of the control "flowing" towards the top center.
*/
TOP_RIGHT,

/**
* Indicates that the control should be placed along the top left of the map, but below any
* TOP_LEFT elements.
*/
LEFT_TOP,

/**
* Indicates that the control should be placed along the top right of the map, but below any
* TOP_RIGHT elements.
*/
RIGHT_TOP,

/**
* Indicates that the control should be placed along the left side of the map, centered between
* the TOP_LEFT and BOTTOM_LEFT positions
*/
LEFT_CENTER,

/**
* Indicates that the control should be placed along the right side of the map, centered between
* the TOP_RIGHT and BOTTOM_RIGHT positions.
*/
RIGHT_CENTER,

/**
* Indicates that the control should be placed along the bottom left of the map, but above any
* BOTTOM_LEFT elements.
*/
LEFT_BOTTOM,

/**
* Indicates that the control should be placed along the bottom right of the map, but above any
* BOTTOM_RIGHT elements.
*/
RIGHT_BOTTOM,

/**
* Indicates that the control should be placed along the bottom center of the map.
*/
BOTTOM_CENTER,

/**
* Indicates that the control should be placed along the bottom left of the map, with any
* sub-elements of the control "flowing" towards the bottom center.
*/
BOTTOM_LEFT,

/**
* Indicates that the control should be placed along the bottom right of the map, with any
* sub-elements of the control "flowing" towards the bottom center.
*/
BOTTOM_RIGHT;

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/*-
* #%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%
*/

package com.flowingcode.vaadin.addons.googlemaps;

import com.vaadin.flow.component.button.Button;
import elemental.json.Json;
import elemental.json.JsonObject;
import java.io.Serializable;
import java.util.Optional;

/**
* Represents a custom control that can be added to the map.
*
* A button to represent the custom control and the {@link ControlPosition position} where the
* button should be displayed within the map should be specified.
*
*/
public class CustomControl implements Serializable {

private static final long serialVersionUID = -1821466465711569857L;

private Button controlButton;

private ControlPosition controlPosition;

public CustomControl(Button controlButton, ControlPosition controlPosition) {
this.controlButton = controlButton;
this.controlPosition = controlPosition;
}

public Button getControlButton() {
return controlButton;
}

public void setControlButton(Button controlButton) {
this.controlButton = controlButton;
}

public ControlPosition getControlPosition() {
return controlPosition;
}

public void setControlPosition(ControlPosition controlPosition) {
this.controlPosition = controlPosition;
}

protected JsonObject getJson(int id) {
JsonObject js = Json.createObject();
js.put("id", id);
Optional.ofNullable(controlPosition)
.ifPresent(value -> js.put("position", controlPosition.name()));
return js;
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
import com.vaadin.flow.dom.DebouncePhase;
import com.vaadin.flow.dom.DomListenerRegistration;
import com.vaadin.flow.shared.Registration;
import elemental.json.Json;
import elemental.json.JsonArray;
import elemental.json.JsonObject;
import elemental.json.JsonValue;
import java.util.List;
Expand All @@ -44,7 +46,7 @@
@SuppressWarnings("serial")
@Tag("google-map")
@JsModule("@flowingcode/google-map/google-map.js")
@NpmPackage(value = "@flowingcode/google-map", version = "3.6.1")
@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
@NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
@JsModule("./googlemaps/geolocation.js")
public class GoogleMap extends Component implements HasSize {
Expand Down Expand Up @@ -625,5 +627,20 @@ public LatLonBounds getBounds() {
return bounds;
}
}


/**
* Adds custom control buttons to the map.
*
* @param customControls list of custom controls to add to the map
*/
public void addCustomControls(CustomControl... customControls) {
JsonArray jsonArray = Json.createArray();
for (int i = 0; i < customControls.length; i++) {
CustomControl customControl = customControls[i];
jsonArray.set(i, customControl.getJson(i));
customControl.getControlButton().getElement().setAttribute("slot", "customControlSlot_" + i);
this.getElement().appendChild(customControl.getControlButton().getElement());
}
this.getElement().setPropertyJson("customControls", jsonArray);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
@SuppressWarnings("serial")
@Tag("google-map-marker")
@JsModule("@flowingcode/google-map/google-map-marker.js")
@NpmPackage(value = "@flowingcode/google-map", version = "3.6.1")
@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
@NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
public class GoogleMapMarker extends Component {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
@SuppressWarnings("serial")
@Tag("google-map-point")
@JsModule("@flowingcode/google-map/google-map-point.js")
@NpmPackage(value = "@flowingcode/google-map", version = "3.6.1")
@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
@NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
public class GoogleMapPoint extends Component {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
@Tag("google-map-poly")
@JsModule("@flowingcode/google-map/google-map-poly.js")
@JsModule("@flowingcode/google-map/google-map-point.js")
@NpmPackage(value = "@flowingcode/google-map", version = "3.6.1")
@NpmPackage(value = "@flowingcode/google-map", version = "3.7.1")
@NpmPackage(value = "@googlemaps/markerclusterer", version = "2.0.8")
public abstract class GoogleMapPoly extends Component {

Expand Down

0 comments on commit e6ca2ff

Please sign in to comment.