<?
  //$mmmap_server = "mmmap19.longdo.com";
  $mmmap_server = $_REQUEST["dev"] && $_REQUEST["dev"] == 1 ? "mmmap19.longdo.com" : "mmmap15.longdo.com";
  $mode_hd = $_REQUEST["HD"] && ($_REQUEST["HD"] == 1 || $_REQUEST["HD"] == 2) ? "&HD=".$_REQUEST["HD"] : "";
  $mode_refresh = $_REQUEST["refresh"] && $_REQUEST["refresh"] == 1 ? "&refresh=1" : "";
  $param = $mode_hd.$mode_refresh;
  
  $default_pin_url = "http://$mmmap_server/mmmap/images/pin.png";
  
  if($mode_hd) {
    $default_pin_url = "http://$mmmap_server/mmmap/images/pin-2x.png";
  }
  
  //if(!$mode_hd && $_REQUEST["HD"] != 2) $mmmap_server = "mmmap15.longdo.com";
  
  $url = array(
    "Show POI (1)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&ooi=A10000001",
    "Show POI (2)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&ooi=A10000001&pinmark",
    "Show POI (3)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&ooi=A10000001&crossmark",
    "Show POI (4)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&ooi=G00000193",
    "Show POI (5)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&ooi=G00000107",
    "Traffic Map" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&zoom=15&mode=gray%2Boverlay&lat=13.729817638162533&long=100.53859232456692&refresh=1",
    //"Set position & Calculate appropriate zoom" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&marker=position:14.5,100.2|13.2,100|13.5,100.2;hidden:true",
    "Set position & Calculate appropriate zoom (Bounding box)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&bbox=14.5,100.2|13.2,100|13.5,100.2",
    "Default & custom markers" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&marker=position:14.5,100.2|13.2,100;icon:http://$mmmap_server/mmmap/images/icons_big/bank.png&marker=position:13.5,100.2",
    "Draw lines" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&line=position:13,100|13.8,100.2|14.5,100.4;linecolor:red;linewidth:5&line=position:13.6,100.4|13.84,100.24|14.45,100.74;linecolor:FF83CD",
    "Draw line and markers" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&line=position:13.6,100.4|13.84,100.24|14.45,100.74;linecolor:FF83CD;linewidth:7&marker=position:13.6,100.4|13.84,100.24|14.45,100.74;offsetX:center;offsetY:bottom",
    "Draw polygon and markers" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&polygon=position:13.6,100.4|13.84,100.24|14.45,100.74;linecolor:FF83CD;linewidth:7;fillcolor:lightblue&marker=position:13.6,100.4|13.84,100.24|14.45,100.74;offsetX:center;offsetY:bottom",
    "Draw polygon and markers (set markers' offset)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&polygon=position:13.6,100.4|13.84,100.24|14.45,100.74;linecolor:FF83CD;linewidth:7;fillcolor:lightblue&marker=icon:$default_pin_url;position:13.6,100.4|13.84,100.24|14.45,100.74;offsetX:left;offsetY:5",
    "Texts" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&mode=gray&text=position:13.6,100.4|13.84,100.24|14.45,100.74;msg:134;color:red&text=position:13.5,100.24;msg:Hello world;color:red",
    "Markers and texts (set texts' offset, color, background color, and border color)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&text=position:13.6,100.4|13.84,100.24|13.84,100.24;msg:134;offsetX:left;offsetY:top;bordercolor:black;bgcolor:yellow;color:red;border:1&text=position:14.45,100.74;msg:33;bordercolor:black;bgcolor:white;color:red;offsetX:left;offsetY:top&marker=position:13.6,100.4|13.84,100.24|14.45,100.74;offsetY:bottom",
    "Get route, texts and default markers" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&key=7a19bf7e66f74a0b39843f76eaf11371&route=path:18.15107,97.94312->16.72039,98.5968->16.75195,100.2887|16.86763,101.33789->16.38339,101.12366;linecolor:[road:red|other:black];linewidth:[road:5];mode:t;type:31&marker=position:18.15107,97.94312|16.72039,98.5968|16.75195,100.2887|16.86763,101.33789|16.38339,101.12366;offsetX:center;offsetY:bottom&text=position:18.15107,97.94312|16.86763,101.33789;msg:From here;bgcolor:white;bordercolor:red;offsetY:top;offsetX:left&text=position:16.72039,98.5968|16.38339,101.12366;msg:to here;bgcolor:white;bordercolor:red;offsetY:top&text=position:16.75195,100.2887;msg:to here (2);bgcolor:white;bordercolor:red;offsetY:top",
    "Get route and custom markers (1)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&key=7a19bf7e66f74a0b39843f76eaf11371&route=path:18.15107,97.94312->16.72039,98.5968->16.75195,100.2887|16.86763,101.33789->16.38339,101.12366;linecolor:[road:red|other:black];linewidth:[road:5];mode:t;type:31&marker=icon:http://$mmmap_server/mmroute/image/dest0.png;position:18.15107,97.94312|16.86763,101.33789;offsetX:left;offsetY:bottom&marker=icon:http://$mmmap_server/mmroute/image/dest1.png;position:16.72039,98.5968|16.38339,101.12366;offsetX:left;offsetY:bottom&marker=icon:http://$mmmap_server/mmroute/image/dest2.png;position:16.75195,100.2887;offsetX:left;offsetY:bottom",
    "Get route and custom markers (2)" => "http://$mmmap_server/mmmap/snippet/?map=epsg3857&locale=th&height=300&width=500&key=7a19bf7e66f74a0b39843f76eaf11371&route=path:13.73272,100.5661->9.77132,100.02365;linecolor:[road:purple|ferry:pink|air:FF83CD|tollroad:red|rail:brown];linewidth:[road:3|tollroad:3|other:5];mode:t;type:31&marker=icon:https://map.longdo.com/mmmap/images/snippet/pin_style_7.png;position:13.73272,100.5661;offsetX:center;offsetY:bottom&marker=icon:https://map.longdo.com/mmmap/images/snippet/pin_style_11.png;position:9.77132,100.02365;offsetX:center;offsetY:bottom"
  );
