open-index/open-npm huggingface dataset:
npm package: @openlayers-elements/core
Description: Core, base elements used to build `@openlayers-elements/maps` and `@openlayers-elements/swisstopo`
Author: Zazuko GmbH
Latest version: 0.5.1

# @openlayers-elements/core [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=VVRSS2FhUGpFd3puR1lKRUVSOHpydERCZG1HOFRZbERFU1lqL3RYSk5Vcz0tLXJvQkExaGtETnE0dFpMRE9NclZiZHc9PQ==--72f989607f4bdd18bea52ad8299b21d23534db2d)](https://www.browserstack.com/automate/public-build/VVRSS2FhUGpFd3puR1lKRUVSOHpydERCZG1HOFRZbERFU1lqL3RYSk5Vcz0tLXJvQkExaGtETnE0dFpMRE9NclZiZHc9PQ==--72f989607f4bdd18bea52ad8299b21d23534db2d)

Core, base elements used to build `@openlayers-elements/maps`
and `@openlayers-elements/swisstopo`

See [documentation and demos](https://openlayers-elements.netlify.app).
npm package: @openlayers-elements/maps
Description: Custom elements to declaratively build OpenLayers map
Author: Zazuko GmbH
Latest version: 0.5.0

# @openlayers-elements/maps [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=VVRSS2FhUGpFd3puR1lKRUVSOHpydERCZG1HOFRZbERFU1lqL3RYSk5Vcz0tLXJvQkExaGtETnE0dFpMRE9NclZiZHc9PQ==--72f989607f4bdd18bea52ad8299b21d23534db2d)](https://www.browserstack.com/automate/public-build/VVRSS2FhUGpFd3puR1lKRUVSOHpydERCZG1HOFRZbERFU1lqL3RYSk5Vcz0tLXJvQkExaGtETnE0dFpMRE9NclZiZHc9PQ==--72f989607f4bdd18bea52ad8299b21d23534db2d)

Custom element wrapping OpenLayers 5 API, thus providing a declarative
way to create online maps.

See [documentation and demos](https://openlayers-elements.netlify.app).

## Quick start

To install run

```
npm add @openlayers-elements/maps @openlayers-elements/core
```

Here's the simplest possible OpenStreetMap:

```html
<script type="module">
  import '@openlayers-elements/core/ol-map'
  import '@openlayers-elements/maps/ol-layer-openstreetmap'
</script>

<ol-map zoom="7" lat="46.7985" lon="8.2318">
  <ol-layer-openstreetmap></ol-layer-openstreetmap>
</ol-map>
```

For further examples go to the online demos, linked from GitHub.
npm package: @openlayers-elements/swisstopo
Description: OpenLayers elements for adding swisstopo maps to `openlayers-elements`
Author: Zazuko GmbH
Latest version: 0.5.0

# swisstopo-elements

OpenLayers elements for adding swisstopo maps to `openlayers-elements`

See [documentation and demos](https://openlayers-elements.netlify.app).

## Quick start

To install run

```
npm add @openlayers-elements/swisstopo @openlayers-elements/core
```

Then add the WMTS layer to your `ol-map`

```html
<script type="module">
  import '@openlayers-elements/swisstopo/core/ol-map'
  import '@openlayers-elements/swisstopo/swisstopo-wmts'
</script>

<ol-map zoom="7" lat="46.7985" lon="8.2318">
  <swisstopo-wmts layer-name="ch.swisstopo.pixelkarte-grau"></swisstopo-wmts>
</ol-map>
```

    For valid layer names, check http://api3.geo.admin.ch/api/faq/index.html#which-layers-are-available

Note that these layers require to register with http://swisstopo.ch/webaccess

## Running examples

For the reason mentioned above, the online demos don't work. You can run them locally (check the
root readme). Here's a how the two sample maps look like in the browser when the map API is acessible:

![swisstopo example](https://raw.githubusercontent.com/openlayers-elements/openlayers-elements/master/elements/swisstopo-elements/assets/swisstopo.png)

It is jus tas easy to overlay OpenStreetMap with a Swisstopo layer:

![swisstopo OSM](https://raw.githubusercontent.com/openlayers-elements/openlayers-elements/master/elements/swisstopo-elements/assets/swisstopo+osm.png)