Add Shapes To The Map

You can add several different shapes to a map. Always follow this procedure: add a specific shape to a layer group, then add the layer group to the map. You can add an unlimited number and any type of shapes to a single layer group.

In the following code sample, we're adding a point to the map:

         // Point layer creation with coordinates
final Point point = new Point("firstPoint", new Coordinates(-6.2603, 53.3498));
// LayerGrop creation
final LayerGroup layerGroup = new LayerGroup("group");
// Add the point to a layer group.
layerGroup.addLayer(point);
//Add the layer group to the map.
map.addLayerGroup(layerGroup);
        

Creating a rectangle (when creating a rectangle, the two coordinate pairs represent two corners of a rectangle):

         // Rectangle layer creation with coordinates
final Rectangle rectangle = new Rectangle("firstRectangle", new Coordinates(-6.5, 53.5), new Coordinates(-6, 53.2));
        

Creating a circle (center coordinates are specified, the radius is measured in meters):

         // Creates a circle layer with center coordinates and radius setting (in meters)
final Circle circle = new Circle("firstCircle", new Coordinates(-6.2603, 53.3498)).setRadius(5000);
        

Creating a circle point (center coordinates are specified, the radius is measured in pixels):

         // CirclePoint layer creation with coordinates and radius setting (in pixels)
final CirclePoint circlePoint = new CirclePoint("firstCirclePoint", new Coordinates(-6.2603, 53.3498)).setRadius(20);
        

Creating an area (polygon):

         // Creates an area layer with coordinates
final Area area = new Area("firstArea", new Coordinates(-6.15, 53.4), new Coordinates(-6.34, 53.34), new Coordinates(-6.18, 53.29) );
        

The coordinates specify points in a polygon. Note: A polygon is a closed shape, meaning the last point is connected to the first point.

Creating a line:

         // Line layer creation with coordinates
final Line line = new Line("firstLine", new Coordinates(-6.2603, 53.36), new Coordinates(-6.45, 53.36), new Coordinates(-6.45, 53.2));
        

Each coordinate pair represents a point on the line (e.g. waypoints in an itinerary).

Creating a popup point:

         // PopupPoint layer creation with coordinates
final PopupPoint popupPoint = new PopupPoint("firstPopupPoint", new Coordinates(-6.2603, 53.3498));
// Add content to the popupPoint
popupPoint.addComponent(new Button("Click me", ButtonType.PRIMARY).addClickHandler(event -> getUI().showNotification(NotificationType.INFO, "PopupPoint button is clicked.")));
        

A popup point is a special point that defines a fixed bubble. You can set the contents of the bubble and add any component.

Creating a DivPoint:

         // DivPoint layer creation with coordinates
final DivPoint divPoint = new DivPoint("firstDivPoint", new Coordinates(-6.2603, 53.3498));
// Add content to the divPoint
divPoint.addComponent(new HTMLFlow("<h3>" + Icon.COFFEE.drawIcon() + "</h3>"));
        

A DivPoint is a special point that allows you to enclose contents in a container. (Thus, it's a container with fixed coordinates.)

Creating a DivLayer:

         // DivLayer creation
final DivLayer divLayer = new DivLayer("firstDivLayer").addComponent(new Paragraph("This is a DivLayer content"));
map.addDivLayer(divLayer);
        

A DivLayer is a special layer. It has to be added to the Map directly, not to a layerGroup. Its upper right corner is fixed in the upper right corner of the map. The DivLayer always covers a portion of the map. Use the DivLayer to display any component (text, image, chart, etc.).