Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make your first MangoMap


Published on

Create your first interactive GIS webmap with MangoMap

Published in: Software
  • Login to see the comments

  • Be the first to like this

Make your first MangoMap

  1. 1. Create your first web map with MangoMap
  2. 2. What is MangoMap? MangoMap is a cloud based web mapping platform that makes it easy to create and share data-driven web maps with powerful GIS analysis tools built in.
  3. 3. To complete this tutorial, you’ll need a MangoMap account. It’s completely free for 30 days with full, unrestricted access and functionality. Sign up for your free account at We won’t even ask for your credit card, and it just takes a few seconds. We’ll wait here while you sign up. Click here!
  4. 4. All done? Great! Let’s make your first map.
  5. 5. Now you’re signed up and logged in, create a new map by clicking on the big green PLUS button.
  6. 6. Pause to admire your shiny new base map. OK, now click on the layer button on the navigation panel.
  7. 7. Click “Add Data From Our Sample Library”
  8. 8. For this tutorial, we’ll use the demo dataset US State Borders. Click the green PLUS button to add the dataset to your account.
  9. 9. Once the dataset is loaded into your account, the Layer editor will appear. Here you can style your data, add labels and customize attribute popups.
  10. 10. Set the map type to “Category”, and set the column to “vote_2008”. Category maps assign different colors to the map based on content of the selected column — perfect for a small number of categories. Now click on the Custom Legend button.
  11. 11. Click on the color choose and set Democrat to blue & Republican to red. Click Done.
  12. 12. Next, go to the Labels tab and activate layer labels by clicking the toggle switch to ON. Set the label value to “vote_2008”. Style your label text as you wish and click Save.
  13. 13. Now we can see the results of just a few clicks of customization: A cool map of the contiguous USA, with states that voted Democrats or Republican in 2008 are clearly defined by party colors, and labels. But, look at that title... Let’s fix that!
  14. 14. To give the map a title and add a custom logo, open the map customization panel button, and rename the map to “2008 US Election Results”. Describe the map as “State by State category Map”. Then tap on Save.
  15. 15. Now navigate to the Brand Settings tab, and enable Custom logo/colors.
  16. 16. Here we can set the map interface theme. Let’s make a few changes to the design by setting the following: ⚫ Background Color: White ⚫ Title Text Size: Large ⚫ Title Text Color: Blue ⚫ Upload a logo from your PC. For this example, I’ve chosen the Stars and Stripes. When you’re done, click Save. Scroll down for more custom settings.
  17. 17. Now we can see our custom colors, logo, and our updated map title and description. LOOKING GOOD!
  18. 18. Wait! Let’s make this interesting. Open a new browser tab, and go to: That’s a zip package of US State flags I prepared earlier. Download the file and unzip it to your Dropbox’s Public Folder.
  19. 19. Once the flags have synced with your Dropbox, grab the public link by right- clicking on one of the flags.
  20. 20. Let’s tweak the map attribute popup. Navigate to the Layers panel & edit the US State Borders layer by clicking on the pencil icon. Got that Dropbox Public Link? Good work. We’ll use that in just a moment. But first...
  21. 21. On the layer panel, open the Popup tab. Enable the popup, and enable custom popup layout.
  22. 22. In our example dataset, there are 3 attributes which appear in the popup: {name} - the state, {population} - its population, and {vote_2008} - and the party that won the 2008 Presidential election. By default, your popup contains all attributes, but has no formatting, so let’s add some -- Click on the embed image button.
  23. 23. You will be presented with a URL input box. Here, paste the public dropbox URL we copied a few moments ago. Now, modify the URL to include our variable: Replace “Alabama” with {name}, then click Insert.Your Final URL should like like this: https://dl.dropbox...../Flag_of_{name}.png
  24. 24. In the popup editor, you should now see a placeholder image where the flags will appear. Hmmm. That default attribute data looks a little dull, let’s spice things up!
  25. 25. Remove the existing attribute variables, and replace with the following line: “In the 2008 US Presidential election, the {vote_2008} party won the popular vote in {name}.” Now click Save. Tip: You can use the green button to insert any variable you want.
  26. 26. Now let’s click on a state and see what our popup looks like. We have our attribute variables rendered in the text, and automagically, our image of the state’s flag loads for each state. Click on a few more states and see how the text and images change.
  27. 27. I don’t know about you, but I’m pretty happy with how this is looking, so it’s time to share it with the world! First, you’ll need to Publish your map – click on that big green Publish Map button at the bottom of the map editor, wait for the magic to happen, then copy your short URL!
  28. 28. Paste your short URL into a new tab and see it in all it’s glory in the wild. Play around with the map, hit the share button, send it to your friends, neighbours, that guy you always see walking his dog at the park. MangoMap is built to share!
  29. 29. Did you test your map on your mobile? Give it a try — MangoMap works on all devices.
  30. 30. How easy was that? In just a few minutes, you’ve: ➔ created a map ➔ styled and customized your data ➔ styled and customized your map interface ➔ customized your attribute popups ➔ configured images to load dynamically from data attributes ➔ learned how quick and simple it is to use MangoMap That’s all folks!
  31. 31. What’s next? Glad you asked! ➔ Check out our blog - - for more tutorials and insights for making amazing interactive data driven web maps. ➔ Sign up for our QGIS video tutorials on Discover Spatial to learn about open source GIS for desktop: ➔ Make more maps! Your town or local government probably has loads of GIS and census data available for download - why not download some and make some maps about your local community, your rivers, your environment… anything that tells a story about your world, and share them with the world with MangoMap!