ACME Mapper 2.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="//acme.com/resources/leaflet/leaflet.css" /> <link rel="stylesheet" type="text/css" href="//acme.com/resources/leaflet-overrides.css" /> <style type="text/css"> form { margin-top: 0; margin-bottom: 0; } .control { margin: 2px; } .output { border: 2px outset #cccc99; background-color: #cccc99; padding: 2px; } input.button { border-width: 1px; } @media print { .noprint { display: none; } } </style> <link rel="icon" sizes="16x16" type="image/gif" href="//acme.com/resources/images/icon_acme_16.gif" /> <link rel="icon" sizes="32x32" type="image/gif" href="//acme.com/resources/images/icon_acme_32.gif" /> <link rel="icon" sizes="64x64" type="image/gif" href="//acme.com/resources/images/icon_acme_64.gif" /> <link rel="icon" sizes="128x128" type="image/gif" href="//acme.com/resources/images/icon_acme_128.gif" /> <title>ACME Mapper 2.2</title> <link rel="canonical" href="//mapper.acme.com/" /> </head> <body style="width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;" onload="Setup();"> <noscript><h1>You must enable JavaScript to use this page.</h1></noscript> <div id="map" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;"></div> <div id="ad" class="noprint" style="position: absolute; left: 6px; bottom: 38px; z-index: 5000;"> <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px" data-ad-client="ca-pub-5759188606642566" data-ad-slot="9903031188"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div id="controlPanel" class="noprint" style="position: absolute; bottom: 18px; right: 6px; z-index: 5000; display: none; background-color: #99cc99; border: 2px outset #99cc99; padding: 4px; font-family: sans-serif; font-size: small;"> <div id="controlPanelMinimized" style="display: none;"> <a href="javascript:DeMinimizeControlPanel();"><img width="25" height="25" style="border: 0; padding: 0; margin: 0; display: table;" src="images/smallearth2.gif" alt="globe" /></a> </div> <table id="controlPanelFull" border="0" cellspacing="0" cellpadding="0"><tbody> <tr><td> <table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td align="left" width="33%"> <b>ACME Mapper 2.2</b> </td> <td align="center" width="33%"> <a href="javascript:MinimizeControlPanel();"><img id="globe" width="25" height="25" style="border-width: 0;" src="images/smallearth2.gif" alt="globe" /></a> </td> <td align="right" width="33%"> <span class="control" style="vertical-align: text-bottom;" id="print" title="Print this map"><a href="javascript:Print();"><img width="16" height="16" style="border-width: 0;" src="//acme.com/resources/images/print.gif" alt="print" /></a></span>   <span class="control" style="vertical-align: text-bottom;" title="Email this map to someone"><a id="email"><img width="16" height="17" style="border-width: 0;" src="//acme.com/resources/images/email.gif" alt="email" /></a></span>   <span class="control" style="vertical-align: text-bottom;" title="Generate a URL for this map"><a id="link"><img width="16" height="16" style="border-width: 0;" src="//acme.com/resources/images/link.gif" alt="link" /></a></span> </td> </tr></tbody></table> </td></tr> <tr><td> <table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td align="left"><div id="coords" class="output" style="width: 26em; text-align: center;" title="Current map coordinates"> </div></td> <td id="markButton" align="right" title="Place a marker here"><form method="get" action="javascript:void(0);" onsubmit="MarkHere();"><div class="control"><input type="submit" class="button" value="Mark" /></div></form></td> </tr></tbody></table> </td></tr> <tr id="nearbyItem" title="Nearby places"><td> <table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td align="center"><div class="output" id="nearbyResults" style="width: 32em; height: 2.5em; overflow: hidden;"> </div></td> </tr></tbody></table> </td></tr> <tr id="findItem" title="Find an address, city, ZIP code, lat/long coordinate"><td> <form method="get" action="javascript:void(0);" onsubmit="Find();"> <table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td align="left" style="width: 100%"><div class="control"><input id="findQuery" name="q" style="width: 23em;" /></div></td> <td align="right"><div class="control"><input type="submit" class="button" value="Find" /></div></td> </tr></tbody></table> </form> </td></tr> <tr id="flickrItem" title="Show flickr photos"><td> <form method="get" action="javascript:void(0);"> <table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody> <tr> <td align="left"><img src="images/flickrLogo.png" style="width: 32px; height: 32px; vertical-align: middle;" alt="flickr" /></td> <td align="center" title="How many flickr photos to show"> <select id="nPhotosSelect" onclick="NPhotosOptionChanged();"> <option value="0">0 photos</option> <option value="5">5 photos</option> <option value="10">10 photos</option> <option value="20">20 photos</option> <option value="50">50 photos</option> <option value="100">100 photos</option> </select> </td> <td align="right" title="Optional flickr search string"><div class="control"><input id="flickrQuery" name="q" style="width: 18em;" onkeypress="Flickr();" /></div></td> </tr> </tbody></table> </form> </td></tr> <tr><td> <table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td align="left" title="About the ACME Mapper"><div class="control"><a href="about.html">About</a></div></td> <td align="center" id="hereButton" title="Move the map to your current location"><form method="get" action="javascript:void(0);" onsubmit="GoHere();"><div class="control"><input type="submit" class="button" value="Here" /></div></form></td> <td align="center" id="markersButton" title="Open the Markers panel"><form method="get" action="javascript:void(0);" onsubmit="MarkersOpen();"><div class="control"><input type="submit" class="button" value="Markers" /></div></form></td> <td align="center" id="linksButton" title="Open the Links panel"><form method="get" action="javascript:void(0);" onsubmit="LinksOpen();"><div class="control"><input type="submit" class="button" value="Links" /></div></form></td> <td align="center" title="Open the Options panel"><form method="get" action="javascript:void(0);" onsubmit="OptionsOpen();"><div class="control"><input type="submit" class="button" value="Options" /></div></form></td> <td align="right" title="Back to the ACME Labs web page"><div class="control"><a href="//acme.com/">ACME Labs</a></div></td> </tr></tbody></table> </td></tr> </tbody></table> </div> <div id="block" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; background-color: #808080; opacity: .50; filter: alpha(opacity=50);"></div> <div id="findPanel" style="position: absolute; bottom: 0.5in; right: 3in; z-index: 10000; background-color: #cccccc; border: 2px outset #cccccc; display: none;"> <table border="0"> <tbody> <tr> <td align="center"><b>Find Results</b></td> </tr> <tr> <td>Did you mean one of these locations?</td> </tr> <tr> <td><div id="findResults" style="max-height: 25em; overflow: auto;"> </div></td> </tr> <tr> <td align="right" title="Close this panel"><form method="get" action="javascript:void(0);" onsubmit="FindClose();"><div><input type="submit" class="button" value="Cancel" /></div></form></td> </tr> </tbody> </table> </div> <div id="markersPanel" style="position: absolute; top: 1in; bottom: 1in; right: 3in; overflow: auto; z-index: 10000; background-color: #ffffff; border: 2px outset #ffffff; display: none;"> <table border="0"> <tbody> <tr> <td align="center"><b>Markers</b></td> </tr> <tr> <td><hr /></td> </tr> <tr> <td id="markersCaption"> </td> </tr> <tr> <td> <table id="markersTable" border="0"> </table> </td> </tr> <tr> <td><hr /></td> </tr> <tr> <td align="right"> <table border="0"><tbody><tr> <td id="deleteAllButton" title="Delete all markers"><form method="get" action="javascript:void(0);" onsubmit="MarkersDeleteAllButton();"><div><input type="submit" class="button" value="Delete All" /></div></form></td> <td title="Close this panel"><form method="get" action="javascript:void(0);" onsubmit="MarkersClose();"><div><input type="submit" class="button" value="Close" /></div></form></td> </tr></tbody></table> </td> </tr> </tbody> </table> </div> <div id="linksPanel" style="position: absolute; bottom: 0.5in; right: 3in; z-index: 10000; background-color: #cccccc; border: 2px outset #cccccc; display: none;"> <table border="0"> <tbody> <tr> <td colspan="2" align="center"><b>Links</b></td> </tr> <tr> <td colspan="2">Automatically updated for the current location.</td> </tr> <tr><td colspan="2"><hr /></td></tr> <tr> <td><img width="16" height="16" src="images/faviconGoogle.gif" alt="google" /></td> <td><a id="googleLink">Google Maps</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconFlickr.gif" alt="flickr" /></td> <td><a id="flickrLink">Photos on Flickr</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconGeocaching.gif" alt="geocaching" /></td> <td><a id="geocachesLink">Nearby Geocaches</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconGeocaching.gif" alt="geocaching" /></td> <td><a id="benchmarksLink">Nearby Benchmarks</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconGlobetrotting.gif" alt="globetrotting" /></td> <td><a id="globetrottingLink">Virtual Globetrotting</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconPedometer.gif" alt="pedometer" /></td> <td><a id="pedometerLink">Gmaps Pedometer</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconDatapointed.gif" alt="crayon" /></td> <td><a id="crayonLink">Street Grids Colored By Orientation</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconGeourl.gif" alt="geourl" /></td> <td><a id="geourlLink">GeoURL</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconTiger.gif" alt="tiger" /></td> <td><a id="tigerLink">TIGER</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconTopozone.gif" alt="topozone" /></td> <td><a id="topozoneLink">TopoZone</a></td> </tr> <tr> <td><img width="16" height="16" src="images/faviconMultimap.gif" alt="multimap" /></td> <td><a id="multimapLink">MultiMap.com</a></td> </tr> <tr><td colspan="2"><hr /></td></tr> <tr> <td colspan="2" align="right" title="Close this panel"><form method="get" action="javascript:void(0);" onsubmit="LinksClose();"><div><input type="submit" class="button" value="Close" /></div></form></td> </tr> </tbody> </table> </div> <div id="optionsPanel" style="position: absolute; top: 1in; bottom: 1in; right: 3in; overflow: auto; z-index: 10000; background-color: #cccccc; border: 2px outset #cccccc; display: none;"> <table border="0"> <tbody> <tr> <td colspan="2" align="center"><b>Options</b></td> </tr> <tr> <td colspan="2"><hr /></td> </tr> <tr> <td colspan="2">General Map UI:</td> </tr> <tr> <td title="Show or hide the zoom widget"><input type="checkbox" id="zoomCheckbox" onclick="OptionsChanged();" />Zoom Control</td> </tr> <tr title="Control the layers widget"> <td align="left">Layers Control:</td> <td align="right"> <select id="layersSelect" onclick="OptionsChanged();"> <option value="collapsed">open on hover</option> <option value="open">always open</option> <option value="false">off</option> </select> </td> </tr> <tr title="Control the scale widget"> <td align="left">Scale:</td> <td align="right"> <select id="scaleSelect" onclick="OptionsChanged();"> <option value="metric">meters/km</option> <option value="imperial">feet/miles</option> <option value="both">both</option> <option value="false">off</option> </select> </td> </tr> <tr title="Control scroll-wheel zoom"> <td align="left">Scroll-Wheel Zoom:</td> <td align="right"> <select id="scrollWheelZoomSelect" onclick="OptionsChanged();"> <option value="center">at center</option> <option value="true">at pointer</option>  </select> </td> </tr> <tr> <td colspan="2"><hr /></td> </tr> <tr> <td colspan="2">Mapper-Specific UI:</td> </tr> <tr> <td title="Show or hide the crosshairs at the map's center"><input type="checkbox" id="crosshairsCheckbox" onclick="OptionsChanged();" />Crosshairs</td> <td title="Make a marker for Find results"><input type="checkbox" id="markOnFindCheckbox" onclick="OptionsChanged();" />Mark On Find</td> </tr> <tr title="Distance units in the Nearby Places panel"> <td align="left">Distance:</td> <td align="right"> <select id="unitsSelect" onclick="OptionsChanged();" title="Unit system to use"> <option value="metric">meters/km</option> <option value="imperial">feet/miles</option> </select> </td> </tr> <tr> <td colspan="2"><hr /></td> </tr> <tr> <td colspan="2">Control Panel UI:</td> </tr> <tr> <td title="Show or hide Globe"><input type="checkbox" id="globeCheckbox" onclick="OptionsChanged();" />Globe</td> <td title="Show or hide Print icon"><input type="checkbox" id="printCheckbox" onclick="OptionsChanged();" />Print</td> </tr> <tr> <td title="Show or hide Email icon"><input type="checkbox" id="emailCheckbox" onclick="OptionsChanged();" />Email</td> <td title="Show or hide Link icon"><input type="checkbox" id="linkCheckbox" onclick="OptionsChanged();" />Link</td> </tr> <tr> <td colspan="2"> <span title="Show or hide the coordinates box"><input type="checkbox" id="coordsCheckbox" onclick="OptionsChanged();" />Coords</span> <select id="coordsSelect" onclick="OptionsChanged();" title="Output format of coordinates"> <option value="numeric">d.ddd d.ddd</option> <option value="d">NS d.ddd EW d.ddd</option> <option value="dm">NS d m.mmm' EW d m.mmm'</option> <option value="dms">NS d m' s" EW d m' s"</option> <option value="geotags">geotags</option> <option value="GeoRSS">GeoRSS</option> <option value="csv">CSV</option> <option value="utm">UTM</option> </select> </td> </tr> <tr> <td title="Show or hide the nearby places box"><input type="checkbox" id="nearbyCheckbox" onclick="OptionsChanged();" />Nearby Places</td> <td title="Show or hide the Find box"><input type="checkbox" id="findCheckbox" onclick="OptionsChanged();" />Find Box</td> </tr> <tr> <td title="Display geotagged photos from flickr"><input type="checkbox" id="flickrCheckbox" onclick="OptionsChanged();" /><span style="color: #0063dc;">flick</span><span style="color: #ff0084;">r</span></td> </tr> <tr> <td title="Show or hide everything related to markers"><input type="checkbox" id="markersCheckbox" onclick="OptionsChanged();" />Markers</td> <td title="Show or hide the Links button"><input type="checkbox" id="linksCheckbox" onclick="OptionsChanged();" />Links</td> </tr> <tr> <td colspan="2"><hr /></td> </tr> <tr> <td colspan="2" align="right" title="Close this panel"><form method="get" action="javascript:void(0);" onsubmit="OptionsClose();"><div><input type="submit" class="button" value="Close" /></div></form></td> </tr> </tbody> </table> </div> <script src="//acme.com/resources/leaflet/leaflet.js" type="text/javascript"></script> <script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.utils.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.maps.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.maps.zoom5.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.maps.photoicon.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.cache.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.editinplace.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/acme.keynav.jsm" type="text/javascript"></script> <script src="//acme.com/javascript/json2.jsm" type="text/javascript"></script> <script src="mapper.jsm" type="text/javascript"></script> </body> </html>

CINXE.COM

ACME Mapper 2.2