Initial Map with One Popup

[ajchu28]

Currently the map displays a single popup. Styling is separated in into mapstyle.css for Yuen to add the popup styling. Further steps include writing a script to parse the incoming JSON poem object and add the poem to the map. Public transit stops are currently being displayed, but need to figure out how to add this shapefile of the cta routes to the map.

[ajchu28]

Thanks for the detailed feedback! I went ahead and reverted my branch back to the class main branch to recover the files I deleted and switched to a feature branch. I then reorganized my code into a mapview.html file, mapScript.js file, and moved my css into styles.css. I was able to fix most of javascript file to conform to the class standards, and the page loads as normal if I comment out a few lines. The problem lines for me are highlighted in the screenshot below:

If I comment this out, the page loads and views the map as before. However, to conform to the code styling, I have to delete the hyphens or the page doesn't load properly. However, the hyphenated attributes are defined by Mapbox API, and the popups won't display if I change the names. The documentation is here if you scroll down to the icon-image section. What do you think is the best way to work around this?

[nbriz]

@ajchu28 thnx for the detailed description of changes! i still have to give a closer look, but sounds like this will be ready to merge soon as u fix the hyphenated issue, try putting single quotes around any property names that have hyphens, like this:

layout: {
  'icon-image': '{icon}',
  'icon-size': 2.5,
  'icon-allow-overlap': true
}

[nbriz]

@ajchu28 i'm going to close this PR now since u opened the other one