Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-03T09:24:37.000Z (12 months ago)
- Last Synced: 2024-05-02T05:20:45.252Z (8 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
Awesome Lists containing this project
README
# OpenLayers Web Components
While there are many great framework-specific OpenLayers wrappers, the goal of this
project is to wrap OpenLayers in W3C Web Components, which are a web standard
supported by all browsers currently and into the future.
This is a 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.app/?path=/story/core-ol-map--zoom-to-extent)
- OpenStreetMaps
- [DEMO](https://openlayers-elements.netlify.app/?path=/docs/layers-ol-layer-openstreetmap--docs)
- Adding features to the map (aka. vector layers)
- [GeoJSON](https://openlayers-elements.netlify.app/?path=/story/core-ol-select--popup)
- [WKT](https://openlayers-elements.netlify.app/?path=/docs/layers-ol-layer-wkt--docs)
- [Styling](https://openlayers-elements.netlify.app/?path=/story/layers-ol-layer-geojson--basic), actual code [here](storybook/lib/styled-map.ts)
- XYZ Tile layers
- [DEMO](https://openlayers-elements.netlify.app/?path=/docs/layers-ol-layer-xyz--docs)
- Map markers
- [DEMO](https://openlayers-elements.netlify.app/?path=/docs/core-ol-marker-icon--docs)
- Map interactions
- [Select on click](https://openlayers-elements.netlify.app/?path=/docs/core-ol-select--docs)
- Adding custom map controls
- [Positioning and styling](https://openlayers-elements.netlify.app/?path=/docs/core-ol-control--docs)
- Adding overlays (popups, etc)
- [Basic example](https://openlayers-elements.netlify.app/?path=/story/core-ol-overlay--popup)
- [Combine with selection](https://openlayers-elements.netlify.app/?path=/story/core-ol-overlay--geo-json)
- [Swiss layers](https://openlayers-elements.netlify.app/?path=/docs/swisstopo-swisstopo--docs)
- WMTS source
- XYZ layers, reprojected to Mercator
## API Docs
[Storybook](https://openlayers-elements.netlify.app/) also include generated API documentation.
## Running Storybook locally
Simply execute
```sh
npm install
npm run start
```
And open http://localhost:6006
You may also start a watch process to update the generated custom elements manifest automatically:
```sh
npm -w storybook run custom-elements-manifest:watch
```
## Running tests
If the Chrome binary / driver is installed in your PATH, simply run:
```sh
npm run test
```
To run with a container-based Chrome driver, instead run:
```sh
docker compose -f contrib/docker/docker-compose.tests.yml \
run --rm test
```