Watercolor travel map

Web application using Google Maps and stamen watercolor tiles to generate a travel map. The map can then be downloaded by the user as a png file.

Technologies

• Facebook's React for the UI
• react-bootstrap and custom CSS3 for layout, styling and responsiveness
• flux for the application architecture
• Bourbon for useful CSS mixins
• npm to manage dependencies
• JavaScript is written using the subset of ECMAScript 6 made available thru the babel compiler
• Grunt to automate tasks
• React Hot Loader for reloading only parts of the app that have changed during development
• React Router for front-end routing
• Webpack to bundle the application for production
• Google maps JS for the map
• canvg to convert the SVG elements into canvas to that they can be rendered by html2canvas
• html2canvas to convert the map DOM element into an image
• FileSaver to save the resulting image
• rc-color-picker for the UI elements allowing to select the colors

Building

grunt build

Credits

Map tiles by Stamen Design.

Icons used as markers designed by Freepik.