Skip to content

Single-page application comprising neighborhood map

Notifications You must be signed in to change notification settings

maxcct/neighborhood-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Neighborhood Map

If all files are present and correct, running the app should require nothing more than opening index.html in a browser.

The data models used are stored in collection.js. The ModelView is contained inapp.js and the view is comprised by the bindings in index.html, as per the way Knockout works. Also included in app.js is code for autocomplete functionality, which uses jQuery UI.

The app draws on information from Wikipedia via AJAX requests to its API. A link to the relevant page is included underneath. Please note that it was necessary to use jQuery to control the div in question (#info), because it appeared to be impossible to get the info from an AJAX request without first adding it to the DOM. As such, it was necessary to use jQuery for all updates of that field: the state of any KO observable relating to the div's content would otherwise end up conflicting with text supplied by API requests.

If a location is selected from the list, an API request is sent, the map recenters itself on the corresponding marker, and that marker bounces. If a marker is selected, an API request is sent and an info window displaying that location's name appears above the marker.

Words entered into the 'TYPE TO FILTER' field are checked against a list of keywords associated with each location, and those that have no matching terms have their list items and markers hidden. Autocomplete is present.

The 'CLEAR' button closes all info windows, sets all location visible properties to true, clears Wikipedia info section and resets filter field.

About

Single-page application comprising neighborhood map

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published