Map Portal can be installed and customized in GIS Cloud Manager.

Note: we have developed a new tool for Map Portal customization – App builder. You can access it by adding /builder in the Map Portal URL e.g. app123456.giscloud.com/builder. With app builder, all options can be customized and it is not neccesary to use options described below. Click here for detailed instructions.

  1. Navigate to Apps tab and click Install new app button.
  2. Select Map Portal.

1

Note: if you don’t have Map Portal licence, you won’t be able to install Map Portal. You can purchase Map Portal licence in Manager app, under Store tab

After installing, is possible to customize Map Portal. Open App builder for easier customization.

Hover above Map Portal application and click Edit button. Next to Edit button is Delete button where the app can be deleted.

2

General tab

Under the General tab you can see information about the App type, enable or disable application, check the subscription and change the name of the application.

map portal setup6

For now, domain can be modified only by GIS Cloud team, so feel free to contact us with suggestions and ideas about your personal domain.

Icon next to the domain opens Map Portal in a new tab.

map portal setup8

You can also change logo for Map Portal. Picture should be 60*43 pxl sized and uploaded to the File Manager.

Users tab

In the App Instance under Users tab you can manage which user can use your Map Portal app.

  1. Type the username in the Add username box. Note that only username can be entered here. Email is not supported.
  2. Press Enter on your keyboard.
  3.  

    map portal setup1

     

    Note: for custom applications like Map Portal, we have to enable users on our end too. Please contact us: info@giscloud.com with info about Map Portal instance and username of the user who need access to the app.

     

    Advanced tab

    In App instance, under Advanced tab it is possible to add various Map Portal options, for example default map, tools which will be incorporated, visual identity of the Map Portal and many more.

    Write option in the Name box and value in the Value box then click Add.

    Note: Make sure that map is public, otherwise it will not be visible in your Map Portal. You can set your map publicly available in Map Editor.

    map portal setup2

    Note: You can find map id number if you go to the Map Editor or Map Viewer application and open your map. Click on the name of the map, as shown below.

    You will find map id in the URL of the map in the URL bar.

    map portal setup

    Copy and paste map id to the Value box in the Map portal Application instances and refresh your Map Portal.

    map portal setup3

    Here you can find full list of the supported options:

    App instance options, apps, map portal, custom settings

     

    map portal setup4

     

    For additional customization, you can include a custom javascript scripts and CSS styling, templating.

    1. Under Advanced tab of the App Instance, click Create/Open app folder.
    2. After opening the App folder, Source Browser will be shown. Then click on the Create new file icon and name it app.json.
    3.  

      map portal setup5

       

    4. Open newly created app.json file and add your custom script.

    Here is an example of setting a custom panels and buttons:

    {
        "responsive": true,
        "sections": {
            "top": {
                "logo": {},
                "menu": {
                    "items": [
                        {
                            "label_i18n": "Switch Map",
                            "href": "javascript:;",
                            "items": [
                                {
                                    "label_i18n": "Find Your Space",
                                    "onclick": "gcproject.mapChange(199540);"
                                },
                                {
                                    "label_i18n": "Road Closure Application",
                                    "onclick": "gcproject.mapChange(166950);"
                                },
                                {
                                    "label_i18n": "City of Canton",
                                    "onclick": "gcproject.mapChange(150872);"
                                }
                            ]
                        },
                        {
                            "label_i18n": "Export Map",
                            "onclick": "gcproject.exportMap();"
                        },
                        {
                            "label_i18n": "Export Layer",
                            "onclick": "gcapp.gclayer.exportLayer(); return false;"
                        }
                    ]
                }
            }
        }
    }
    

    Here is an example of setting custom javascript scripts and CSS styling and templating:

    {
        "scripts": {
            "namespace": "gc",
            "init": [
                "assets/js/init.js"
            ],
            "app": [
                "assets/js/app.js"
            ],
            "setup": []
        },
        "styles": [
            "assets/css/style.css"
        ],
        "images": [],
        "html_tag_attributes": "xml:lang='en' lang='en'"
    }
    

    Here you can find more information about the app configuration format: App configuration format