Functional Design
Department of Innovation & Technology
Submitted By
Electronic Knowledge Interchange
December, 2016
- Revision History
- Background and Overview
- Base Map
- Types of Searches
- Existing Queries
- Data Formation
- Saving Searches
- Administrator
| Revision | Date | Author |
|---|---|---|
| 1.3.0 | 12/9/2016 | EKI and COC |
The signatures below indicate that the City of Chicago concurs with the functional design described in this document prepared by Electronic Knowledge Interchange.
_____________________________________________________
Department of Innovation & Technology Date
Open Grid is a geographical information systems developed for Chicago residents to access public city data in a more intuitive manner.
OpenGrid is open source and utilizes MongoDB, a free open source document database optimized to handle spatial data. Mongo provides high performance, high availability and automatic scaling. The application interacts with different database engines or APIs which makes it easy for other cities: governments, non-profits and/or corporations to adopt the application.
OpenGrid has a HTML/JavaScript interface modernized to support usage on mobile devices and terminals in public safety vehicles. The user interface is clean, intuitive, and accessible on mobile devices.
This document is one of the deliverables within the design phase of the project and serves as a basis for mobile and desktop application low-level design.
OpenGrid has been customized to an end user security systems in order to gain access.
OpenGrid has a flexible system of defining user’s roles and providing access to the application depending upon the developer/s implementation.
The application offers configurable security groups, where administrator/s can apply certain functions and dataset/s to a specific security groups and/or users.
There is also an option to remove security features, where authentication will no longer be required within the application.
When the application is initially opened through a browser the login screen will appear. Prompting a cursor within the username textbox; the login button is initially disabled until both username and password has been entered. Once the user information has been provided and the login button has been selected, the user credentials will get validated against the system.
If login failed, an error message will appear: “Login failed due to invalid username or password.” The system will allow the user to re-enter a valid username and/or password.
If login was successful, the landing page will launch.
The Landing page image shown above in Figure 3.
| Element No. | Element Name/Description |
|---|---|
|
|
Quick Search box is used to perform basic searches on datasets. The question mark icon within the Quick Search box displays a cheat sheet for quick search syntax. |
|
|
|
|
|
User Credentials – Displays the name of the currently logged in user also provides the logout functionality, which is located within the drop-down menu to the right of the username. |
|
|
User Manual Icon – Link to accessing the user manual |
|
|
Zoom In and Zoom Out Icon 
|
|
|
Reset Map View and Area Zoom Icon 
|
|
|
Zoom specification Icon  Full-Screen Icon  Geo-location Icon 
|
|
|
Measurement Tool |
|
|
Layers Icon Grid Views:
Open Weather Layers:
|
|
|
Expandable Table view panel |
|
|
Map attribution; this will display a link for any copyright information, terms of use, etc. |
|
|
Main Map display |
### Session Timeout
Once the landing page has been displayed if there's been no server activity on the application after four hours the user will be logged out automatically with a message appearing. See Figure 4 below:
## Base Map #### Map Layers
The layers icon displays multiple basemap views and open weather layers. The list is built dynamically based on what's available through the Map Service provider. In the lower right hand corner on the grid, there is information and active links provided about the map services. The initial launch page displays the default basemap, Street View. For all other basemaps see Figure 5a and 5b below.
Figure 5a. Aerial View
Figure 5b. Black and White View
A dynamic legend will display a representation of what type of search was executed. If, multiple types with same dataset is being displayed for a search; it will display the two datatypes based off color representation from the setup on the grid.
Figure 6. Map Legend
Navigation tools are used to aid users in finding their way around a map. Using navigational controls, the user should be able to:
- zoom in/out
- reset the map
- pan to any direction
- switch to full screen mode
- activate geo-location
- apply layers
- apply measurements
- select hyperlinks
By selecting the measurement icon, the measurement tool can be turned on to enable measurements of the following:
Linear Measurement
- Distance between points
Area Measurement
- Distance around a point Figure 7a. Linear Measurement
Figure 7b. Multiple Linear Measurement
Figure 7c. Area Measurement
A Quick Search box can be used to perform common searches that will support the following commands/inputs:
<tr>
<td>Latitude and Longitude</td> <TD>Displays a marker to show location of latitude and longitude entered.</TD> <TD><latitude>, <longitude></TD> <TD>41.8270, -87.6423</TD> <TD>Displayed as a marker on the map</TD>
</tr>
<tr>
<td>Place Name</td> <TD>Shows location of the place specified.</TD> <TD><name of place></TD> <TD>Daley Center</TD> <TD>Displayed as a marker on the map</TD>
</tr>
<tr>
<td>Tweets</td> <TD>Displays recent tweets matching keyword, if provided. Keyword can be a bareword or a double-quoted set of words.</TD> <TD>tweet <keyword></TD> <TD>tweet</TD> <TD><ul><li>Date</li> <li>Screen Name</li> <li>Text</li> <li>City</li></ul></TD>
</tr>
<tr>
<td>Weather</td> <TD>Displays a point in the middle of the map showing weather information for the zip code.</TD> <TD>weather <zip code></TD> <TD>weather 60601</TD> <TD><ul><li>Temperature in (Fahrenheit)</li> <li>Wind</li> <li>Conditions</li> <li>Humidity</li> <li>Forecast</li></ul></TD>
</tr>
| Query Type | Description | Command Syntax | Sample | Display Columns on Search Result |
|---|---|---|---|---|
| Address | Finds the specified address using the Map/GIS Service. | <number><direction><streetname> | 50 W. Washington | Displayed as a marker on the map |
The data results for the above search types and any other search form will appear as point/s, custom icons or markers on the map. Any search type information, whether its performed as a Quick Search or Advanced Search will display on the map and table grid. The table grid displays data as rows.
In some cases, there will only be one row of data on the grid (for example, Weather or Bus ID search). Quick search results can be cleared/reset by clicking on the Clear Data button. This action will also stop all data auto-refresh activities, if any are happening in the background.
Tweet dataset provides real-time data and automatically refreshes with new data every 30 seconds within set intervals. The data points have active links embedded, when selected the link will open in a new browser window displaying social media content, such as articles, photos and location associated with the tweet.
Figure 8. Quick Search on Tweets
### Find Data Panel ##### Advanced Search 
Figure 9. Find Data Panel
The Find Data Panel is where more defined searches are built, saved and existing searches are executed.
| Section No. | Description |
|---|---|
|
|
Search Link - Displays the Advanced Search Panel |
|
|
Manage Queries Link - Stores saved searches |
|
|
Existing Queries
|
|
|
Select Data
|
|
|
Select Location
|
|
|
Save Query As |
|
|
Auto-Refresh Every (SECONDS) |
|
|
Get Data - Executes the search |
|
|
Clear Search - Resets the Find Data Panel |
The Find Data Panel is also called the advanced search, it is used to narrow searches by applying a series of different filters and actions. The user has the ability to enter a combination of search criteria by applying one or more datasets, adding rule/s or group/s for building a search. The panel has map extent setup as default when performing a search; when a search is executed all data will plot within the area of the current map location boundary.
All datasets have a default color in case multiple datasets are applied on the map, it helps differentiate between the data. The user also has the ability to modify color, size and opacity of each data point pertaining to a dataset.
Using food establishments as an example, a user can search for restaurants and food trucks in Chicago, the two criteria is listed under a single dataset, called Business Licenses. A user may want to run multiple Business Licenses criteria in a single search for comparison purposes. What should a user do since there is a one color limitation and default color per dataset setup?
Simple, just add Business Licenses dataset twice, then set one with a filter License_description = “Retail Food Establishment” and the other License_description = “Mobile Food License”, and assign each dataset a different color by selecting the “Color Option” tool beneath each dataset setup.
In the example below, it shows how the search was applied and how each data type is represented on the grid... Retail Food Establishments has the default color of Blue and Mobile Food Licenses is Red.
Figure 10. Business Licenses Dataset Example
To further filter a search, a geo-spatial filter can be applied by drawing a shape on a targeted area on a map or selecting one of the pre-defined boundaries from the Select Location section of the panel. Select Location has two geo-spatial options called WITHIN and NEAR (see images below).
Figure 11a. WITHIN Boundary
Figure 11b. NEAR Me
Figure 11c. NEAR Marker
Amongst applying boundaries to a search, auto refresh component can be setup for a search by the number of intervals in seconds (minimum of 30 seconds, maximum of 3600 seconds or 60 minutes).
When a query is submitted, the application will display a message when the query times out. It will also display a message when the search service returns no data.
### Existing Queries ##### Commonly Used Queries
Are popular searches that city residents are most likely to explore within the application. The drop menu has a list of predefined queries that a user can apply as a search.
Each query when selected displays its search parameters under the Select Data section. To run commonly used queries, select a search from the drop list and select Get Data.
Figure 12. Commonly Used Queries
The map grid is interactive, a user can navigate the map using a mouse, keyboard and for mobile devices by swiping using index finger. The map displays the maximum of 1000 points. All data appears on the grid as points and/or markers. Places/Address search plot as markers and Datasets plot as points on the grid. The map legend appears on the grid when a search has been executed, displaying the color of the data point and the name of the data being displayed. A retractable information box appears to the bottom right of the grid when a search is performed, displaying the No. of records found or an error message pertaining to a search. The grid has an automatic refresh feature for updating and re-plotting data upon navigating around the map.
The table grid is located at the bottom of the map. The table becomes active when a search has been performed and returns a set of results on the map. To access the table after a search, click on the black bar at the bottom of the map, there is a white carat displayed in the middle of the black bar below as an indicator that the bar is collapsible. After clicking on the bar, the table will expand upward exposing the table and its components.
Figure 13. Table Grid
### Components of the Table Grid Information Tab
- Search type (i.e. Place/Address, Business License).
Search Textbox
- Used to filter by data components within the table.
Columns Icon
- Provides a drop list of available columns pertaining to the data within the datasets. The columns are interchangeable, user can enable and disable certain columns from the table by selecting or deselecting each column name from the column list.
Export Icon
- Provides a drop-list of available exportation options used to send or transfer data from the table into the following formats:
- CSV - Comma Separated Values
- PDF - Portable Document Format
- MS Excel - Microsoft Excel
Graph
- Places the search results into a pie chart it is group by certain parameters from the search depending on the dataset.
Heat Map
- Data that’s contained in a matrix within a representation of colors to use for analysis, comparison or trending purposes.
Tile Map
- Small images, usually rectangular or isometric layers that acts as puzzle pieces to cover an intended area.
Rows Droplist
- Provides a drop list of total number of rows that can be displayed per page.
Page Numbers
- Interactive number links for maneuvering through pages.
OpenGrid allows a user to create searches; there is also an option to save a search. To save a query, define a name for your search within the “Save Query As” section of the Find Data Panel. A successful save will return a message in the lower right corner “Query was successfully saved".
A search is saved and stored in the manage queries panel. Saved searches are also accessible within the Load Save Queries drop list located in the Existing Queries section of the Find Data Panel. Load Save Queries section stores the ten most recent saved searches.
A saved search can also be overwritten upon user discretion. To overwrite a search, simply access the save search in the list and within the “Save Query As” textbox remove the saved search name and redefine it. Select the Save button to execute the new save. A warning message within a decision textbox will appear alarming the user that the name already exist, would you like to continue with the overwrite and as a result it will overwrite the existing query with that name.
Figure 14. Query Overwrite
## Administrator ##### Manage Users and Manage Groups
The admin screen is accessible by selecting the Manage Button. Administrator capabilities are available for admin users only. Manage Users and Manage Groups are active links; when selected their panel is exposed. Admin users can perform the following tasks:
- Add/ Remove users
- Update Users
- Delete Users
- Add/Remove roles from users
- Add a Group
- Add/Remove Group
To setup a group under the Manage Group link, select the green new group. The administrator will need to provide a Group ID, the group ID when initially created and saved will no longer be editable; name of the group and a description for the group, in which both are editable. There are two check boxes “Is Admin Group” which is an optional configuration that signifies the group is for admin use only; “Enabled” , activates the new group for usage. To save the new group, select the Submit button, this action will cause the group to be saved and stored within the manage groups panel list. Once a new group has been created the administrator can begin assigning the group to users.
Manage Group Panel provides information about the different types of groups created within the application and its components.
- Edit Functions (update and delete icons)
- New Group Button
- Group Details
- Functions
- Data Types
The group details column provides the name and the description of the group. The Functions columns provides a drop list of available options that are applied to a group. The administrator will have access to all options and users only has access to the advanced search option.
The manage users link displays a list of all available users and components.
- Edits functions (update and delete icons)
- New User Button
- User ID
- User First Name
- User Last Name
- Group options the users have access to
The new user button performs two functionalities, finding a User and Adding a User. To find a user, select “Find By User ID” or “Find By Name”. “Find By Name” search provides multiple search options to find existing or future user/s by first name, last name, or combination of both. To look-up a user select the Find button, this action will search for a user profile.
To add a new user, search for the user by name or userid. When the appropriate user is found click on the submit button. This action will add the user to the application.
To verify, if user was successfully added navigate to the Manage Users panel, scroll down the list until the username is found.