Search code examples
javagoogle-mapswicketwicketstuff

Wicket, GMap3, Overlay Click event, where did the user click? What is the coordinate (GLatLng)?


I have a GCircle on a Wicket GMap3. I want the user to be able to click on the map (add/remove markers) both in the circle, as well as out of the circle. Problem: the click event on the circle is not propagated to the map, as far as I understand, becaues the GCircle component adds the circle to the map as an overlay. I want to solve this by calling the Map's click event handler from the Circle event handler.

Here comes the strange problem: I cannot extract the latitude/longitude that was below the cursor when the click event occurred on the circle. This is how I create the circle and bind the event on it:

        GLatLng center = new GLatLng(47.46133874643204, 19.054965020623058);
        LOGGER.debug("Circle center:{}", center);

        // settings of the polygon's circle
        GCircle circle = new GCircle(center, shapeModelObject.getRadius(), "RED", 3, 1f, "", 0).
                setClickable(true).
                setEditable(true).
                setVisible(true).
                setDraggable(true);

        circle.addListener(GEvent.click, new GEventHandler() {
            @Override
            public void onEvent(AjaxRequestTarget target) {
                Request request = getRequest();
                IRequestParameters params = request.getRequestParameters();
                debugParameterValues(params);
                String latLng = params.getParameterValue("overlay.latLng").toString();

                latLng = latLng.substring(1, latLng.length() - 1);
                String[] d = latLng.split(",");
                Double lat = Double.valueOf(d[0].trim());
                Double lng = Double.valueOf(d[1].trim());
                GLatLng gLatLng = new GLatLng(lat, lng);
                LOGGER.debug("Click gLatLng:{}", gLatLng);
            }
        });
        map.addOverlay(circle);

This is the circle center in the logs:

Circle center:new google.maps.LatLng(47.46133874643204, 19.054965020623058, false)

This is what the Ajax request parameters look like /debugParameterValues(params);/:

Parameter name=5-1.IBehaviorListener.1-content-form-map-map, value=
Parameter name=id, value=444
Parameter name=argument0, value=[object Object]
Parameter name=overlay.latLng, value=(47.46133874643204, 19.054965020623058)
Parameter name=overlay.radius, value=500
Parameter name=overlay.overlayId, value=overlay831
Parameter name=overlay.event, value=click
Parameter name=center, value=(47.46096156028599, 19.052862168755382)
Parameter name=bounds, value=((47.45225641835252, 19.03792762896046), (47.46966526106453, 19.067796708550304))
Parameter name=zoom, value=15
Parameter name=currentMapType, value=ROADMAP
Parameter name=_, value=1394015901116

This is the result of LOGGER.debug("Click gLatLng:{}", gLatLng);, exactly the same as the circle center, no matter where the user clicks:

Click gLatLng:new google.maps.LatLng(47.46133874643204, 19.054965020623058, false)

Wicket version:

    <dependency>
        <groupId>org.wicketstuff</groupId>
        <artifactId>wicketstuff-gmap3</artifactId>
        <version>6.12.0</version>
    </dependency>

How can I extract the latitude/longitude that was below the cursor when the click event occurred on the circle? Thanks


Solution

  • Setting the z-index will solve the original problem, that is, the circle will not block clicking on the map.

    circle.setZIndex(1);