Canvas Layer

CanvasLayer is a utility layer belonging to a map by default. This layer is used to draw and display geometries on a map. It is similar to VectorLayer since they both display vector geometries. The difference is that VectorLayer works with geo-objects while CanvasLayer works just with geometries.

To obtain the canvas layer of a map, call map.getCanvas() method. Here is an example of adding a geographical point on the canvas layer:

@Autowired
private GeoMap map;

@Autowired
private GroupTable<Order> ordersTable;

@Subscribe("showOrder")
public void onShowOrderClick(Button.ClickEvent event) {
    CanvasLayer canvasLayer = map.getCanvas();
    Point point = ordersTable.getSingleSelected().getLocation();
    canvasLayer.addPoint(point);
}

Methods that add geometries on a canvas return an object that represents this geometry on the canvas: CanvasLayer.Point, CanvasLayer.Polyline or CanvasLayer.Polygon. Using this object, you can define a style or pop-up window, subscribe to events connected with the geometry, or use this object when you want to remove the geometry from the canvas.

Here is an example of setting style for the point:

@Autowired
private GeoMap map;

@Autowired
private GroupTable<Order> ordersTable;

@Autowired
private GeometryStyles geometryStyles;

protected void drawGeometry() {
    Order order = ordersTable.getSingleSelected();
    CanvasLayer canvasLayer = map.getCanvas();

    CanvasLayer.Point location = canvasLayer.addPoint(order.getLocation());
    location.setStyle(
            geometryStyles.point()
                    .withFontIcon(JmixIcon.HOME)
                    .setIconPathFillColor("#f4d142")
                    .setIconTextFillColor("black")
                    .setIconPathStrokeColor("black"))
            .setEditable(true);
}

You can also draw geometries on the canvas via UI. For example, to draw a point invoke canvas.drawPoint() method. After this method is called the map will turn into the drawing mode. The method accepts Consumer<CanvasLayer.Point> function, in which you can perform additional actions with the drawn point.

@Autowired
private GeoMap map;

@Autowired
private GroupTable<Order> ordersTable;

@Subscribe("drawPoint")
private void onDrawPointClick(Button.ClickEvent event) {
    CanvasLayer canvasLayer = map.getCanvas();
    canvasLayer.drawPoint(point -> {
        ordersTable.getSingleSelected().setLocation(point.getGeometry());
    });
}
Before drawing geometries via UI on the canvas, you need to select the canvas on the map by calling map.selectLayerById(CanvasLayer.ID).

You can also specify the selected layer in the XML descriptor:

<maps:geoMap id="map" width="50%" centerX="40" centerY="40" zoom="4">
    <maps:layers selectedLayer="CANVAS">
        <maps:tile id="tiles" tileProvider="sample_CartoTileProvider"/>
    </maps:layers>
</maps:geoMap>