Slides from a talk presented at MicroSphere online meetup organized by Sphere.it on 12th of May. Note: This is a keynote presentation converted to PDF. Originally it has videos that are not included here. Talk description: Interactive maps are a great way to represent your data, and today more than ever it’s important to properly and effectively visualize geographic information to your users. Although projects like Google maps or MapBox provide great out-of-the-box solutions, sometimes you might want to avoid the hassle that comes from using these tools, especially if you are concerned about pricing due to high volume of traffic on your websites. In this talk, I will explain how you can create your own SVG maps that are lightweight, easy to use, and very customizable. Using live examples you will see step by step how to create a simple world map, and how you can style different parts of the map based on certain criteria using just CSS. All of that in just 30 lines of code! Note: Basic knowledge of JS, HTML, and CSS is good to have for better understanding

1. Marko Letić
@NisamProgramer
May 12th 2020
sphere.it
IN 30 LINES OF CODE
INTERACTIVE MAPS

2. ABOUT ME
• DEVELOPER ADVOCATE AND FRONT END LEAD @AVA
• TECH SPEAKER @MOZILLA
• CONFERENCE ORGANIZER @ARMADA JS
• ”WORKING” ON MY PHD IN DATA VISUALIZATION
• JAVASCRIPT ENTHUSIAST
• I ALSO LOVE CSS!
• TWITTER: @NisamProgramer

3. WHY MAPS?
• MAPS REPRESENT THE REAL WORLD ON A MUCH SMALLER SCALE
• HELP YOU VIRTUALLY TRAVEL FROM ONE LOCATION TO ANOTHER
• FIGURE OUT WHERE YOU ARE AND WHERE YOU WANT TO GO
• MAPS TELL YOU WHAT IS AROUND YOU
• EFFECTIVE WAY TO PRESENT GEOGRAPHIC DATA TO YOUR USERS
• MAPS ARE BEAUTIFUL

4. AGENDA
• TOOLS AND FRAMEWORKS AVAILABLE TODAY
• USAGE EXAMPLES
• HOW AND WHERE TO GET THE DATA
• VIEW THE DATA
• HOW TO CREATE THE SVG MAP
• HOW TO USE IT

5. Google maps

6. Mapbox

7. OTHERS

8. MAPS ARE BEAUTIFUL

9. http://noheroes.ghostrecon.com/

10. https://deck.gl/#/examples/core-layers/trips-layer

11. http://www.welcometofillory.com/

12. HOW TO CHOOSE?
• WHAT TYPE OF BUSINESS AM I RUNNING?
• WHAT’S THE SIZE OF MY BUSINESS?
• WHAT PART OF THE WORLD IS MY PROJECT FOCUSED ON?

13. https://vdata.nikkei.com/en/newsgraphics/coronavirus-china-map/

14. WHY SVG MAPS?
• LIGHTWEIGHT
• CUSTOMIZABLE
• FREE TO USE
• EASY TO STYLE

15. GET THE DATA
• GEOGRAPHIC DATA FOR COUNTRY BORDERS
• NATURAL EARTH http://www.naturalearthdata.com/
• FREE TO USE
• GREAT AT COUNTRY OR PROVINCE LEVEL
• NOT HIGH ENOUGH RESOLUTION TO SHOW THE NEIGHBORHOODS OR STREEL LEVELS

16. ZIP FILE - 200 KB

17. VIEW THE DATA
• DOWNLOAD AND INSTALL QGIS https://www.qgis.org/en/site/index.html
• GEOGRAPHIC INFORMATION SYSTEM SOFTWARE
• VERY POWERFUL AND PACKED WITH FEATURES

19. CREATE THE SVG MAP
kartograph config.json -o map.svg
Input file name Output file name
• INSTALL Kartograph.py http://kartograph.org/about/kartograph.py/
• LIGHTWEIGHT PYTHON LIBRARY
• BUILT BY Gregor Aisch
• USES JSON CONFIGURATION FILE

20. EXAMPLES

21. REFERENCES
• Inspired by:
“A Guide To Building SVG Maps From Natural Earth Data” article by Chris Youderian
https://www.smashingmagazine.com/2015/09/making-svg-maps-from-natural-earth-data/
• SVG 101: What is SVG? https://www.sitepoint.com/svg-101-what-is-svg/
• Mapbox blog https://blog.mapbox.com/
• Nightingale: The Journal of the Data Visualization Society https://medium.com/nightingale
• Book recommendation:
The Phantom Atlas: The Greatest Myths, Lies and Blunders on Maps by Edward Brooke-Hitching

22. Marko Letić
@NisamProgramer
May 12th 2020
sphere.it
IN 30 LINES OF CODE
INTERACTIVE MAPS
THANK YOU!