MapColonies Playground

Code playground for mapping clients. The code examples are saved in S3 bucket and fetched and cached by the server.

Environment

• AWS_ACCESS_KEY_ID - S3 access key
• AWS_SECRET_ACCESS_KEY - S3 secret key
• AWS_REGION - the S3 region
• AWS_ENDPOINT_URL - S3 custom endpoint
• AWS_BUCKET - The S3 bucket name.
• INDEX_KEY - The index file S3 key.
• ITEMS_TIMEOUT -The time in seconds before declaring item in the cache as stale.
• ITEMS_STALE - The time in seconds to keep stale items in the cache.
• PUBLIC_CATALOG_HREF - Path for the catalog application.
• PUBLIC_DEVPORTAL_HREF - Path for the developer portal.
• PUBLIC_PUZZLE_HREF - Path for the puzzle application.

Configurations

The codes examples shown are defined by a json index file with all the data needed. All the files listed in the index are loaded from the same bucket as the index itself.

example index

{
  "ol": {
    "basic-ol": {
      "displayName": "basic openlayers",
      "files": ["openlayers_basic.js", "openlayers.css", "openlayers.html"],
      "links": [
        { "name": "ol.css", "url": "/libs/ol/v7.3.0/ol.css", "type": "css" },
        { "name": "ol.js", "url": "/libs/ol/v7.3.0/ol.js", "type": "js" }
      ]
    },
    "geojson-style-ol": {
      "displayName": "geojson openlayers",
      "files": ["openlayers_geojson.js", "openlayers.css", "openlayers.html"],
      "links": [
        { "name": "ol.css", "url": "/libs/ol/v7.3.0/ol.css", "type": "css" },
        { "name": "ol.js", "url": "/libs/ol/v7.3.0/ol.js", "type": "js" }
      ]
    }
  },
  "cesium": {
    "basic-cesium": {
      "displayName": "basic cesium",
      "files": ["cesium_basic.js", "cesium.html"],
      "links": [
        {
          "name": "cesium.js",
          "url": "/libs/Cesium/Cesium.js",
          "type": "js"
        },
        {
          "name": "widgets.css",
          "url": "/libs/Cesium/Widgets/widgets.css",
          "type": "css"
        }
      ]
    }
  },
  "leaflet": {
    "basic-leaflet": {
      "displayName": "basic leaflet",
      "files": ["leaflet_basic.js", "leaflet.css", "leaflet.html"],
      "links": [
        {
          "name": "leaflet.js",
          "url": "/libs/leaflet/1.9.4/leaflet.js",
          "type": "js"
        },
        {
          "name": "leaflet.css",
          "url": "/libs/leaflet/1.9.4/leaflet.css",
          "type": "css"
        }
      ]
    }
  }
}

Developing

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.