thomson42 / map-project-beta

The best combination of politics and geography on the web.

Neiborhood Map Project

The Website for review: Thomson42's live website

Hello and welcome to the best combination of politics and geography on the web. Here you will find all the information necessary to get started in using and understanding the code I have built here.

Website layout and functionality

The general layout of the website is designed to give as much space as possible to the google maps DOM, where most of the interactivity is. For you to use the sight just click on any one of the markers presented in the map and it will bounce pulling up an infowindow along with it describing the location highlighted in blue and outlined in black.

The hamburger button at the top left of the view pulls open a list of all Markers and a search bar. Type in any known district into the search bar and any similar districts should automatically pop up as the only remaining options. Clicking any of the districts in the list will result in bringing up those matching district’s marker's info window and close the list view for better view of the infowindow itself.

Finally any viewport that is smaller than 600 pixels wide will adjust the total space the menu takes and raises the font size for easier viewing.

Startup Requirements

For testing and general modifications be sure to click the green clone or download button at the top right of your screen. Click the download Zip option. From there you may open the zip file and have acess to all nessary files. Double click the index.html and it should apear on you browser for local viewing.

Project build Changelog

• First changes Built the groundwork for the KML layers to render properly. Requiring the building of a KMZ file to display all KML at once
• Second changes Added markers into each of the corresponding KML layers as to build off of their functionality and meet requirements.
• Third changes Started Info Window Testing and implementing example HTML code into markers.
• Forth changes Better DOM element manipulation added.
• Fith changes Started trying to implement AJAX functionality with Wikipedia and manipulate the received data.
• Final changes Incorporated functioning AJAX request into website and added mobile friendly options.

Sources used

Live search with knockout.js A modified version is used to implement the live search bar and list feature.

Contact info

If you have any questions feel free to email me at [email protected]