Custom app JSON

Below is an example of all available custom buttons in custom applications. You can use this reference to easily build your JSON, with more flexibility than using the App builder or custom app options.

Note that some elements will need to be changed, for example the map ID (in the Switch map option), or layer IDs in the Filters sections.

{
    "responsive": true,
    "styles":["custom.css"], 
    "sections": {
        "top": {
            "logo": {},
            "menu": {
                "items": [{
                    "label_i18n": "Homepage",
                    "onclick": "gcapp.homepage.toggle();"
                }, {
                    "label_i18n": "Switch map",
                    "href": "javascript:;",
                    "onclick": "gcproject.mapChange(<MAP ID GOES HERE>);"
                }, {
                    "label_i18n": "Share and embed",
                    "onclick": "giscloud.ui.map.loading.done(function() { \t\t\t\t\t\tif (window.user && window.user.id >= 0 && window.layerList && layerList.layers() && layerList.layers().length > 0) { \t\t\t\t\t\t\tgcapp.gclayer.llist.reload(true); \t\t\t\t\t\t} \t\t\t\t\t\tvar mid = giscloud.ui.map.mapId; \t\t\t\t\t\tgiscloud.ui.modal({ \t\t\t\t\t\t\ttitle: __(\"Share & Embed\"), \t\t\t\t\t\t\tfid: \"modal-shareAndEmbed\", \t\t\t\t\t\t\toverlay: false, \t\t\t\t\t\t\tdraggable: true, \t\t\t\t\t\t\tmodal: true, \t\t\t\t\t\t\turl: \"/map/form_share_and_embed?mapid=\" + mid \t\t\t\t\t\t});                 \t});"
                }, {
                    "label_i18n": "Export map",
                    "onclick": "gcproject.exportMap();"
                }, {
                    "label_i18n": "Export layer",
                    "onclick": "gcapp.gclayer.exportLayer();"
                }, {
                    "label_i18n": "Feature actions",
                    "href": "javascript:;",
                    "onclick": "",
                    "items": [{
                        "label_i18n": "Add feature",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) giscloud.ui.edit.addFeature();"
                    }, {
                        "label_i18n": "Edit feature",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) giscloud.ui.edit.editFeature();"
                    }, {
                        "label_i18n": "Delete feature",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) giscloud.ui.edit.deleteFeature();"
                    }]
                }, {
                    "label_i18n": "Analysis tools",
                    "href": "javascript:;",
                    "onclick": "",
                    "items": [{
                        "label_i18n": "Area analysis",
                        "onclick": "gcanalysis.open(gcAnalysisType.AREA);"
                    }, {
                        "label_i18n": "Buffer",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) gcanalysis.open(gcAnalysisType.BUFFER);"
                    }, {
                        "label_i18n": "Near analysis",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) gcanalysis.open(gcAnalysisType.NEAR);"
                    }, {
                        "label_i18n": "Heatmap",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) gcanalysis.open(gcAnalysisType.HOTSPOT);"
                    }, {
                        "label_i18n": "Spatial filter analysis",
                        "onclick": "if (gcapp.checkAndWarnForLogin()) gcanalysis.open(gcAnalysisType.SPATIAL_FILTER);"
                    }]
                }, {
                    "label_i18n": "Link",
                    "href": "https://www.giscloud.com/",
                    "target": "_blank"
                }, {
                    "label_i18n": "javascript",
                    "href": "javascript:;",
                    "onclick": "code can go here"
                }, {
                    "label_i18n": "Panels",
                    "href": "javascript:;",
                    "onclick": "",
                    "items": [{
                        "label_i18n": "Panel with static text or html",
                        "href": "javascript:;",
                        "onclick": "giscloud.app.panels[0].toggle();"
                    }, {
                        "label_i18n": "panel with URL",
                        "href": "javascript:;",
                        "onclick": "giscloud.app.panels[1].toggle();"
                    }, {
                        "label_i18n": "Panel with filters",
                        "href": "javascript:;",
                        "onclick": "giscloud.app.panels[2].toggle();"
                    }]
                }]
            }
        }
    },
    "panels": [{
        "id": "panel1",
        "title": "Panel with Static text or HTML",
        "width": 400,
        "height": 400,
        "open": false,
        "closeButton": true,
        "css": {
            "top": "150px",
            "color": "#DAA520",
            "background-color": "#F0F8FF",
            "font-family": "Courier New",
            "justify-content": "center"
        },
        "content": "Plain text or HTML go here. This panel also has CSS added through the Panel builder.\n\nExample HTML:\n\n\n<p style=\"text-align: center;\"><strong><span style=\"font-family: Tahoma,Geneva, sans-serif;\">This project was created during the <span style=\"color: rgb(0, 168, 133);\">May</span> <span style=\"color: rgb(0, 168, 133);\">Advanced Course</span>.</span></strong></p>\n<p style=\"text-align: center;\"><span style=\"font-family: Tahoma,Geneva, sans-serif;\"><strong><br></strong></span></p>\n<p style=\"text-align: center;\"><span style=\"font-family: Tahoma,Geneva, sans-serif;\">For more details contact info@giscloud.com.</span></p>",
        "position": "floating",
        "draggable": "true"
    }, {
        "id": "panel2",
        "title": "Panel with URL",
        "width": 400,
        "height": 400,
        "open": false,
        "closeButton": true,
        "css": {
            "top": "150px"
        },
        "content": "<iframe src='https://www.giscloud.com' width='370' height='280'> <p>Your browser does not support iframes.</p></iframe>",
        "position": "floating",
        "draggable": "true"
    }, {
        "id": "panel3",
        "title": "Panel with filters",
        "width": 300,
        "height": 300,
        "open": false,
        "closeButton": true,
        "css": {
            "top": "200px"
        },
        "filters": [{
            "<MAP ID GOES HERE>": [{
                "layer_id": "<LAYER ID GOES HERE>",
                "items": [{
                    "type": "DATA_FILTER_INPUT",
                    "column": "<DATA COLUMN NAME GOES HERE, SEE EXAMPLE BELOW>",
                    "label": "<OPTIONAL LABEL GOES HERE, SEE EXAMPLE BELOW>"
                }, {
                    "type": "DATA_FILTER_DROPDOWN",
                    "column": "conductor_type",
                    "label": "Conductor Type",
                    "no_filter": "",
                    "multiselect": true,
                    "autofetch": true,
                    "relevantValues": true
                }]
            }]
        }],
        "position": "floating",
        "draggable": "true"
    }]
}