<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="OpenStreetMap" 
title_url="http://convivial-web.net/"
description="OpenStreetMap(OSM:Open Street Map) on Google Maps"
author="Hirotoshi Maeda"
author_email="hir.maeda@gmail.com"
screenshot="http://convivial-web.com/blog/images/mapplet-osm-1.jpg"
thumbnail="http://img.skitch.com/20090307-qy8q1qhktrbqieu9p34nqrd8ha.jpg"
author_link="http://convivial-web.net/blog/"
height="50">
  <Require feature="sharedmap" />
  <Require feature="analytics" />
</ModulePrefs>
<Content type="html"><![CDATA[


<style>
h3 {
  font-size:90%;
  margin:2px 0px 4px 0px;
  padding:0px;
  color:#222;
}
ul {
  margin:0px;
  padding:0px;
  margin-left:10px;
  padding-left:10px;
}
</style>
<p>
<form id="data" style="margin:0;padding:0;">
<label style="font-weight:bold;">
<input id="display" type="checkbox" onclick="draw();" checked="true" >display
</label><br />

<div style="padding:8px; border:1px solid #ccc;">
<h3>Map Type</h3>
<ul> 
  <li><label><input id="maptype-mapnlk" type="radio" name="maptype" value="Mapnlk" checked="checked" onclick="draw();" >Mapnlk</label></li>
  <li><label><input id="maptype-osmarender" type="radio" name="maptype" value="Osmarender" onclick="draw()" >Osmarender</label></li>
  <li><label><input id="maptype-cyclemap" type="radio" name="maptype" value="CycleMap" onclick="draw()" >CycleMap</label></li>
</ul>

<h3 style="margin-top:6px;">Opacity</h3>
<input id="opacity" type="text" size="4" onchange="draw()" value="100" >
<input type="button" value="up" onclick="co(1)" >
<input type="button" value="down" onclick="co(-1)" >
</div>
<a target="_blank" href="http://osm.clapps.net/">View Large Map(Beta)</a>
</form>
</p>

<p style="font-size:small;">Data by <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>
</p>
<script>

var map = new GMap2();
var layer = null;
draw();

function draw() {
  var display = document.getElementById('display').checked;
  var opacity = parseFloat( document.getElementById('opacity').value ) / 100;

  if ( layer != null ) {
        map.removeOverlay(layer);
  }
  if ( display ) {
    var url =  'http://a.tile.openstreetmap.org/{Z}/{X}/{Y}.png';
    if ( $('maptype-mapnlk').checked ) {
        url = 'http://a.tile.openstreetmap.org/{Z}/{X}/{Y}.png';
    } else if ( $('maptype-osmarender').checked ) {
        url = 'http://a.tah.openstreetmap.org/Tiles/tile/{Z}/{X}/{Y}.png';
    } else if ( $('maptype-cyclemap').checked ) {
        url = 'http://a.andy.sandbox.cloudmade.com/tiles/cycle/{Z}/{X}/{Y}.png';
    }

    layer = new GTileLayerOverlay(
      new GTileLayer(null, null, null, {
        tileUrlTemplate: url,
        isPng:true,
        opacity:opacity
      })
    );
    map.addOverlay(layer);
  }
}

function $(id) {
    return document.getElementById(id);
}

function co(v) {
  var d = document.getElementById('opacity').value;
  d = parseInt(d);
  d += v;
  if ( d > 100 ) { d = 100 ; }
  if ( d < 0 ) { d = 0 ; }
  document.getElementById('opacity').value = d;
  draw();
}


_IG_Analytics("UA-378291-4","/mapplet/osm");

</script>
]]></Content>
</Module>

