Day 4: Mapbox GL

[planemad]

• HTML markup introduction in notepad
• Embedding your custom map using Mapbox GL JS
• Host your code online
  • Create an empty repository on Github.com
  • Clone in desktop using [Github desktop]()
  • Move your html into the repository folder
  • Commit and sync
  • Check your remote repository to verify the file updates
  • Create a new Github pages branch gh-pages to serve the files at <username>.github.io/<repository>/<file>
• Add some style
  • Add a heading and paragraph description to the map html, modify the #map css to provide space for the heading
  • Include Mapbox base.css to give your page a better visual style and make use of common UI components
• Add some JS
  • Add the Mapbox geocoder to allow searching on the map
• Explore the browser web development tools
  • On Chrome or Firefox, right click to inspect element and open the developer tools
  • Modify the CSS of different elements to see a live preview
  • Add any CSS you want to save into the <style> section of your html
  • In the console type map to access the maboxgl map object
  • Use the Mapbox GL JS API documentation to explore various methods like map.getCenter()
  • Try to rotate the map using map.setBearing()