2.3. MapViewer Component

You can display maps in your application screens using the com.haulmont.charts.gui.components.map.MapViewer component.

To add the component, declare the chart namespace in the root element of the screen XML descriptor:

<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd"
        ...>

XML-name of the component: mapViewer. Component declaration example:

<layout>
    <vbox id="mapBox" height="100%">
        <chart:mapViewer id="map" width="100%" height="100%"/>
    </vbox>
</layout>

You can define the following component parameters in the screen XML-descriptor:

  • id, width, height - standard component properties.

  • mapType - map type corresponding to the MapViewer.Type: roadmap, satellite, hybrid, terrain. Default is roadmap.

  • vendor - map service provider. Currently the only supported value is google.

Main configuration of the map and its components is performed in a screen controller. For this, you only need to inject the component declared in the XML-descriptor:

@Inject
private MapViewer map;

@Override
public void init(Map<String, Object> params) {
    GeoPoint center = map.createGeoPoint(53.490905, -2.249558);
    map.setCenter(center);
}

  • Map configuration methods:

    • setZoom() - sets the map zoom level.

    • setCenter() - sets the map center point.

    • setVisibleAreaBoundLimitsEnabled() - enables visible area limitation mode.

    • setVisibleAreaBoundLimits() - sets boundaries of the visible area of the map.

    • fitToBounds() - sets the minimum map zoom as the one which will be sufficient to show in full an area limited by north-eastern and south-western coordinates.

    • setMaxZoom() - sets the maximum available zoom level.

    • setMinZoom() - sets the minimum available zoom level.

    • setDraggable() - enables/disables map dragging mode.

    • setKeyboardShortcutsEnabled() - enables/disables keyboard shortcuts.

    • setScrollWheelEnabled() - enables/disables map zoom with a mouse scroll wheel.

    • setMapType() - defines map type.

  • Map component interfaces (can be found in com.haulmont.charts.gui.map.model package):

    • GeoPoint - an auxiliary component, which is not displayed on the map. This component can be used to set such map parameters as the center point, boundaries, or to create more complex map components. The object can be created using the createGeoPoint()`method of the `MapViewer interface. For example:

      GeoPoint center = map.createGeoPoint(53.490905, -2.249558);
map.setCenter(center);

    • Marker - a component that marks a location on the map. By default, a standard icon of the map service vendor is used. You can use the createMarker() and addMarker()`methods of the `MapViewer interface to create this object and put it on a map. For example:

      Marker marker = map.createMarker("My place", map.createGeoPoint(53.590905, -2.249558), true);
marker.setClickable(true);
map.addMarker(marker);

    • Polyline - a component that displays a polyline. You can use the createPolyline() and addPolyline() methods of the MapViewer interface to create this object and put it on a map. For example:

      List<GeoPoint> coordinates = new ArrayList<>();
coordinates.add(map.createGeoPoint(53.49, -2.54));
coordinates.add(map.createGeoPoint(53.49, -2.22));
coordinates.add(map.createGeoPoint(53.89, -2.22));
coordinates.add(map.createGeoPoint(53.99, -2.94));
Polyline polyline = map.createPolyline(coordinates);
map.addPolyline(polyline);

    • Polygon - a component that displays a polygon. You can use the createPolygon() and addPolygonOverlay() methods of the MapViewer interface to create this object and put it on a map. For example:

      List<GeoPoint> coordinates = new ArrayList<>();
coordinates.add(map.createGeoPoint(53.49, -2.54));
coordinates.add(map.createGeoPoint(53.49, -2.22));
coordinates.add(map.createGeoPoint(53.89, -2.22));
coordinates.add(map.createGeoPoint(53.99, -2.94));
Polygon p = map.createPolygon(coordinates, "#9CFBA9", 0.6, "#2CA860", 1.0, 2);
map.addPolygonOverlay(p);

    • InfoWindow - a map component that displays information in a pop-up window. You can use the createInfoWindow() and openInfoWindow() methods of the MapViewer interface to create this object and put it on a map. For example:

      InfoWindow w = map.createInfoWindow("Some text");
map.openInfoWindow(w);

      Information window can be tied to a marker, for example:

      map.addMarkerClickListener(new MarkerClickListener() {
    @Override
    public void onClick(MarkerClickEvent event) {
        Marker marker = event.getMarker();
        String caption = String.format("Marker clicked: %.2f, %.2f",
                marker.getPosition().getLatitude(),
                marker.getPosition().getLongitude());
        InfoWindow w = map.createInfoWindow(caption, marker);
        map.openInfoWindow(w);
    }
});

    • HeatMapLayer - a map layer showing a heat map intended to display data density distribution across different geopoints. Data density is highlighted with color. By default, regions with higher points density are displayed in red and regions with lower density – in green. You can use the createHeatMapLayer() and addHeatMapLayer() methods of the MapViewer interface to create this object and put it on a map. For example:

      HeatMapLayer heatMapLayer = map.createHeatMapLayer();
List<GeoPoint> data = new ArrayList<>();
data.add(map.createGeoPoint(53.450, -2.00));
data.add(map.createGeoPoint(53.451, -2.00));
data.add(map.createGeoPoint(53.452, -2.00));
data.add(map.createGeoPoint(53.453, -2.00));
data.add(map.createGeoPoint(53.454, -2.00));
heatMapLayer.setData(data);
map.addHeatMapLayer(heatMapLayer);

      The data used for the heat map layer can be changed using a separate setData() method. This change does not require re-adding the layer to the map.

    • DrawingOptions - auxiliary drawing component. Only polygon drawing is currently supported. Drawing mode can be enabled by passing an instance of DrawingOptions to the MapViewer. Example:

      DrawingOptions options = new DrawingOptions();
PolygonOptions polygonOptions = new PolygonOptions(true, true, "#993366", 0.6);
ControlOptions controlOptions = new ControlOptions(
    Position.TOP_CENTER, Arrays.asList(OverlayType.POLYGON));
options.setEnableDrawingControl(true);
options.setPolygonOptions(polygonOptions);
options.setDrawingControlOptions(controlOptions);
options.setInitialDrawingMode(OverlayType.POLYGON);
map.setDrawingOptions(options);

  • Event listeners (located in the com.haulmont.charts.gui.map.model.listeners) package):

    • MapMoveListener - user drags a map with a mouse button pressed.

    • MapClickListener - user clicks on a map.

    • MarkerClickListener - user clicks on a marker.

    • MarkerDragListener - user drags a marker.

    • InfoWindowClosedListener - user closes an information window.

    • PolygonCompleteListener - user creates a polygon in map editing mode.

    • PolygonEditListener - user edits a polygon (moves or adds a vertex to an existing polygon).

    • MapInitListener - map initialization complete. This listener is invoked once after the first load of the map when all the tiles are loaded and coordinates are available.

For a more detailed information about the methods and parameters of map components, please refer to the corresponding JavaDocs.