Layers and Sources

Layer – is a way to organize data on a map.

Layers can be raster or vector. Raster layers consist of raster images which is a grid of pixels, while vector layers consist of vector geometries.

TileLayer

Layer with sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.

For more details see TileLayer documentation.

TileLayer supports three sources:

OsmSource

Source for the loading tiles from an OpenStreetMap tile server and from XYZ tile services. For more details see OSM documentation.

The following example demonstrates how to display an OpenStreetMap tile layer.

<maps:geoMap id="map"
             height="100%"
             width="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

XyzSource

Source for tile data with URLs in a set XYZ format that are defined in a URL template. By default, this follows the widely-used Google grid where x 0 and y 0 are in the top left. XyzSource can load tiles from XYZ tile services. For more details see XYZ documentation.

The following example demonstrates how to display a Thunderforest tile layer.

<maps:geoMap id="mapxyz"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:xyzSource
                    url="https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=YOUR_API_KEY">
            </maps:xyzSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

WmsSource

Source for tile data from WMS (Web Map Service) servers. For more details see TileWMS documentation.

The following example demonstrates how to display a tile layer with WmsSource.

<maps:geoMap id="mapwms"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:tileWmsSource url="https://ahocevar.com/geoserver/wms"
                                serverType="GEO_SERVER">
                <maps:parameters>
                    <maps:parameter name="LAYERS" value="topp:states"/>
                    <maps:parameter name="TILED" value="true"/>
                </maps:parameters>
            </maps:tileWmsSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

ImageLayer

ImageLayer is used to work with static images or WMS images.

ImageStaticSource

Source for displaying a single, static image. For more details see Static documentation.

Example of showing image from URL. This example is taken from OpenLayers → Examples → Static image.

<maps:geoMap id="mapimagestatic"
             width="100%"
             height="100%">
    <maps:mapView centerX="512" centerY="479" zoom="2">
        <maps:projection code="static-image"
                         units="PIXELS">
            <maps:extent minX="0" minY="0" maxX="1024" maxY="968"/>
        </maps:projection>
    </maps:mapView>
    <maps:layers>
        <maps:image id="imageLayer">
            <maps:imageStaticSource projection="static-image"
                                    url="https://imgs.xkcd.com/comics/online_communities.png">
                <maps:projection code="static-image"
                                 units="PIXELS">
                    <maps:extent minX="0" minY="0" maxX="1024" maxY="968"/>
                </maps:projection>
                <maps:imageExtent minX="0" minY="0" maxX="1024" maxY="968"/>
            </maps:imageStaticSource>
        </maps:image>
    </maps:layers>
</maps:geoMap>

To display an image from the classpath, define the XML in the same way as shown in the example above:

<maps:geoMap id="declarativeMap"
             width="100%"
             height="100%">
    <maps:mapView centerX="450" centerY="522" zoom="2">
        <maps:projection code="static-image"
                         units="PIXELS">
            <maps:extent minX="0" minY="0" maxX="900" maxY="1044"/>
        </maps:projection>
    </maps:mapView>
    <maps:layers>
        <maps:image id="dImageLayer">
            <maps:imageStaticSource url="maps/map.png">
                <maps:projection code="static-image"
                                 units="PIXELS">
                    <maps:extent minX="0" minY="0" maxX="900" maxY="1044"/>
                </maps:projection>
                <maps:imageExtent minX="0" minY="0" maxX="900" maxY="1044"/>
            </maps:imageStaticSource>
        </maps:image>
    </maps:layers>
</maps:geoMap>

Additionally, you can achieve this in the Java controller using StreamResource:

@ViewComponent
protected GeoMap programmaticMap;

@Subscribe
protected void onInit(final InitEvent event) {
    ImageLayer imageLayer = programmaticMap.getLayer("pImageLayer");
    ImageStaticSource staticSource = imageLayer.getSource();
    staticSource.setResource(new StreamResource("map.png", () -> {
        try {
            return new ClassPathResource("META-INF/resources/maps/map.png").getInputStream();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }));
}

ImageWmsSource

Source for WMS servers providing single, untiled images. For more details see ImageWMS documentation.

The example of using ImageWmsSource is taken from OpenLayers → Examples → Single Image WMS:

<maps:geoMap id="mapimagewms"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:image>
            <maps:imageWmsSource url="https://ahocevar.com/geoserver/wms"
                                 ratio="1"
                                 serverType="GEO_SERVER">
                <maps:parameters>
                    <maps:parameter name="LAYERS" value="topp:states"/>
                </maps:parameters>
            </maps:imageWmsSource>
            <maps:extent minX="-124.43" minY="24.57" maxX="-66.58" maxY="49.22"/>
        </maps:image>
    </maps:layers>
</maps:geoMap>

VectorLayer

A vector layer is utilized to work with geometries. It’s possible to add multiple vector layers to a map.

VectorSource

Source for working with features. For more details see VectorSource documentation.

The following example demonstrates how to display a vector layer with VectorSource. Initially, define a map in the XML descriptor:

<maps:geoMap id="mapwithvector"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:vector id="vectorLayer">
            <maps:vectorSource/>
        </maps:vector>
    </maps:layers>
</maps:geoMap>

Subsequently, open the view controller and add the created marker to the map:

@ViewComponent
private GeoMap mapwithvector;

@Subscribe
protected void onInit(final InitEvent event) {
    VectorLayer vectorLayer = mapwithvector.getLayer("vectorLayer"); (1)
    VectorSource vectorSource = vectorLayer.getSource(); (2)
    vectorSource.addFeature(new MarkerFeature(createPoint(0, 0)));(3)
}
1 Gets the vector layer by its id.
2 Gets the vector source to work with features (Polygon, LineString, Point).
3 Adds a marker feature to the source.

DataVectorSource

DataVectorSource allows data binding to Jmix data containers through the dataContainer and property attributes. The property attribute can take both simple property and property path.

<maps:geoMap id="map" height="100%" width="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:vector id="vectorLayer">
            <maps:dataVectorSource dataContainer="locationDc"
                                   property="building"/>
        </maps:vector>
    </maps:layers>
    <maps:mapView centerY="51.0">
        <maps:extent minX="-15.0"
                     minY="30.0"
                     maxX="40.0"
                     maxY="60.0"/>
    </maps:mapView>
</maps:geoMap>
<maps:vector id="vectorLayer">
    <maps:dataVectorSource dataContainer="ordersDc"
                           property="customer.address.point"/>
</maps:vector>