# a2g_openlayers 
## build withOpenLayers + Vite

This package uses the `ol` packages with [Vite](https://vitejs.dev/).

(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
            }
        ]
    '