?>

<html>
<head>
<title>Longdo Map Demo Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
  function showActualSize(ahref, id) {
    var img = document.getElementById(id);
    if(img.style.height != 'auto') {
      img.style.height = "auto";
      img.style.width = "auto";
      ahref.innerHTML = "ดูภาพแสดง HD";
    } else {
      img.style.height = "300px";
      img.style.width = "500px";
      ahref.innerHTML = "ดูขนาดจริง";
    }
  }
</script>
</head>

<body>

<h1 style="margin-bottom:35px;">Longdo Map Snippet API <span style="font-size:20px"><a href="http://www.mm.co.th/mmmap/api/reference/mapsnippet" target="_blank">(ดูรายละเอียดเพิ่มเติม)</a></span></h1>

<?
  $i = 0;
  foreach($url AS $title => $request_url) {
    $i++;
    $request_url .= $param;
    print '
<h2 style="margin-top:20px; margin-bottom:3px; float: left;">'.$title.'</h1>
'.($mode_hd ? '<div style="color: darkred; cursor:pointer; float: left; margin:20px 0 3px 20px;" id="preview-href-'.$i.'" onclick="showActualSize(this, \'preview-img-'.$i.'\')">ดูขนาดจริง</div>' : '').'
<div style="clear: both;"></div>
<img id="preview-img-'.$i.'" style="float:left; height:300px; width:500px;" src="'.$request_url.'">
<div style="border:1px solid green; margin-top:0px; padding:10px; font-size:15px; white-space: normal; float:left; height:278px; _height:300px; width:400px; word-wrap:break-word; overflow: auto;">
&lt;img src="'.$request_url.'"&gt;
</div> 
<div style="clear:both"></div>
<br>';
  }
?>

</body>
</html>