02-eox-map

02: Using eox-map

This section will introduce you to @eox/map, one of the main building blocks of any geospatial UI. This map element is based on the popular JS library OpenLayers and adds a layer of convenience plus additional functionality. By the end of this section, you will have created a map with an OSM layer and a vector layer.

Import package

Import the @eox/map package into main.js:

import "https://unpkg.com/@eox/map/dist/eox-map.js";

Add HTML

In index.html, use the eox-map element inside one of the eox-layout-items:

<eox-layout-item>
  <eox-map></eox-map>
</eox-layout-item>

Styling

Add some basic map styling to style.css. Note that the map needs some height set in order to be visible:

eox-map {
  height: 100%;
}

Setting the layers

By default, the eox-map initializes without layers. In order to set some layers, the layers property needs to be set:

document.querySelector("eox-map").layers = [
  {
    type: "Tile",
    source: {
      type: "OSM",
    },
  },
];

layers expects an object with the following properties:

• type: one of the OpenLayers layer types
• properties of OpenLayers Layer
• source:
  • type: one of the OpenLayers source types
  • properties of OpenLayers Source
  • optionally a flat representation of formats like GeoJSON or MVT

For the possible properties, please refer to the EOxLayer type in the repository. Please see also all the layer, sources and formats included in the base bundle. For advanced layers & sources, see the next section.

Try to add another layer with the following parameters:

• layer type: Vector
• source:
  • source type: Vector
  • source url: https://openlayers.org/data/vector/ecoregions.json
  • source format: GeoJSON
• style: use a combination of stroke-color, stroke-width or any other OL flat style definition, including expressions.

When handling multiple layers, it is necessary to also provide an id property for each layer (properties.id).

Result

Your page should look something like this:

Feel free to compare with the solution folder!

Next, try out section 03.