bushidocodes/oldtown-map

oldtown-map is a JavaScript application that renders historic locations in Old Town Alexandria Virginia on a Google Map and adds Wikipedia images.

oldtown-map

oldtown-map is a JavaScript application that renders historic locations in Old Town Alexandria Virginia on a Google Map as markers. It provides a sidebar with a list of these locations and a searchable filter list that filters both the list and the markers on the map. Selecting a marker or a location on the list opens an InfoView with static information about the location. If an item has a Wikipedia ID, then the application displays a link to the Wikipedia page for the location and the infoView loads and scales thumbnail versions of the images on the locaiton's wikipedia page.

Project Setup

oldtown-map uses ES2015 syntax and transpiles to browser-friendly syntax using Babel. It uses gulp as the build tool and bower to manage the following external libraries:

• jQuery
• Bootstrap
• Knockout
• Knockstrap (Knockout bindings for Bootstrap... not currently used by app, but useful)

The Simpler-Sidebar Bootstrap theme is provided in this repo.

To install, execute the following:

git clone https://github.com/bushidocodes/oldtown-map.git
cd oldtown-map
npm install
gulp

...and then open ./dist/index.html in your browser of choice

Built with love using

• Visual Studio Code
• Babel
• Gulp

Authors

• Sean McBride - bushidocodes

License

This project is licensed under the MIT License - see the LICENSE.md file for details

oldtown-map's Issues

Dropdown menu used for phone interfaces does not dynamically filter

Add Image Attribution and Link to Source Wikipedia Page

Add a comment above or below the pictures indicating source and make the pictures clickable to the source Wikipedia page.

Appending Wikipedia Images will push top of InfoWindow off the top of the screen

This behavior occurs in Edge and Chrome, but not IE
Note: It does occur in IE after all...

Consider improving sidebar like example provided

https://codepen.io/j_holtslander/pen/XmpMEp

Implement BabelJS to support Safari and IE

Hamburger Button not responding as expected using Chrome or Firefox Mobile on Android

cristian [6:55 PM]
On mobile I can't get the hamburger to open a slide out in Firefox or chrome

[6:57]
If I click slightly above its locationg(border of the screen) it responds but not on the icon itself.

[6:58]
I dig the overall functionality of the page though

spmcbride1201 [9:36 PM]
@Cristian: Thank you so much for letting me know about the issue with the hamburger button on mobile! I'm tagging it as an issue on the GitHub repo now. This was on an Android phone, right?

cristian [9:44 PM]
Yeah it was an android phone.

Implement ability to tag favorite locations and save to localStorage

Code Cleanup and general commenting

Consider eliminating bootstrap and knockstrap

It seems that these libraries aren't really being used too much. Consider an alternate template solution, perhaps using bootstrap.

Create Title with menu sandwich button above map div

Sidebar needs extra width to render vertical scrollbar for desktops

Implement Error Handling for AJAX calls

Map does not extend to end of screen when menu closed

Create README File

Improve UX for Phones

Design is not very responsive (fixed height of maps div, etc.)

Update build process to use browserify, reactify, watchify and gulp-notify.

https://gist.github.com/Sigmus/9253068#file-gulpfile-js-L24