Skip to content

Instantly share code, notes, and snippets.

Last active February 8, 2016 23:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Focusable Maps
license: gpl-3.0

These two maps are independently focusable, thanks to the tabindex attribute on a containing div element.

<!DOCTYPE html>
<script type="text/javascript" src=""></script>
<style type="text/css">
@import url("");
html, body {
height: 100%;
background: #E6E6E6;
div {
float: left;
width: 50%;
height: 100%;
svg {
display: block;
<div id="left" tabindex="1"></div>
<div id="right" tabindex="2"></div>
<script type="text/javascript">
var po = org.polymaps;
var left =
+ "/1a1b06b230af4efdbb989ea99e9841af" //
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
var right =
+ "/1a1b06b230af4efdbb989ea99e9841af" //
+ "/999/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
<span id="copy">
&copy; 2010
<a href="">CloudMade</a>,
<a href="">OpenStreetMap</a> contributors,
<a href="">CCBYSA</a>.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment