Simple and easy application for managing & querying park information.

  • locate map by neighborhood
  • search for park with autocomplete
  • query parks by size in access
  • create new layer from query results
  • export query results into Shapefile, Mapinfo, KML and other formats
Custom code for this app has less than 100 lines of JavaScript!
 
Contact us for setting up your own app.

Access URL

http://parks.giscloud.com/map/39273/sf-parks

Screenshot

App Configuration

learn more about GIS Cloud app configuration format

{
    "scripts": {
        "namespace" : "parks",
        "init" : [],
        "setup" : [],
        "app" : ["parks.js"]
    },
    "sections": {
        "top": {
            "ribbonmenu": {
                "default_tab": "{{default_tab}}",
                "tabs": [
                    {
                        "label_i18n": "Home",
                        "type": "hometab",
                        "id": "home_tab",
                        "icon_class": "gc-ribbon-16 gc-ribbon-maps",
                        "style": "width:70px",
                        "scope": ["PUBLIC", "LOGGED_IN"],
                        "elements": [
                            {
                                "type": "BTN24_USER_MANUAL"
                            },
                            {
                                "type": "HOME_TAB_MAPS_MENU"
                            }
                        ]

                    },
                    {
                        "label_i18n": "Parks",
                        "id": "map_tab",
                        "scope": ["PUBLIC", "LOGGED_IN"],
                        "elements": [
                            {
                                "type": "RIBBON_TOOLBOX",
                                "class": "first",
                                "scope": ["PUBLIC", "LOGGED_IN"],
                                "elements": [
                                    {
                                        "type": "BTN32_CUSTOM",
                                        "label_i18n": "Say Hello",
                                        "icon_style": "background-image:url(/wp-content/uploads/face-smile.png)",
                                        "onclick": "parks.helloWorld()",
                                        "scope": ["PUBLIC", "LOGGED_IN"]
                                    },
                                    {
                                        "type": "BTN32_CUSTOM",
                                        "label_i18n": "Neighbourhoods",
                                        "icon_style": "background-image:url(/wp-content/uploads/Buildings.png)",
                                        "onclick": "parks.findNeighbourhood()",
                                        "scope": ["PUBLIC", "LOGGED_IN"]
                                    },
                                    {
                                        "type": "BTN32_CUSTOM",
                                        "label_i18n": "Park Search",
                                        "icon_style": "background-image:url(/wp-content/uploads/WhoisLarge.png)",
                                        "onclick": "parks.searchForAPark()",
                                        "scope": ["PUBLIC", "LOGGED_IN"]
                                    },
                                    {
                                        "type": "BTN32_CUSTOM",
                                        "label_i18n": "Park Query",
                                        "icon_style": "background-image:url(/wp-content/uploads/iconPicture.png)",
                                        "onclick": "parks.queryAPark()",
                                        "scope": ["PUBLIC", "LOGGED_IN"]
                                    }
                                ]
                            },
                            {
                                "type": "RIBBON_TOOLBOX",
                                "class": "divider2",
                                "scope": ["PUBLIC", "LOGGED_IN"],
                                "elements": [
                                    {
                                        "type": "BTN16_SELECTION_INVERT"
                                    },
                                    {
                                        "type": "BTN16_SELECTION_CLEAR"
                                    }
                                ]
                            },
                            {
                                "type": "RIBBON_TOOLBOX",
                                "class": "divider2",
                                "scope": ["PUBLIC", "LOGGED_IN"],
                                "elements": [
                                    {
                                        "type": "BTN32_SELECTION_TO_NEW_LAYER"
                                    },
                                    {
                                        "type": "BTN32_LAYER_EXPORT"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }
}

Application Code

/*************** Say Hello **********************/
parks.helloWorld = function() {
    alert("Hello World!");
}

/*************** Neighbourhoods ************/
parks.findNeighbourhood = function() {
    new giscloud.ui.Window({
        title : "Browse neighbourhoods",
        html : 'Select a neighbourhood <select id="neighbourhoodSelect"></select>',
        width : 300,
        height : 100
    });
    // pan map according to bounds of a selected object
    var neighbourhoodSelect = $('#neighbourhoodSelect')
        .change(function() {
			giscloud.ui.map.bounds( $(this).find(":selected")
                                    .data("neighbourhood").bounds );
        });
    // grab all features from the neighbourhoods layer and populate neighbourshoods list
    giscloud.features.byLayer( giscloud.ui.map.layers[1].id )
        .done(function(items) {
            // dynamically build dropdown
            $.each(items, function(i, neighbourhood) {
                $('', { text: neighbourhood.data.name })
                    .data("neighbourhood", neighbourhood)
                    .appendTo(neighbourhoodSelect);
            });
        });
}

/************** Park Search *********************/
parks.searchForAPark = function() {
    new giscloud.ui.Window({
        title  : "Search for a park",
        html   : 'Search <input id="parkSearch" style="margin-left: 10px; width: 200px;" type="text" />',
        width  : 300,
        height : 100
    });
    var parkSearch = $('#parkSearch').focus();
    // load parks
    giscloud.features.byLayer( giscloud.ui.map.layers[2].id )
        .done(function(items) {
            var parks = [];
            $.each(items, function(i, park) {
                parks.push({label:park.data.map_park_n, bounds:park.bounds});
            });
            // setup autocomplete
            parkSearch.autocomplete({ source: parks,
                                      select: function(e, park) {
                                          giscloud.ui.map.bounds(park.item.bounds);
                                      }
									});
        });
}

/************** Park Query *******************/
parks.queryAPark = function() {
    new giscloud.ui.Window( {
        title : "Park Query",
        html : 'Select parks 'view-source:
            + '<select><option value=">">larger</option>'</select><select id="parkQueryOperator"> + '<option value="=">equal</option><option value="<">smaller</option></select>'
            + ' than <input id="parkQuery" style="width: 25px;" type="text" value="0" /> acres'
            + ' <a id="parkQueryButton" class="bluebutton">Query</a>'
            + '<div id="parkQueryResult" style="margin-top: 7px; color: #228b22;"></div>',
        width : 330,
        height : 110
    });
    $('#parkQuery').focus();
    $('#parkQueryButton')
        .click( function() {
            // query parks
            giscloud.features.byLayer(
                giscloud.ui.map.layers[2].id, {
                    where : "acres " + $('#parkQueryOperator').val() + $('#parkQuery').val()
                })
                .done( function( items ) {
                    giscloud.ui.map.selection.clear();
                    $('#parkQueryResult').html( 'Found <strong>' + items.length + '</strong> park(s)' );
                    giscloud.ui.map.selection.selected(
                        $.map( items, function( item ) {
                            return { featureId: item.id, layerId: giscloud.ui.map.layers[2].id };
                        })
                    );
                });
        });
}