Area Map

Create a map of your A.A. General Service area that you can embed on your website. The more areas that participate, the more complete the map becomes.

Terms

Features

Free and open source
No tracking
English, French, and Spanish
Tiny js bundle 5kb

Add your district boundaries

The map gets its data from a crowdsourced list of Google My Maps links on the Area Maps Google Sheet. To start, edit, or take over an area map, leave a comment on the sheet.

When making your map, please read these instructions.

Embed the map on your site

You can embed the map on your website by adding the following code to your HTML. Feel free to modify the CSS.

<script src="https://area-map.netlify.app/app.js" type="module" async></script>
<link rel="stylesheet" href="https://area-map.netlify.app/app.css" />
<style type="text/css">#map { height: 600px; }</style>
<div id="map"></div>

If you wish, you can add a data-area parameter to pre-select an area when the page loads. See an example for Area 01.

If you run into trouble, or want to request a feature, please open an issue.

BESbswy

`←`	Move left
`→`	Move right
`↑`	Move up
`↓`	Move down
`+`	Zoom in
`-`	Zoom out
`Home`	Jump left by 75%
`End`	Jump right by 75%
`Page Up`	Jump up by 75%
`Page Down`	Jump down by 75%