Skip to content Skip to main navigation Skip to footer

Customize your Map Portal with App Builder

With our App builder you can easily customize your custom Map Portal according to your needs. You can create a user-friendly interface all by yourself, easily and quickly, without any programming knowledge.

Firstly, you need to install Map Portal trough GIS Cloud Manager. Learn more about it here.

You can also edit the custom apps by adding adequate advanced options in the Advanced tab. And if you’re familiar with JavaScript and JSON, you can access the core app file (app.json), edit it additionally and add more complex features through the text file as well. This way, you can customize your Map Editor and Map Viewer custom apps as well.

For more information, feel free to contact our consultants at sales@giscloud.com

To sum it up – it is possible to add your personal logo, custom color, tools, buttons, panels and many more.

If you want to change your app domain from default e.g., app103168.giscloud.com to some other, enable users to use it or consult us on advanced app customizations, feel free to contact us at support@giscloud.com.

Open app builder

To start the app builder open your custom app and add /builder in the URL bar e.g., app109168.giscloud.com/builder

Log in with your GIS Cloud credentials. The App builder interface will open from the left side.

The Preview button is used to review changes made on a custom app before they are published to other users or the public. Changes will be saved after hitting the Save button.

After all the changes are made and saved, delete the ‘/builder‘ finish, from the app URL to exit the App Builder.

Options to customize your app

Map

Select default map from the drop down menu. This map will open by default when the app is refreshed. You can also set it up by adding an advanced option called DEFAULT_MAP_ID with the map ID as value. You can generate the Map ID in the URL by reinitializing the map by clicking on its name on top of the Layer list.

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

Toolbar

Select tools that will appear on the custom app.

  • Search
  • Layer list
  • Zoom in
  • Zoom out
  • Show/hide toolbar
  • Info
  • Select
  • Area selection
  • Zoom to current
  • Google Street View
  • Zoom
  • Zoom to Full Map Extent
  • Print tool
  • Measuring tools
  • Map Scale
  • Change units projection
  • Jump to Coordinates
  • Number of Selected Objects on the Map

Top menu

In the top menu it is possible to add buttons (connected to certain actions), set background color, hide and show search (magnifying glass) and set your custom logo.

You can choose between:

  • Switch map – clicking on the button will load another map in the Map View
  • Share and Embed – share option opens up an active map in the Map Portal at the previously selected zoom level and the precise location on the map at the moment of link creation. Embed Option allows you to embed the map on your website, but not the whole Map Portal. Find more about this tool here.
  • Export map – in the same manner as in Map Editor
  • Export layer – in the same manner as in Map Editor
  • Features – add, edit or delete feature(s)
  • Homepage – opens Homepage (only if homepage is set – in the Homepage tab)
  • Analysis – area, buffer, near, hotspot, spatial filter
  • Panel – button will open one of the created panels
  • Link – button will link to a web page e.g., http://www.giscloud.com
  • JavaScript – add JavaScript code for additional customization

Add new button

  1. Click Add new item
  2. Select one of the available actions
  3. Add button name
  4. If necessary, add additional info for button
  5. Click Add
  6. Preview&Save!

Background color

Select the color or add hex color code to change top ribbon color. You can do that through Advanced options as well by entering THEME_COLOR with the hex color code as value. (e.g., for green the hex color code is #26f217)

Search

Check the Search box to show Search from the Top Menu (magnifying glass). You can additionally set up a custom search for an optimized and more precise search tool.

Logo

You can upload and add your custom logo. It should be 60*43 pixels in size, but it can be larger too.

  1. Click the Logo button.
  2. Hit Browse and find your previously uploaded logo or upload it now through the File Manager.
  3. Click Save.
  4. Preview&Close.

Panel

In panels you can add advanced filters, open static text or open another web page within a panel.

Static text/HTML

  1. Select Add a new panel
  2. Add Title, height and width in pixels
  3. Check or uncheck Open by default option
  4. You can add the Close button in the advances tab
  5. From the Content Dropdown select Static text/HTML
  6. Write the text in the box below
  7. Edit the text by following the HTML text formatting rules
  8. Click Add
  9. Preview&Save

URL

  1. Select Add a new panel
  2. Add Title, height and width in pixels
  3. Check or uncheck Open by default option
  4. From the Content Dropdown list select Url
  5. In the box add URL
  6. Preview&Save

Note: Please be aware of http/https protocol, if your app is open with https, then your url must use the same protocol!

Local file content

If you have a text file stored in your File Manager, you can display it on a panel.

  1. Add Title, height and width in pixels
  2. Check or uncheck Open by default option
  3. From the Content Dropdown list select Local file content
  4. Browse file and click Add
  5. Preview&Save

GIS Cloud Filter

Filters are used for extracting data both in the data grid and map view.

  1. Select Add a new panel
  2. Add Title, height and width in pixels
  3. Check or uncheck Open by default option
  4. From the Content Dropdown select filters. Note that only layers imported in the Database can be filtered
  5. Click Filter button
  6. Select one of the available filters from the Dropdown list. Here you can find detailed information about filters
  7. Click Forward configuration to App Builder button
  8. Click Add button
  9. Preview&Save

Learn more how you can set up filters in Map Portal.

Datagrid

Check or uncheck the box to show or hide the data grid on the bottom of the page. Hit Preview&Save.

Homepage

Check Show homepage box to show the Map Editor homepage. Select Default, All, My and/or Shared maps, hit Preview&Save.

Advanced Map Portal options (JSON)

As mentioned, the custom apps can also be edited by adding adequate advanced options.
In the App instance options, under the Advanced tab, it is possible to add various app, map or layer options for customization purposes. For example setting the default map, tools and features which will be incorporated, changing the visual identity of your Map Portal (Map Editor/Map Viewer) and many more.
Write option in the Name box and value in the Value box then click Add.

Here you can find full list of the supported options – App instance options, apps, map portal, custom settings!

App.json

For additional, more complex customization, you can include a custom javascript script and CSS styling, templating.

  1. In your Manager app, find the desired custom app, choose Edit and under the 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.
    map portal setup5
  3. Open the newly created app.json file, edit the text file or just add your custom script.

Here is an example of setting 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.

Was This Article Helpful?

Related Articles