A Extra Out there Map

As firms like Google and Yahoo! have simplified the method of putting knowledge on a map by way of providing internet services and products/APIs, the recognition and abundance of mapping programs on the internet has greater dramatically. Whilst those maps have had a favorable impact on maximum customers, what does it imply for folks with accessibility wishes?

Maximum on-line mapping programs don’t cope with problems with internet accessibility. For a visually impaired internet person, those extremely visible maps are necessarily pointless.

Is there a option to show text-based knowledge on a map, conserving it available, helpful and visually sexy? Sure: the use of an available CSS-based map during which the underlying map knowledge is separated from the visible format.

A distinct start line#section1

So what if, as a substitute of ranging from a map graphic and including knowledge to issues positioned around the symbol, we begin with the information itself and create a map in response to the information?

First, let’s select some knowledge that has a geographic part so it may be put on a map. For instance, let’s use the 10 maximum populated towns on this planet. Displayed as simple textual content, the record may appear to be this:

  1. Tokyo, Japan – 28,025,00Zero folks
  2. Mexico Town, Mexico – 18,131,00Zero folks
  3. Mumbai, India – 18,042,00Zero folks
  4. Sao Paulo, Brazil – 17,110,00Zero folks
  5. New York Town, USA – 16,626,00Zero folks
  6. Shanghai, China – 14,173,00Zero folks
  7. Lagos, Nigeria – 13,488,00Zero folks
  8. Los Angeles, USA – 13,129,00Zero folks
  9. Calcutta, India – 12,900,00Zero folks
  10. Buenos Aires, Argentina – 12,431,00Zero folks

Observe: The information above is meant handiest for instance and might not be solely correct.

No longer unhealthy, however it might be great so as to add some descriptive textual content to every of the towns to explain a little bit extra about them. So, an instance for only one town may well be:

Shanghai, China
Shanghai, China is located at the banks of the Yangtze River and has a inhabitants of 14,173,000, making it the 6th maximum populated town.

Organizing the information#section2

Now that we’ve added some descriptive knowledge to town, let’s take into accounts tips on how to arrange that knowledge in HTML. A definition record (dl) can be a great way to prepare this data as a result of a dl has each definition time period (dt) and definition description (dd) kid components. This implies we will have town’s title as a dt and town description as a dd. Let’s see how that may glance:

<dl> <dt><a href="http://en.wikipedia.org/wiki/Shanghaip.c2C_China"  elegance="location" identity="shanghai">Shanghai, China</a></dt> <dd>Shanghai, China is located at the banks of the Yangtze  River and has a inhabitants of 14,173,000, making it the 6th maximum populated town.</dd> ...  

Bringing the remainder of our knowledge into the definition record offers us the entire record of 10 towns.

Observe that the anchor hyperlink throughout the dt was once given a elegance and distinctive identity. The identity permits us to consult with every town for my part, so we will find it at the map. We’ll come again to this a little bit later.

Including some taste#section3

A More Accessible Map

So the place are we now? We’ve created an available text-based record of things and their definitions. The information is what we need to put across to the person, irrespective of whether or not they see it on a map or simply as textual content, so we’re in just right form. Now that we have got the tips arranged, let’s make some degree map out of it.

In some degree map, there are 3 primary pieces which can be visually displayed: the map, the purpose(s) at the map, and knowledge to show when the person clicks on or hovers over some degree. We will be able to very simply translate the ones visible pieces to the text-based dl we simply created:

  • Map symbol = dl
  • Map level(s) = dt > a
  • Map level popup knowledge = dd

Step one in making dl right into a map is so as to add the background map symbol with a mode. We can give the dl a elegance of “map” in order that handiest the ones dls in a report get styled this manner (in our instance, as a global map).

