Difference between revisions of "directions-examples"

From Microformats Wiki
Jump to navigation Jump to search
Line 8: Line 8:
  
  
Google Maps
+
===Google Maps===
  
  
Line 25: Line 25:
  
  
source (via firefox's dom inspector)
+
===source=== (via firefox's dom inspector)
  
 
<pre>
 
<pre>
   <TABLE class="summary">
+
   <table class="summary">
    <TBODY>
+
<tbody>
      <TR onclick="openInfoWindow('start')" class="milestone">
+
<tr onclick="openInfoWindow('start')" class="milestone">
        <TD class="name link">
+
<td class="name link">
          <A onclick="this.blur()" href="javascript:void(0)">
+
<a onclick="this.blur()" href="javascript:void(0)">
Start address         </A>
+
Start address  
:       </TD>
+
</a>
        <TD class="value" id="panel_start">
+
:  
50 California St         <BR/>
+
</td>
San Francisco, CA 94111         <BR/>
+
<td class="value" id="panel_start">
        </TD>
+
50 California St  
      </TR>
+
<br />
      <TR onclick="openInfoWindow('end')" class="milestone">
+
San Francisco, CA 94111  
        <TD class="name">
+
<br />
          <A onclick="this.blur()" href="javascript:void(0)">
+
</td>
End address         </A>
+
</tr>
:       </TD>
+
<tr onclick="openInfoWindow('end')" class="milestone">
        <TD class="value" id="panel_end">
+
<td class="name">
10 Market St         <BR/>
+
<a onclick="this.blur()" href="javascript:void(0)">
San Francisco, CA 94111         <BR/>
+
End address  
        </TD>
+
</a>
      </TR>
+
:  
      <TR>
+
</td>
        <TD class="name">
+
<td class="value" id="panel_end">
Distance:       </TD>
+
10 Market St  
        <TD class="value">
+
<br />
0.2&nbsp;mi&nbsp;(about&nbsp;24 secs)       </TD>
+
San Francisco, CA 94111  
      </TR>
+
<br />
    </TBODY>
+
</td>
  </TABLE>
+
</tr>
  <DIV class="reverse">
+
<tr>
    <A onclick="return loadUrl(this.href)" href="/maps?f=d&amp;hl=en&amp;sll=37.79449,-122.395015&amp;sspn=0.048969,0.081711&amp;saddr=10+market+st,+san+francisco&amp;daddr=50+california+st,+san+francisco">
+
<td class="name">
Reverse directions   </A>
+
Distance:  
  </DIV>
+
</td>
  <DIV class="printspacer noscreen">
+
<td class="value">
&nbsp; </DIV>
+
0.2&nbsp;mi&nbsp;(about&nbsp;24 secs)  
  <TABLE class="steps">
+
</td>
    <TBODY>
+
</tr>
      <TR onclick="showPolylineBlowup('d', 0)">
+
</tbody>
        <TD class="num noprint">
+
</table>
          <A href="javascript:void(0)">
+
<div class="reverse">
1         </A>
+
<a onclick="return loadUrl(this.href)" href="/maps?f=d&amp;hl=en&amp;sll=37.79449,-122.395015&amp;sspn=0.048969,0.081711&amp;saddr=10+market+st,+san+francisco&amp;daddr=50+california+st,+san+francisco">
.       </TD>
+
Reverse directions  
        <TD class="num noscreen">
+
</a>
1.       </TD>
+
</div>
        <TD id="panel_0" class="desc">
+
<div class="printspacer noscreen">
Head           <B>
+
&nbsp;  
east         </B>
+
</div>
from           <B>
+
<table class="steps">
California St         </B>
+
<tbody>
- go&nbsp;         <B>
+
<tr onclick="showPolylineBlowup('d', 0)">
177&nbsp;ft         </B>
+
<td class="num noprint">
        </TD>
+
<a href="javascript:void(0)">
      </TR>
+
1  
      <TR onclick="showPolylineBlowup('d', 2)">
+
</a>
        <TD class="num noprint">
+
.  
          <A href="javascript:void(0)">
+
</td>
2         </A>
+
<td class="num noscreen">
.       </TD>
+
1.  
        <TD class="num noscreen">
+
</td>
2.       </TD>
+
<td id="panel_0" class="desc">
        <TD id="panel_2" class="desc">
+
Head  
Turn           <B>
+
<b>
right         </B>
+
east  
at           <B>
+
</b>
Drumm St         </B>
+
from  
- go&nbsp;         <B>
+
<b>
149&nbsp;ft         </B>
+
California St  
        </TD>
+
</b>
      </TR>
+
- go&nbsp;  
      <TR onclick="showPolylineBlowup('d', 4)">
+
<b>
        <TD class="num noprint">
+
177&nbsp;ft  
          <A href="javascript:void(0)">
+
</b>
3         </A>
+
</td>
.       </TD>
+
</tr>
        <TD class="num noscreen">
+
<tr onclick="showPolylineBlowup('d', 2)">
3.       </TD>
+
<td class="num noprint">
        <TD id="panel_4" class="desc">
+
<a href="javascript:void(0)">
Turn           <B>
+
2  
left         </B>
+
</a>
at           <B>
+
.  
Market St         </B>
+
</td>
- go&nbsp;         <B>
+
<td class="num noscreen">
0.1&nbsp;mi         </B>
+
2.  
        </TD>
+
</td>
      </TR>
+
<td id="panel_2" class="desc">
    </TBODY>
+
Turn  
  </TABLE>
+
<b>
  <DIV class="legal">
+
right  
These directions are for planning purposes only. You may find that construction projects, traffic, or other events may cause road conditions to differ from the map results.  </DIV>
+
</b>
  <DIV class="legal">
+
at  
Map data &copy;2005 NAVTEQ&trade;, Tele Atlas  </DIV>
+
<b>
</DIV>
+
Drumm St  
 +
</b>
 +
- go&nbsp;  
 +
<b>
 +
149&nbsp;ft  
 +
</b>
 +
</td>
 +
</tr>
 +
<tr onclick="showPolylineBlowup('d', 4)">
 +
<td class="num noprint">
 +
<a href="javascript:void(0)">
 +
3  
 +
</a>
 +
.  
 +
</td>
 +
<td class="num noscreen">
 +
3.  
 +
</td>
 +
<td id="panel_4" class="desc">
 +
Turn  
 +
<b>
 +
left  
 +
</b>
 +
at  
 +
<b>
 +
Market St  
 +
</b>
 +
- go&nbsp;  
 +
<b>
 +
0.1&nbsp;mi  
 +
</b>
 +
</td>
 +
</tr>
 +
</tbody>
 +
</table>
  
 +
 +
</pre>
 +
 +
 +
 +
 +
===MSN maps===
 +
 +
<pre>
 +
Start: 1600 Pennsylvania Ave NW, Washington, DC 20006
 +
End: 15th St NW & Constitution Ave NW, Washington, DC 20004
 +
Total Distance: 0.6 Miles
 +
Estimated Total Time: 4 minutes
 +
Directions Miles
 +
Start: Depart 1600 Pennsylvania Ave NW, Washington, DC 20006 on Local road(s) (East) < 0.1
 +
1: Turn RIGHT (South) onto E Executive Ave NW 0.2
 +
2: Turn LEFT (East) onto Alexander Hamilton Pl NW, then immediately turn RIGHT (South) onto 15th St NW 0.4
 +
 +
Map Image
 +
End: Arrive 15th St NW & Constitution Ave NW, Washington, DC 20004
 +
</pre>
 +
 +
 +
===Source===
 +
 +
<pre>
 +
<table class="NoBorder" border="0" width="100%">
 +
<tr>
 +
<td class="RTText">
 +
<span class="RouteTableStartText">
 +
Start:
 +
</span>
 +
Depart 1600 Pennsylvania Ave NW, Washington, DC 20006 on Local road(s) (East)
 +
</td>
 +
<td class="RTText" align="Right" width="40">
 +
&lt; 0.1
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="RTText">
 +
<b>
 +
1:
 +
</b>
 +
Turn RIGHT (South) onto E Executive Ave NW
 +
</td>
 +
<td class="RTText" align="Right" width="40">
 +
0.2
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="RTText">
 +
<b>
 +
2:
 +
</b>
 +
Turn LEFT (East) onto Alexander Hamilton Pl NW, then immediately turn RIGHT (South) onto 15th St NW
 +
</td>
 +
<td class="RTText" align="Right" width="40">
 +
0.4
 +
</td>
 +
</tr>
 +
</table>
 +
</td>
 +
<td class="RTRow" align="Right" valign="Top" height="10">
 +
&nbsp;
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="RTRow">
 +
&nbsp;
 +
<img style="border-color:#C7BCA2;" alt="Map Image" src="/I/spacer.gif" width="0" height="0" border="0" name="MapImg1">
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="RTRowDark" valign="Top" colspan="2" rowspan="2">
 +
<table class="NoBorder" border="0" width="100%">
 +
<tr>
 +
<td class="RTText">
 +
<span class="RouteTableEndText">
 +
End:
 +
</span>
 +
Arrive 15th St NW &amp; Constitution Ave NW, Washington, DC 20004
 +
</td>
 +
<td class="RTText" width="40">
 +
&nbsp;
 +
</td>
 +
</tr>
 +
</table>
 
</pre>
 
</pre>
  

Revision as of 09:42, 27 March 2006

directions examples

Per the microformats The microformats process, the first thing to do in the investigation/creation of a new microformat is to research existing examples of directions published on the Web.

examples

Get examples from Google Maps, MSN Maps, Yahoo Maps, and note implicit schemas.


Google Maps

Start address:	50 California St
San Francisco, CA 94111
End address:	10 Market St
San Francisco, CA 94111
Distance:	0.2 mi (about 24 secs)
Reverse directions
 
1.	1.	Head east from California St - go 177 ft
2.	2.	Turn right at Drumm St - go 149 ft
3.	3.	Turn left at Market St - go 0.1 mi


===source=== (via firefox's dom inspector)

  <table class="summary">
<tbody>
<tr onclick="openInfoWindow('start')" class="milestone">
<td class="name link">
<a onclick="this.blur()" href="javascript:void(0)">
Start address 
</a>
: 
</td>
<td class="value" id="panel_start">
50 California St 
<br />
San Francisco, CA 94111 
<br />
</td>
</tr>
<tr onclick="openInfoWindow('end')" class="milestone">
<td class="name">
<a onclick="this.blur()" href="javascript:void(0)">
End address 
</a>
: 
</td>
<td class="value" id="panel_end">
10 Market St 
<br />
San Francisco, CA 94111 
<br />
</td>
</tr>
<tr>
<td class="name">
Distance: 
</td>
<td class="value">
0.2 mi (about 24 secs) 
</td>
</tr>
</tbody>
</table>
<div class="reverse">
<a onclick="return loadUrl(this.href)" href="/maps?f=d&hl=en&sll=37.79449,-122.395015&sspn=0.048969,0.081711&saddr=10+market+st,+san+francisco&daddr=50+california+st,+san+francisco">
Reverse directions 
</a>
</div>
<div class="printspacer noscreen">
  
</div>
<table class="steps">
<tbody>
<tr onclick="showPolylineBlowup('d', 0)">
<td class="num noprint">
<a href="javascript:void(0)">
1 
</a>
. 
</td>
<td class="num noscreen">
1. 
</td>
<td id="panel_0" class="desc">
Head 
<b>
east 
</b>
from 
<b>
California St 
</b>
- go  
<b>
177 ft 
</b>
</td>
</tr>
<tr onclick="showPolylineBlowup('d', 2)">
<td class="num noprint">
<a href="javascript:void(0)">
2 
</a>
. 
</td>
<td class="num noscreen">
2. 
</td>
<td id="panel_2" class="desc">
Turn 
<b>
right 
</b>
at 
<b>
Drumm St 
</b>
- go  
<b>
149 ft 
</b>
</td>
</tr>
<tr onclick="showPolylineBlowup('d', 4)">
<td class="num noprint">
<a href="javascript:void(0)">
3 
</a>
. 
</td>
<td class="num noscreen">
3. 
</td>
<td id="panel_4" class="desc">
Turn 
<b>
left 
</b>
at 
<b>
Market St 
</b>
- go  
<b>
0.1 mi 
</b>
</td>
</tr>
</tbody>
</table>




MSN maps

Start: 	1600 Pennsylvania Ave NW, Washington, DC 20006
End: 	15th St NW & Constitution Ave NW, Washington, DC 20004
Total Distance: 0.6 Miles
Estimated Total Time: 4 minutes
Directions	Miles	 
Start: Depart 1600 Pennsylvania Ave NW, Washington, DC 20006 on Local road(s) (East)	< 0.1
1: Turn RIGHT (South) onto E Executive Ave NW	0.2
2: Turn LEFT (East) onto Alexander Hamilton Pl NW, then immediately turn RIGHT (South) onto 15th St NW	0.4
	 
 Map Image
End: Arrive 15th St NW & Constitution Ave NW, Washington, DC 20004


Source

<table class="NoBorder" border="0" width="100%">
<tr>
<td class="RTText">
<span class="RouteTableStartText">
Start: 
</span>
Depart 1600 Pennsylvania Ave NW, Washington, DC 20006 on Local road(s) (East) 
</td>
<td class="RTText" align="Right" width="40">
< 0.1 
</td>
</tr>
<tr>
<td class="RTText">
<b>
1: 
</b>
Turn RIGHT (South) onto E Executive Ave NW 
</td>
<td class="RTText" align="Right" width="40">
0.2 
</td>
</tr>
<tr>
<td class="RTText">
<b>
2: 
</b>
Turn LEFT (East) onto Alexander Hamilton Pl NW, then immediately turn RIGHT (South) onto 15th St NW 
</td>
<td class="RTText" align="Right" width="40">
0.4 
</td>
</tr>
</table>
</td>
<td class="RTRow" align="Right" valign="Top" height="10">
  
</td>
</tr>
<tr>
<td class="RTRow">
 
<img style="border-color:#C7BCA2;" alt="Map Image" src="/I/spacer.gif" width="0" height="0" border="0" name="MapImg1">
</td>
</tr>
<tr>
<td class="RTRowDark" valign="Top" colspan="2" rowspan="2">
<table class="NoBorder" border="0" width="100%">
<tr>
<td class="RTText">
<span class="RouteTableEndText">
End: 
</span>
Arrive 15th St NW & Constitution Ave NW, Washington, DC 20004 
</td>
<td class="RTText" width="40">
  
</td>
</tr>
</table>

related discussion