In this tutorial you will make the map below by following simple step by step instructions. You should be able to complete the tutorial in around 20 minutes.

https://mangomap.com/maps/28077

You can build the map by following the steps below. Some steps also contain links to the relevant pages in our documentation.

  1. Log into your Mango account (or sign up for your free trial if you haven’t already).
  1. Download the sample data from here and upload it to your Mango account via the Layers panel.

  1. In the layer settings panel choose Quantity and select comarea from the Column dropdown. Next in the “Fill” row, set the Opacity dropdown option to 100%.
  1. In the General tab, change the layer’s name to Properties and change the layer’s description to Total Commercial Area.
  1. In the Attributes tab, change the attribute labels to Address, Building Area (sq ft); Commercial Area (sq ft)”, *_Retail Area (sq ft), and Office Area (sq ft), then click the Save button.
  1. From the Layer settings panel, change the base map to Simple (English).
  1. Now go to the General Settings panel and change your map’s name to Lower Manhattan Commercial Property Analysis, and change map description to Data Discovery and Analysis of the Commercial Properties of Lower Manhattan. Click Save.
  1. In the Toolbox panel activate Print Tool.
  1. Next in the Toolbox panel activate Summary Tool. Click the checkbox for the properties layer. In the “Attributes in Filter” dropdown choose “bldgarea” and “comarea”. In the “Attributes in Summary” also choose “bldgarea” and “comarea”
  1. Next in the Toolbox panel activate the Google Street View Tool.
  1. In the “Theme Settings” tab in the “Interface Customization” panel, select the checkbox to use a custom theme and then press the “Custom Theme Settings” button. In the custom template settings panel upload the custom logo that is contained in the folder you downloaded and change the “Theme Color” to “006f51”. Once you are done press “Update” and navigate back to your map.

Your map is now finished and ready to share. At the bottom of the editor screen, flip the switch from offline to online.

That’s it, you’re done!

You can now share the map using the options presented to you in the sharing window that is displayed after you switch the map online. Grab the short URL and send to your audience, or embed the map in your own website or blog. How easy was that?

Next Steps

Try using the map that you’ve made and the tools. Open up the Data Summary Tool and performing some queries, zoom into an area of interest and print or try dragging the yellow pegman icon from the Google Street view tool to get an idea of what some of the streets looks like.

Now you can see how simple it is to build fully featured interactive web maps, have a think about how web mapping could be useful to your business or organization and share your ideas for maps in the comment section below.

Need more help with this?
✉ Email the Mango support team

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.