Wegue (WebGIS with OpenLayers and Vue.js)
Template and re-usable components for webmapping applications with OpenLayers and Vue.js
Go to the online demo at https://meggsimum.github.io/wegue/
Wegue (WebGIS with OpenLayers and Vue) combines the power of Vue.js and the geospatial savvy of OpenLayers to make lightweight webmapping applications. For styling and pre-defined UI-components the Material Design Component Framework Vuetify is used.
It acts as a template to reduce boilerplate work for browser-based mapping applications.
Want to contribute? Yes, please
If you want to contribute, please open a Pull Request in the repository.
Ensure that you have clean commits (and messages) and a meaningful description in your PR. Maybe opening an issue first is a good idea.
We look forward to your contributions!
Prerequisites: Node.js and npm need to be available on your system.
Checkout / download this repository and navigate to the checkout / download in a terminal (e.g. by
Install the JS dependencies:
# install dependencies npm install
- Run the init-app script, which creates a base application (a copy of the
app/to extend with custom components and resources (e.g. CSS styling) for your project.
# initializes the Wegue app npm run init:app
- Start the dev server with auto reload at http://localhost:8081 (will be opened automatically):
# serve with hot reload at localhost:8081 npm run dev
To run all unit tests execute the following:
# run all tests npm test
NB the unit tests require Chrome or Chromium browser executable to be found.
On Mac OSX with
Homebrew package manager this should work:
brew cask install chromium; export CHROME_BIN=/Applications/Chromium.app/Contents/MacOS/Chromium; npm run test
More testing tips and tricks can be found in the Unit Test README.
Run the build script in order to create a production build, which can be copied / deployed to a web server. The output will be placed in the
# build for production with minification npm run build
Run with Docker
Versioned Docker images are available on DockerHub.
master) version of the Wegue Docker Image as follows:
docker run -it -p 8080:80 meggsimum/wegue:latest
- http://127.0.0.1:8080/ or
- http://localhost:8080/?appCtx=minimal or
in a browser.
Use Docker Volume Mapping to run with your custom Wegue JSON config:
docker run -it -p 8080:80 -v $(pwd)/app-conf-mine.json:/usr/share/nginx/html/static/app-conf-mine.json meggsimum/wegue:latest
and open http://localhost:8080/?appCtx=mine.
You can even overwrite the default config
docker run -it -p 8080:80 -v $(pwd)/app-conf-mine.json:/usr/share/nginx/html/static/app-conf.json meggsimum/wegue:latest
and then open http://localhost:8080/.
Build a Wegue Docker Image as follows:
docker build -t meggsimum/wegue:latest .
Who do I talk to?
You need more information or support? Please contact us at:
The basic project setup was created by https://github.com/vuejs-templates/webpack.
Thanks for this great template!