dl.map { background: url(worldmap.png) no-repeat; border: 1px forged #999; margin: 0px; padding: 0px; text-align:left; width: 550px; peak: 275px; place: relative; }

The next move is so as to add a mode for the dts that can permit the anchors inside of to be made into issues at the map:

dl.map dt { show: inline; }

Subsequent, we want to take care of the dd pieces which would be the knowledge displayed when some degree at the map is hovered over. We are not looking for the dd to show till the a inside of its related dt is hovered, so by way of default we want to cover the dds. Since display readers will forget about an HTML component with a mode of show: none, we want to cover the information by way of positioning it a long way clear of the browser’s view. The manner for the dd will make the component appear to be a tooltip window:

dl.map dd { background: #555; border: 2px forged #222; border-radius: 8px; /* CSS3 rounded corners */ -moz-border-radius: 8px; /* Mozilla rounded corners */ colour: #fff; padding: 4px; width: 200px; place: absolute; left: -9999px; z-index: 11; }

Every of the dts accommodates an a which, by way of default, takes a person to the Wikipedia article similar to town; this hyperlink is what’s going to cause the tooltip to show the dd. The hyperlink will probably be displayed as some degree and the hyperlink textual content will probably be invisible, so once more we want to transfer the textual content out of the browser’s view. Every level will even have a other location, however we’ll deal with that during the next move. The bottom taste for the anchor hyperlinks looks as if this:

dl.map a.location { background: url(level.png) no-repeat; show: block; define: none; text-decoration: none; text-indent: -9999px; width: 10px; peak: 10px; place: absolute; z-index: 10; } dl.map a.location:hover { background: url(point-hover.png) no-repeat -1px -1px; }

After all, we want to upload kinds explicit to every level at the map. Those issues are represented by way of the anchor hyperlinks within every of the dts. The location of every level will probably be achieved by way of assigning best and left values (since we already located all of them completely within the above code snippet):

dl.map a#shanghai { best: 80px; left: 484px; } dl.map a#tokyo { best: 105px; left: 121px; } ...

We’ve simply created a elementary map, so let’s take a look at the place we’re with our first instance. This situation puts the issues at the map, however does no longer show any knowledge when some degree is hovered over.

Show the information as a tooltip#section4

Now that we have got a map with issues located, we want to show knowledge when the issues are hovered over. To show a tooltip we’re going to have to make use of some JavaScript.

The JavaScript to turn and conceal the dd “tooltip” does so by way of enhancing the manner of the dd related to the present a being hovered. A JavaScript serve as named showTooltip() puts the dd again into the visual space of the browser by way of enhancing its best and left taste values, in response to the site of the related a level.

It will be really easy for us to make use of inline match handlers like onmouseover and onmouseout to perform this, however that wouldn’t be very unobtrusive. We wish like our script to stay unbiased of our map and our markup. To try this we will have the JavaScript dynamically assign occasions to the anchor components.

However sooner than we dig into the JavaScript, let’s pause for a second to speak about JavaScript gadgets. The JavaScript used on this methodology uses object literal notation, so studying the fundamentals of this may occasionally assist you to know how all of it works. Here’s a elementary instance of an object literal:

var particular person = { title: "Homer Simpson", say: "Doh!", communicate: serve as(){ alert( this.say ); }, stroll: serve as(){ // code } };

One of the vital advantages of the use of gadgets in JavaScript is that we will use strategies and homes in a extra good means. For instance, with the above code we will name a technique like particular person.communicate() or get a assets like particular person.title. Gadgets additionally let us reuse manner and assets names with out inflicting war. As an example, if we have been so as to add an animal object to the document above, it will even have an stroll manner (animal.stroll()) with out conflicting with the particular person.stroll() manner.

The script used to assign the occasions on this methodology is a bit more sophisticated, however here’s a shortened skeleton of what this situation script looks as if:

var mapMaker = { offsetX:     -16,  // tooltip X offset offsetY:     16,  // tooltip Y offset init:        serve as(){ // units up the maps }, showTooltip: serve as(){ // presentations the tooltip }, hideTooltip: serve as(){ // hides the tooltip }, addEvt: serve as( component, kind, handler ){ // provides the occasions } };

Now let’s dig a little bit deeper into one of the most strategies. For the sake of brevity we can no longer quilt each and every manner, however we can take on the important thing ones.

The init() manner is our constructor. This implies the process is what we name to initialize our mapMaker object. It units up the map by way of including occasions to every of the anchor hyperlinks within the dts, making the tooltips imaginable. Let’s take a look at the init manner:

init: serve as(){ var i  = 0; var ii = 0; var location; var DLs = report.getElementsByTagName('dl'); whilst( DLs.period > i ){ if( DLs&lsqb;i].className == 'map' ){ mapMaker.stripWhitespace( DLs&lsqb;i] ); var DTs = DLs&lsqb;i].getElementsByTagName( 'dt' ); whilst( DTs.period > ii ){ location = DTs&lsqb;ii].firstChild; mapMaker.addEvt( location, 'mouseover',      mapMaker.showTooltip ); mapMaker.addEvt( location, 'mouseout',      mapMaker.hideTooltip ); mapMaker.addEvt( location, 'center of attention',       mapMaker.showTooltip ); mapMaker.addEvt( location, 'blur',       mapMaker.hideTooltip ); ii++; }; ii = 0; } i++; }; }, 

The init manner first collects the entire dl components within the report by way of the use of report.getElementsByTagName( 'dl' ) after which loops thru every, in search of one with a elegance of “map”. When it reveals one, it collects its dt components and loops thru them, assigning match handlers (the use of the addEvt() manner) to the anchor tag inside of. The occasions we’ve accounted for come with mouseover (which calls the showTooltip() manner) and mouseout (which calls the hideTooltip() manner) and mirrors the similar movements for the center of attention and blur occasions, respectively, to make the tooltip to be had for keyboard customers.

Now let’s take a better take a look at a portion of the showTooltip() manner; this system presentations the tooltip dd when a map level (dl.map > dt > a) is hovered. To show the right kind tooltip, the serve as will have to know which dd is related to every anchor. From the recently hovered anchor tag, this, we will transfer to its dad or mum dt tag (this.parentNode) then to that dt’s dd (this.parentNode.nextSibling) which is the tooltip we need to show:

showTooltip: serve as(){ var a = this; var tooltip = a.parentNode.nextSibling; ...

When we know which dd component must be displayed we will set the other taste attributes to put the dd tooltip into view and transfer it into the right kind location subsequent to the purpose:

  ... // get width and peak of background map var mapWidth  = tooltip.parentNode.offsetWidth; var mapHeight = tooltip.parentNode.offsetHeight;  // get width and peak of the tooltip var tooltipWidth = tooltip.offsetWidth; var tooltipHeight = tooltip.offsetHeight;  // determine the place to put the tooltip in response to the purpose var newX = a.offsetLeft + mapMaker.offsetX; var newY = a.offsetTop + mapMaker.offsetY;  // test if tooltip suits map width & modify if vital if( ( newX + tooltipWidth ) > mapWidth ){ tooltip.taste.left = newX - tooltipWidth - 24 + 'px'; } else { tooltip.taste.left = newX + 'px'; }  //test if tooltip suits map peak  if( ( newY + tooltipHeight ) > mapHeight ){ tooltip.taste.best = newY - tooltipHeight - 14 + 'px'; } else { tooltip.taste.best = newY + 'px'; } ...

Within the script above the dd tooltip taste is modified to convey the component again into the visual space of the map, however the script additionally takes under consideration the dimensions of the map and positions the tooltip so it does no longer cross outdoor the background map symbol obstacles.

The final element we want to fear about is working the script when the webpage has loaded. Sounds simple simply name window.onload = mapMaker.init() proper? Smartly it is advisable to do this, nevertheless it doesn’t permit different scripts to run on web page load and it might be in point of fact great to cause this script to run after the web page has loaded however sooner than the entire photographs have downloaded. Fortunately, Dean Edwards has executed the paintings for us in this one and you’ll take a look at his write-up of the methodology for more info.

We’ve got now reviewed the foremost portions of this map instance’s JavaScript, however didn’t quilt each and every unmarried serve as within the script. The purposes for including occasions get quite sophisticated and are outdoor the scope of this text; on the other hand, you’ll view all the script right here.

Now that we have got added some JavaScript capability let’s take a look at the place we’re with this 2d map instance. Now we have a visually gratifying map that gives extra element when the person hovers over a town. After all, as a result of this map is constructed from text-based knowledge, the information displayed as a map can also be learn by way of a display reader and produce the similar that means.

What about CSS on and JavaScript off?#section5

We want to cope with customers who’ve JavaScript grew to become off however use a browser with just right CSS improve. We wish those customers to get the lo-fi, however useable textual content model of the map, as a result of with out JavaScript enabled they received’t be capable to see the tooltips.

To permit the tooltips and the map taste, the JavaScript init() manner can also be tweaked to show the map “on.” If the map isn’t “on,” it’ll merely show as textual content handiest. As we’ve given our map dl a category of “map,” we’ll want to upload a 2d elegance: “on.” We’ll additionally want ot replace our taste sheet, including .on to every taste rule like this:

dl.map.on { background: url(worldmap.png) no-repeat; border: 1px forged #999; margin: 0px; padding: 0px; text-align:left; width: 550px; peak: 275px; place: relative; }

The above taste will handiest impact dls that experience are elegance-ified as each “map” and “on” (<dl elegance="map on">) and won’t impact any dls with just a elegance of “map.” You’ll be able to see this in motion in our 3rd instance.

Getting fancy#section6

A More Accessible Map

Now that we have got a useful map, why don’t we upload some photographs to the tooltip? This subsequent instance map presentations photographs within the tooltip. Or, perhaps you want to have hyperlinks within the tooltip. To try this, we want the tooltip to be “sticky” and no longer cover when the purpose is moused off. Here’s an instance of a “sticky” tooltip map (the JavaScript purposes have oviously modified somewhat to make the tooltip stick). After all, this method additionally permits for us to put a couple of maps on a unmarried web page, so we’ve quite a lot of choices.

The place on this planet?#section7

Now again to these glorious APIs. What if you wish to use one position issues in this international map by way of latitude and longitude?

Server facet scripting examples of tips on how to dynamically position issues at the map are past the scope of this text, however right here is a few pseudo code to transform latitude and longitude issues to pixels for the arena map symbol utilized in our instance:

/* For this situation international map symbol in map coordinate  machine GCS_WGS_1984 */  // set latitude and longitude pointLat  = // between -90.00 and 90.00 pointLong = // between -180.00 and 180.00;  // get map peak and width mapHeight = // map peak (in pixels) mapWidth  = // map width (in pixels)  // convert latitude to pixels pointLat = ( ( pointLat * -1 ) + 90 ) * ( mapHeight / 180 );  // convert longitude to pixels pointLong = ( pointLong + 180 ) * ( mapWidth / 360 );  /* you might also need to right kind for the dimensions  of the purpose symbol positioned at the map */ pointLat  = pointLat  - ( [point image height] / 2 ); pointLong = pointLong - ( [point image width] / 2);

If you’re taking into account the use of server facet scripting to dynamically position issues on a map, you may additionally imagine having the background symbol of the map be set by way of JavaScript. This is able to permit a dynamic web page to assign other background map photographs to the dl in response to the world or zoom stage you want to show.

A handy guide a rough overview#section8

Let’s overview what we’ve executed:

  1. Began with a text-based record that has geographic elements
  2. Grew to become that textual content record into an HTML definition record
  3. Styled the dl to appear to be a map
  4. Styled the dt components into issues positioned across the map the use of CSS
  5. Styled the dd components to appear to be a tooltips, however moved them out of view
  6. Used JavaScript to dynamically assign mouse and keyboard occasions to the map issues
  7. Enabled the dd “tooltips” to be styled again into view when the map issues are hovered

What have we achieved by way of doing this?

  1. Created a text-based map
  2. Enabled display readers, text-based customers, and engines like google to “learn” the map
  3. Created a delightful visible map for sighted customers
  4. Created an interactive map for mouse customers
  5. Allowed non-mouse customers to have interaction with the map with their keyboard

The place to head from right here?#section9

The instance of a extra available map offered right here is solely that, a extra available map. It does no longer declare to be one of the simplest ways, only a other option to means the issue of constructing available geographic-type content material with no need to create a couple of pages in several codecs. This situation won’t cope with all forms of accessibility wishes, nor be a great strategy to all forms of internet founded maps or GIS programs; on the other hand, a text-based webpage is at all times an ideal start line for addressing accessibility considerations.

In comparison to different regularly used mapping strategies, this method begins with the information and builds a map round it. Textual content content material is separated from the map format. When content material can also be separated from format the content material is typically extra available. Which means that another available model would possibly not want to be created.

What we’ve constructed on this article is only the start of what may well be executed on a map. Those identical ideas may well be used to put shapes, or perhaps a drill down map to show detailed knowledge for extra explicit spaces or places. The essential factor to bear in mind is to begin with the text-based knowledge you need to put across. First make the information readable and helpful as textual content, after which make it right into a map.

You’ve “moved speedy and damaged issues.” Right here’s some useful recommendation from Jeremy Wagner to mend them responsibly. A key side of being a supervisor helps your stories prevail. Lara Hogan stocks how on this excerpt from Resilient Control. All of sudden, I spotted that the folk subsequent to me may well be critically impacted by way of my paintings. I used to be having a handy guide a rough lunch within the airport… Retraining slender assumptions about customers’ gender identities is a step towards better protection, privateness, and validation for everybody. On this excerpt from On a regular basis Knowledge Structure, Lisa Maria Martin introduces the structural audit.