Map It Like It’s Hot: Build Embedded Maps with Zero Code
Turn your paper map into a snazzy interactive one—no coding required! We'll walk you through using Mapotic to plot your points, customise categories, and bring your map to life. By the end, you'll be zooming in and showing off your masterpiece like a pro. Ready to map? Let’s do this!
Looking to turn your paper map into an interactive, digital experience? With just a few simple steps, you can create a web map—no coding required! Whether it's highlighting favourite places or showcasing research, you'll transform locations into an engaging, clickable map ready to share.
In this tutorial, you’ll learn how to transform your own paper map into an interactive web map without writing a single line of code—just like the one we created for the FUND-IT research report and case studies section, where we share the experiences and lessons of cities in our network on fundraising and paper map publishing.
We’ll be using the Mapotic platform to create the interactive map, utilising a small subset of locations from our Prague conference map. Feel free to use your own points of interest.
Turning Paper into Pixels
First, download the Excel spreadsheet and the cover photo from our GitHub repository. In the spreadsheet, each row represents a single destination, and each column represents an attribute, such as neighbourhood, category, address, and more. The longitude and latitude columns represent the location of each destination in the WGS84 coordinate system, which was designed for GPS tracking.
In Mapotic, click “Create a map”. Fill out the map details, add a cover photo, and click “Create map”.
Customise Like a Cartographer: Colours, Icons, and Categories
Let’s add the first category to our map. Categories are the unique values under the “legend Category” attribute, which will allow us to filter the map content. You can select the category colour and icon. Disable the category attributes, as we already have our own in the spreadsheet.
Click on “Settings”, then on “Map”. Under “Map centre and zoom”, select the default map view—we’ll choose Prague. Click “Save”.
Click on “Content”, then “Categories”. Add the missing categories with custom colours and icons, making sure you use the exact same string values from the spreadsheet. We’ll add the categories drink, shop, go out, and chill.
Under the “Content” dropdown, click on “Attributes”. Delete the existing attributes, as we’ll be adding our own custom ones based on the spreadsheet. Click “Add” to create a new attribute, and feel free to give each one a custom icon. Add strings as text attributes, and numerical values like longitude and latitude as numbers.
The Grand Reveal: Import, Tweak, and Share Your Map
Now, let’s upload the data. Under the “Import/Export” dropdown, click on “Import”, then “New Import”. Select the spreadsheet and click “Continue”. For the location_name attribute, in the “Set the corresponding property” section, select the mandatory option “Name”. Do the same for the legend_category attribute, mapping it to the “Category” option, and map longitude and latitude to the “Geo location” list. Click “Verify import” and address any issues if needed. When ready, click “Finish import”.
That’s it! Your map is ready. Notice how destinations in the same vicinity are clustered together—zoom in to reveal each individual location. Now’s a great time to manually add any new destinations using the “Add a place” button.
When you’re ready to share your map, publish it by going to “Settings” and then “Map Status”. Under “Integrations”, choose “Embedded map” to find the code you’ll need to embed it on your website.
Learn more about no-code solutions in our full case study on our website, and be sure to check out our other tutorials to discover even more tools and tricks for your digital adventures.
Happy mapmaking!