Wegue

Webmapping with OpenLayers and Vue.js

Jakob Miksch, Christian Mayer
meggsimum - Büro für Geoinformatik

FOSS4G 2021, Buenos Aires, 2021-09-30

Jakob Miksch

jakob@meggsimum.de
@jakobmiksch
@jakobmiksch

geospatial developer
OSGeo Foundation Charter Member

Christian Mayer

chris@meggsimum.de
@chrismayer
@geofootballer

geospatial software developer and architect
core developer of several OS GIS projects (GeoStyler, GeoExt, ...)
presenter & trainer
national & international
OSGeo Foundation Charter Member

meggsimum

info@meggsimum.de
@meggsimum
@meggsimum

meggsimum.de
services in the field of GIS, webmapping & SDI
tailored WebGIS solutions
software development
geodata
consulting and training

Wegue

combines Vue.js and OpenLayers
lightweight template for webmaps
for single-purpose apps
separation of customization and core
source code on GitHub (BSD-2-Clause)

Non-Goals

being a pure library
desktop-GIS for the browser
feature creep

Config vs. Development?

using config file

quick setup for single purpose web map
only by customizing a JSON file

code base for custom tailored application
or even both

OpenLayers

A high-performance, feature-packed library for all your mapping needs.
— openlayers.org, 2021-08-04

JavaScript mapping library
BSD licensed OSGeo project

Vue.js

JavaScript framework
OpenSource - MIT license
simple API, easy to learn
wide adoption and big ecosystem

Vuetify

component framework
material design
wide adoption
OpenSource - MIT licensed

Wegue

Basemap Switcher

Overlay Switcher

Measure Tool

GeoCoder

Help Window

Feature Info

Sidebar

Attribute Table

Map Recorder

QGIS Plugin

More Features

selection tool
hover tooltip
responsive design
styling options
permalink
docs on wegue.org
geodata drag&drop
i18n - multi language support
...

Roadmap

make modules more generic
extract components as library
keep template application

Config File (JSON)



            {

              "title": "Vue.js / OpenLayers WebGIS",
            
              "baseColor": "green darken-3",
            
              "footerTextLeft": "Powered by Wegue WebGIS",
              "footerTextRight": "meggsimum",
              "showCopyrightYear": true,
            
              "mapZoom": 2,
              "mapCenter": [0, 0],
            
              "mapLayers": [
            
                {
                  "type": "WMS",
                  "lid": "terrestris-osm-wms",
                  "name": "OSM WMS",
                  "format": "image/png",
                  "layers": "OSM-WMS",
                  "url": "http://ows.terrestris.de/osm-gray/service",
                  "transparent": true,
                  "singleTile": false,
                  "projection": "EPSG:3857",
                  "attributions": "© OpenStreetMap-Mitwirkende",
                  "isBaseLayer": true,
                  "visible": true
                }
            
              ],
            
              "modules": {
                "wgu-helpwin": {
                  "target": "toolbar",
                  "win": "floating",
                  "icon": "help",
                  "darkLayout": true, 
                  "title": "About",
                  "textTitle": "About Wegue",
                  "htmlContent": "WebGIS with OpenLayers and Vue.js Template and re-usable components for webmapping applications with OpenLayers and Vue.js",
                  "infoLinkText": "More Info",
                  "infoLinkUrl": "http://wegue.org/"
                }
              }
            
            }

Quickstart


            # download
            git clone https://github.com/meggsimum/wegue
            cd wegue

            # install dependencies
            npm install

            # create custom app
            npm run init:app

            # run development server
            npm run dev