a2g_openlayers

build withOpenLayers + Vite

This package uses the ol packages with Vite.

(requires Node 12+)

To get started change into your a2g_openlayers directory and start a development server (available at http://localhost:3000):

cd a2g_openlayers
npm start

To generate a build ready for production:

npm run build

Then deploy the contents of the dist directory to your server. You can also run npm run serve to serve the results of the dist directory for preview.

suportet map layers

data-map-layers = '
    [
        {
            "layer": "stamen",
            "config": {
                "layer": "terrain"
            },
            "label": "stamen terrain (free)",
            "active": false
        },
        {
            "layer": "stamen",
            "config": {
                "layer": "watercolor"
            },
            "label": "stamen watercolor (free)",
            "active": true
        },
        {
            "layer": "osm",
            "config":[],
            "label": "osm (free)",
            "active": true
        },
        {
            "layer": "stamen",
            "config": {
                "layer": "toner"
            },
            "label": "stamen toner (free)",
            "active": false
        },

        {
            "layer": "thunderforest",
            "config": {
                "layer": "cycle"
            },
            "label": "thunderforest openCycleMap (cycle)",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "transport"
            },
            "label": "thunderforest transport",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "landscape"
            },
            "label": "thunderforest landscape",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "outdoors"
            },
            "label": "thunderforest outdoors",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "atlas"
            },
            "label": "thunderforest atlas",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "transport-dark"
            },
            "label": "thunderforest transport-dark",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "spinal-map"
            },
            "label": "thunderforest spinal-map",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "pioneer"
            },
            "label": "thunderforest pioneer",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "neighbourhood"
            },
            "label": "thunderforest neighbourhood",
            "active": false
        },
        {
            "layer": "thunderforest",
            "config": {
                "layer": "mobile-atlas"
            },
            "label": "thunderforest mobile-atlas",
            "active": false
        },

        {
            "layer": "maptiler",
            "config": {
                "layer": "basic"
            },
            "label": "maptiler basic",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "basic-4326"
            },
            "label": "maptiler basic (EPSG:4326)",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "bright"
            },
            "label": "maptiler bright",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "openstreetmap"
            },
            "label": "maptiler openstreetmap",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "bright"
            },
            "label": "maptiler bright",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "outdoor"
            },
            "label": "maptiler outdoor",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "pastel"
            },
            "label": "maptiler pastel",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "hybrid"
            },
            "label": "maptiler satelite hybrid",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "streets"
            },
            "label": "maptiler streets",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "toner"
            },
            "label": "maptiler toner",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "topo"
            },
            "label": "maptiler topo",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "topographique"
            },
            "label": "maptiler topographique",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "voyager"
            },
            "label": "maptiler voyager",
            "active": false
        },
        {
            "layer": "maptiler",
            "config": {
                "layer": "winter"
            },
            "label": "maptiler winter",
            "active": false
        }
    ]
'