Layers

Basically, layers are divided into raster and vector layers. Raster layers consist of raster images, while vector layers consist of vector geometries.

To add a layer on a map declare the layers element and its configuration in the geoMap element in the XML descriptor. Here is an example of the map with one raster and one vector layer.

<maps:geoMap id="map" height="400px" width="800px" center="-99.755859, 39.164141" zoom="4">
    <maps:layers selectedLayer="orderLayer">
        <maps:tile id="tileLayer"
                   urlPattern="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                   attribution="&#169; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;
                       OpenStreetMap&lt;/a&gt; contributors"/>
        <maps:vector id="orderLayer" dataContainer="orderDc" editable="true"/>
    </maps:layers>
</maps:geoMap>

selectedLayer is a layer which the map is focused on. Selected layer fires events, reacts on user clicks and can be modified by UI interaction in case the layer is editable.

Parameters are common for every type of layers:

  • id — required parameter, specifies the id of the layer.

  • visible — whether the layer is visible.

  • minZoom — minimum zoom level down to which the layer is visible (inclusive).

  • maxZoom — maximum zoom level up to which the layer is visible (inclusive).

Also, you can add layers and perform configuration of the layers in the screen controller:

@Autowired
private GeoMap map;

@Autowired
private InstanceContainer<Order> orderDc;

@Subscribe
public void onBeforeShow(BeforeShowEvent event) {
    TileLayer tileLayer = new TileLayer("tileLayer");
    tileLayer.setUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
    tileLayer.setAttributionString("&copy; <a href=\"http://www.openstreetmap.org/copyright\"" +
            ">OpenStreetMap</a> &copy; <a href=\"https://carto.com/attributions\">CARTO</a>");
    map.addLayer(tileLayer);
    VectorLayer<Order> orderLayer = new VectorLayer<>("orderLayer", orderDc);
    orderLayer.setEditable(true);
    map.addLayer(orderLayer);
    map.selectLayer(orderLayer);
}

By default, the GeoMap UI component has a special utility layer — Canvas. Canvas provides a straightforward API to display and draw geometries on a map.