acrymble/map&timeline4.html

## map&timeline4.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>London Publishers</title> <script src="http://maps.google.com/maps?file=api&v=3" type="text/javascript"></script> <script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../lib/mxn/mxn.js?(google)"></script> <script type="text/javascript" src="../lib/timeline-1.2.js"></script> <script src="../src/timemap.js" type="text/javascript"></script> <script src="../src/param.js" type="text/javascript"></script> <script src="../src/loaders/xml.js" type="text/javascript"></script> <script src="../src/loaders/kml.js" type="text/javascript"></script> <script type="text/javascript"> var tm; $(function() { tm = TimeMap.init({ mapId: "map", // Id of map div element (required) timelineId: "timeline", // Id of timeline div element (required) options: { eventIconPath: "../images/" }, datasets: [ { title: "London Publishers", theme: "blue", type: "kml", // Data to be loaded in KML - must be a local URL options: { url: "mycollection.kml" // KML file to load } } ], bandInfo: [ { width: "85%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 100 }, { width: "15%", intervalUnit: Timeline.DateTime.DECADE, intervalPixels: 150, showEventText: false, trackHeight: 0.2, trackGap: 0.2 } ] }); }); </script> <link href="examples.css" type="text/css" rel="stylesheet"/> <style> div#timelinecontainer{ height: 310px; } div#mapcontainer{ height: 300px; } </style> </head> <body> <div id="help"> <h1>London Cheap Literature Publishers, 1837-1860</h1> <p>Publishers of penny bloods were concentrated mainly in two areas: around the Strand and around Paternoster Row. Edward Lloyd, the newcomer who became incredibly successful first had his office far East in Shoreditch, on Curtain Road. He quickly moved closer.</p> </div> <div id="timemap"> <div id="timelinecontainer"> <div id="timeline"></div> </div> <div id="mapcontainer"> <div id="map"></div> </div> </div> </body> </html>