Building Inclusive Maps with Audiom

Introduction

Audiom is a tool for creating maps that can be used completely visually and completely nonvisually. It allows you to create and share maps both as a link, and to embed maps in your website. Here are some examples of maps built using Audiom.

Creating a Map

1. Create an account. Visit the audiom site and click the button that says "Log In or Sign up", and create an account through Auth0.
2. Once you have logged in, you will be taken to the dashboard. Click on the data sources tab. Here is listed all the data sources and possible layers you have created for your maps. Click "Create New".
3. Enter in the name of what you would like to call the data source (it can be anything). In the sources field, enter in Geojson data where every feature has at least a "name" attribute. In this guide, we will use geojson.io. Open the above link.
4. An editor will open. Make a shape, and once it's made, click on it.
5. Once you click on the shape, a table with two columns should pop up at the bottom of the page. The left fields should be something like: "stroke", "stroke-width", or "marker-color". There should also be a blank row at the bottom of the table. In this blank row, enter "name" in the left column (without the quotes), and a name for the shape in the right column (like "Big Box"). Click the blue plus button, and enter a second set of values, "short_sound" in the left column, and "short_wood" in the right column.
6. Once you have entered your properties, look at the top of the screen, and there will be 3 tabs: "Json", "Table", and "Help". Click on "Json". Once you click on Json, an editor will open with code (Geojson) in it. Select all, and copy this code to your clipboard.
7. Go back to the Create Data Source screen we arrived at in step 3, and in the "Source" field, paste the code from Geojson.io, then click "Create".
8. Click on the maps tab, and "Create New"
9. Type in a name for your map (it can be anything), and select the data source you just created, then click "Create".
10. Now you will be taken to a screen with both the visual map and the audio map. To access the audio map, click the button that says either "Audio Map On", or "Audio Map Off". Make sure it says "Audio Map On". Tap the arrow keys to move in the direction of the arrow keys. The shape you made should be up and to the right.
11. At the bottom of the page, there is a field that says "Embed URL". Select this code and paste it into your webpage to have this map render on your website!

For a more detailed guide, visit the Audiom Homepage.

Please Give your Feedback!