GIS Cloud Developers Simple Parks Manager
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 };
})
);
});
});
}