https://github.com/openlayers-elements/openlayers-elements

Web Components for OpenLayers maps
https://github.com/openlayers-elements/openlayers-elements

custom-elements geojson html5 openlayers openstreetmap webcomponents

Last synced: 3 months ago
JSON representation

Web Components for OpenLayers maps

• Host: GitHub
• URL: https://github.com/openlayers-elements/openlayers-elements
• Owner: openlayers-elements
• License: mit
• Created: 2019-02-12T14:50:09.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-03T09:24:37.000Z (6 months ago)
• Last Synced: 2024-03-19T15:46:25.672Z (3 months ago)
• Topics: custom-elements, geojson, html5, openlayers, openstreetmap, webcomponents
• Language: TypeScript
• Homepage: https://openlayers-elements.netlify.com/
• Size: 7.44 MB
• Stars: 25
• Watchers: 9
• Forks: 4
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-web-components - OpenLayers Web Components - Web Components for OpenLayers maps. (Vanilla Components)

README

        
# OpenLayers Web Components

This is monorepo which contains:

- core OpenLayers elements (incl. map itself) ([`@openlayers-elements/core`](elements/openlayers-core))

- common OpenLayers elements (layers, markers, etc) ([`@openlayers-elements/openlayers-elements`](elements/openlayers-elements))

- Swiss layers from geoadmin.ch ([`@openlayers-elements/swisstopo-elements`](elements/swisstopo-elements))

- Package with bundles for quick and easy usage ([`@openlayers-elements/bundle`](bundle))

## Features

While extensive, human-friendly documentation is not yet available, be sure to check out the different features supported by the components live:

- Core map features

  - [Zooming to layers and features](https://openlayers-elements.netlify.com/#/elements/ol-map/demos/zoom-to-extent)

- OpenStreetMaps

  - [DEMO](https://openlayers-elements.netlify.com/#/elements/ol-layer-openstreetmap/demos/standard-map)

- Adding features to the map (aka. vector layers)

  - [GeoJSON](https://openlayers-elements.netlify.com/#/elements/ol-layer-geojson/demos/demo/select/)

  - [WKT](https://openlayers-elements.netlify.com/#/elements/ol-layer-wkt/demos/demo/wkt/)

  - [Styling](https://openlayers-elements.netlify.com/#/elements/ol-layer-vector/demos/styling), actual code [here](https://github.com/zazuko/openlayers-elements/blob/master/demos/demo/vector-styling/styled-map.js#L53)

- XYZ Tile layers

  - [DEMO](https://openlayers-elements.netlify.com/#/elements/ol-layer-xyz/demos/demo/xyz/)

- Map markers

  - [DEMO](https://openlayers-elements.netlify.com/#/elements/ol-marker-icon/demos/demo/markers/)

- Map interactions

  - [Select on click](https://openlayers-elements.netlify.com/#/elements/ol-select/demos/demo/select/)

- Adding custom map controls

  - [Positioning and styling](https://openlayers-elements.netlify.com/#/elements/ol-control/demos/demo/control/)

- Adding overlays (popups, etc)

  - [Basic example](https://openlayers-elements.netlify.com/#/elements/ol-overlay/demos/basic-example)

  - [Combine with selection](https://openlayers-elements.netlify.com/#/elements/ol-overlay/demos/combined-with-ol-select)

- Swiss layers

  - [WMTS source](https://openlayers-elements.netlify.com/#/elements/swisstopo-wmts/demos/demo/swiss-topo/)

  - [XYZ layers, reprojected to Mercator](https://openlayers-elements.netlify.com/#/elements/swisstopo-reprojected/demos/demo/swiss-reprojected/)

## API Docs

All the [live demos](https://openlayers-elements.netlify.com/) also include generated API documentation.

## Running locally

Simply execute

```sh

yarn build

yarn start

```

And open the webpack-dev-server page (typically http://localhost:8080)

## Acknowledgements

Carefully tested on Browserstack

[![img](https://github.com/zazuko/openlayers-elements/raw/master/assets/Browserstack-logo%402x.png)](https://www.browserstack.com/open-source)