MM Map Snippet API
Table of Contents
Overview
Longdo Map Snippet เป็น feature ของ Longdo Map ที่จะช่วยสร้างรูปภาพแผนที่เป็นนามสกุลไฟล์ .png โดยท่านสามารถกำหนดค่าต่างๆของแผนที่ได้ดังนี้
- ขนาดความสูงและความกว้างของรูปภาพ
- ตำแหน่งจุดกึ่งกลางของภาพแผนที่โดยระบุเป็นค่า lat และ lon
- ชนิดของแผนที่ (แผนที่โลก หรือ แผนที่ประเทศไทย เป็นต้น)
- โหมดแผนที่ (แผนที่ที่แสดงไอคอนสถานที่, แผนที่แสดงเฉพาะเส้นถนน, แผนที่แสดงเส้นสีจราจร, แผนที่สีเทา เป็นต้น
- ภาษาในการแสดงชื่อสถานที่ต่างๆ บนแผนที่
- ระยะซูมของแผนที่
- ข้อความใน popup ที่ชี้ไปยังจุดกึ่งกลางแผนที่
- รวมถึงตำแหน่งสถานที่/หน่วยงานของท่าน, จุดนัดพบ, เส้นสี, พื้นที่, เส้นทางการเดินทางที่ระบบแนะนำ หรือระบุข้อความลงบนแผนที่ได้
ซึ่งท่านสามารถนำภาพแผนที่ไปแสดงบนเว็บของท่านได้ง่ายๆ เพียงนำ code HTML ไปแปะในเว็บของท่านเท่านั้น ด้วยการใช้ img tag โดยระบุ src attribute ในการบอกถึง source ของรูปภาพเป็น Longdo Map Snippet URL (ในแบบ HTTP GET Method) ของรูปแผนที่ที่ต้องการแสดง โดยมีรูปแบบดังนี้
<img src="http://mmmap15.longdo.com/mmmap/snippet/index.php?parameters">
URL & Parameter usage
URL ของ Longdo Map Snippet คือ
http://mmmap15.longdo.com/mmmap/snippet/index.php
ท่านสามารถทำการส่ง request ผ่านทาง URL request หรือ HTTP Post Method ก็ได้ โดยกำหนดค่า parameter เหล่านี้มากับ request ด้วย
Map Parameters
- width - ระบุตัวเลข เพื่อกำหนดขนาดความกว้างของรูปภาพ กำหนดค่าได้ไม่เกิน 2000 (หน่วยเป็น pixel) (Default: 500)
- height - ระบุตัวเลข เพื่อกำหนดขนา้ดความสูงของรูปภาพ กำหนดค่าได้ไม่เกิน 2000 (หน่วยเป็น pixel) (Default: 400)
- lat - ระบุตัวเลข เพื่อกำหนดค่า latitude เป็นจุดกึ่งกลางของภาพ (*ต้องกำหนด หากไม่ระบุพารามิเตอร์ marker หรือ line หรือ polygon หรือ text หรือ route, แต่หากมีการระบุพารามิเตอร์ดังกล่าว ระบบจะกำหนดตำแหน่งกึ่งกลางให้อัตโนมัติ ถ้าท่านไม่ระบุค่า lat,long)
- long - ระบุตัวเลข เพื่อกำหนดค่า longitude เป็นจุดกึ่งกลางของภาพ (*ต้องกำหนด หากไม่ระบุพารามิเตอร์ marker หรือ line หรือ polygon หรือ text หรือ route, แต่หากมีการระบุพารามิเตอร์ดังกล่าว ระบบจะกำหนดตำแหน่งกึ่งกลางให้อัตโนมัติ ถ้าท่านไม่ระบุค่า lat,long)
- map - กำหนดชนิดของแผนที่ โดยมีค่าที่สามารถกำหนดได้ดังนี้
- ms22 - แผนที่ประเทศไทย (เป็นค่า Default)
- epsg4326 - แผนที่โลก
- epsg3857 - แผนที่โลกที่มี scale ใกล้เคียงความเป็นจริง
- mode - กำหนดโหมดแผนที่ โดยมีค่าที่สามารถกำหนดได้ดังนี้
- icons - แผนที่แสดงไอคอนของสถานที่ต่างๆ (เป็นค่า Default)
- traffic+overlay - แผนที่แสดงเส้นสีจราจร
- gray - แผนที่สีเทา
- political - แผนที่แสดงเฉพาะขอบเขตตำบล อำเภอ จังหวัด
- normal - แผนที่แสดงเฉพาะขอบเขตตำบล อำเภอ จังหวัด และ เส้นถนน
- hydro - แผนที่พื้นฐาน (โล่งๆ)
- osm - แผนที่แบบ OpenStreetMap
- osm_opencycle - แผนที่แบบ OpenStreetMap ที่แสดงภูมิประเทศ (OpenCycle)
- locale - กำหนดภาษาที่แสดงสถานที่ต่างๆ บนแผนที่ โดยมีค่าที่สามารถกำหนดได้ดังนี้
- th - แสดงแผนที่ภาษาไทย (เป็นค่า Default)
- en - แสดงแผนที่ภาษาอังกฤษ
- ja - แสดงแผนที่ภาษาญี่ปุ่น
- zoom - ระบุตัวเลข เพื่อกำหนดระยะซูมแผนที่ (Default: 7, แต่หากมีการระบุพารามิเตอร์ marker หรือ line หรือ polygon หรือ text หรือ route ระบบจะกำหนดระยะซูมที่เหมาะสมให้อัตโนมัติ ถ้าท่านไม่ระบุค่า zoom) โดยมีค่าที่สามารถกำหนดได้ดังนี้
- 1 ถึง 15 - สำหรับแผนที่ประเทศไทย
- 1 ถึง 20 - สำหรับแผนที่โลก
- title - กำหนด title ของ Popup บนแผนที่ (จะไม่แสดงผล หากมีการระบุพารามิเตอร์ pinmark หรือ crossmark)
- detail - กำหนดรายละเอียดที่ต้องการแสดงใน Popup บนแผนที่ (จะไม่แสดงผล หากไม่ระบุ title หรือมีการระบุพารามิเตอร์ pinmark หรือ crossmark)
- pinmark - ระบุ "1" เพื่อกำหนดให้ปักหมุด
ในตำแหน่งกึ่งกลางแผนที่ (Default: 0)
- crossmark - ระบุ "1" เพื่อกำหนดให้แสดงเครื่องหมายบวก ในตำแหน่งกึ่งกลางแผนที่ (Default: 0)
- refresh - ปกติภาพ snippet จะมีการ cache ผลลัพธ์ไว้ ซึ่งหากไม่ต้องการ (เช่นในกรณีแสดงแผนที่สภาพจราจร ที่ต้องเปลี่ยนแปลงตลอดเวลา) ให้ระบุค่าเป็น "1" (Default: 0)
- marker - ระบุพารามิเตอร์ของ Marker เพื่อกำหนดค่าสำหรับการวาดรูปภาพ/ไอคอนบนแผนที่ (ดูเพิ่มเติม)
- line - ระบุพารามิเตอร์ของ Line เพื่อกำหนดค่าสำหรับการวาดเส้นลงบนแผนที่ (ดูเพิ่มเติม)
- polygon - ระบุพารามิเตอร์ของ Polygon เพื่อกำหนดค่าสำหรับการวาดโพลีกอนลงบนแผนที่ (ดูเพิ่มเติม)
- text - ระบุพารามิเตอร์ของ Text เพื่อกำหนดค่าสำหรับการเขียนข้อความลงบนแผนที่ (ดูเพิ่มเติม)
- route - ระบุพารามิเตอร์ของ Route เพื่อกำหนดค่าสำหรับการหาและวาดเส้นทางการเดินทางลงบนแผนที่ (ดูเพิ่มเติม)
- key - ต้องระบุ MM Map API key เมื่อมีการกำหนดพารามิเตอร์ของ Route
http://mmmap15.longdo.com/mmmap/snippet/index.php?width=200&height=300&map=epsg3857&mode=icons&locale=en&marker=position:14.435,100.5&marker=position:14,100.4;icon:http://mmmap15.longdo.com/mmmap/images/icons_big/bank.png&line=position:13.6,100.4|13.84,100.24|14.45,100.74;linewidth:3&polygon=position:13.7,100.5|13.85,100.14|14.435,100.714;linecolor:FF00CD;linewidth:3;fillcolor:red
Marker Parameters
- position - กำหนดจุดพิกัดที่ต้องการแสดงรูปภาพ marker ลงบนแผนที่ โดยใช้เครื่องหมาย "," ในการคั่นค่า latitude และ longitude และหากใช้รูปไอคอนเดียวกันในการแสดงบนแผนที่ให้ใช้เครื่องหมาย "|" (เครื่องหมาย pipe) ในการคั่นพิกัดแต่ละจุด
<latitude_1>,<longitude_1>|<latitude_2>,<longitude_2>|<latitude_3>,<longitude_3>|... เช่น position:13.6,100.4|13.84,100.24|14.45,100.74โดยมีรูปแบบดังนี้ position:
- icon - กำหนด path ของรูปภาพ marker (หาก path รูปที่กำหนดไม่ถูกต้อง ระบบจะแสดงรูป Default ให้เป็น
, offsetX เป็น center และ offsetY เป็น bottom )
<image path URL> เช่น icon:http://mmmap15.longdo.com/mmmap/images/icons_big/bank.pngโดยมีรูปแบบดังนี้ icon:
- offsetX - กำหนดตำแหน่งของภาพที่จะวางบนตำแหน่ง latitude,longitude ที่กำหนด ในด้านแกน X (ซ้าย-ขวา) (ดูเพิ่มเติม)
- offsetY - กำหนดตำแหน่งของภาพที่จะวางบนตำแหน่ง latitude,longitude ที่กำหนด ในด้านแกน Y (บน-ล่าง) (ดูเพิ่มเติม)
- hidden - กำหนดเป็น "true" เพื่อสั่งไม่ให้แสดง marker (ใช้กรณีที่ต้องการกำหนดขอบเขตของภาพแผนที่ และให้ระบบคำนวณหาระยะซูมที่เหมาะสม) (Default: false)
marker=position:13.6,100.4|13.84,100.24|14.45,100.74;icon:http://mmmap15.longdo.com/mmmap/images/icons_big/bank.png;offsetX:center;offsetY:bottom
marker=position:13.6,100.4|13.84,100.24|14.45,100.74;hidden:true;
Line Parameters
- position - กำหนดจุดพิกัดที่ต้องการวาดเส้่น โดยใช้เครื่องหมาย "," ในการคั่นค่า latitude และ longitude และใช้เครื่องหมาย "|" (เครืีองหมาย pipe) ในการคั่นพิกัดแต่ละจุด
<latitude_1>,<longitude_1>|<latitude_2>,<longitude_2>|<latitude_3>,<longitude_3>|...โดยมีรูปแบบดังนี้ position:
เช่น position:13.6,100.4|13.84,100.24|14.45,100.74
- linecolor - กำหนดสีของเส้น (ดูเพิ่มเติม) (Default: black)
- linewidth - กำหนดขนาดของเส้น (หน่วยเป็น pixel) (Default: 1)
line=position:13.6,100.4|13.84,100.24|14.45,100.74;linecolor:FF00CD;linewidth:3
Polygon Parameters
- position - กำหนดจุดพิกัดที่ต้องการวาดโพลีกอน โดยใช้เครื่องหมาย "," ในการคั่นค่า latitude และ longitude และใช้เครื่องหมาย "|" (เครืีองหมาย pipe) ในการคั่นพิกัดแต่ละจุด
<latitude_1>,<longitude_1>|<latitude_2>,<longitude_2>|<latitude_3>,<longitude_3>|... เช่น position:13.6,100.4|13.84,100.24|14.45,100.74โดยมีรูปแบบดังนี้ position:
- linewidth - กำหนดขนาดของเส้นขอบ (หน่วยเป็น pixel) (Default: 1)
- linecolor - กำหนดสีของเส้นขอบ (ดูเพิ่มเติม) (Default: black)
- fillcolor - กำหนดสีพื้น (ดูเพิ่มเติม) (Default: black)
polygon=position:13.6,100.4|13.84,100.24|14.45,100.74;linecolor:FF00CD;linewidth:3;fillcolor:red
Text Parameters
- position - กำหนดจุดพิกัดที่ต้องการแสดงข้อความลงบนแผนที่ โดยใช้เครื่องหมาย "," ในการคั่นค่า latitude และ longitude และหากใช้ข้อความเดียวกันในการแสดงบนแผนที่ให้ใช้เครื่องหมาย "|" (เครื่องหมาย pipe) ในการคั่นพิกัดแต่ละจุด
<latitude_1>,<longitude_1>|<latitude_2>,<longitude_2>|<latitude_3>,<longitude_3>|... เช่น position:13.6,100.4|13.84,100.24|14.45,100.74โดยมีรูปแบบดังนี้ position:
- msg - กำหนดข้อความที่ต้องการแสดงบนแผนที่
- color - กำหนดสีของตัวอักษร (ดูเพิ่มเติม) (Default: black)
- bgcolor - กำหนดสีพื้นของตัวอักษร หากไม่กำหนดจะไม่แสดงสีพื้น (ดูเพิ่มเติม)
- bordercolor - กำหนดสีกรอบของตัวอักษร หากไม่กำหนดจะใช้สีเดียวกับสีพื้นของตัวอักษร (ดูเพิ่มเติม)
- offsetX - กำหนดตำแหน่งของข้อความที่จะวางบนตำแหน่ง latitude,longitude ที่กำหนด ในด้านแกน X (ซ้าย-ขวา) (ดูเพิ่มเติม)
- offsetY - กำหนดตำแหน่งของข้อความที่จะวางบนตำแหน่ง latitude,longitude ที่กำหนด ในด้านแกน Y (บน-ล่าง) (ดูเพิ่มเติม)
text=position:13.6,100.4;msg:show text;color:black;bgcolor:yellow;bordercolor:purple;offsetX:left;offsetY:top
Route Parameters
- path - กำหนดพิกัดของจุดหมายที่ต้องการหาเส้นการเดินทาง โดยใช้สัญลักษณ์ "->" แสดงจุดต้นทาง ไปยังจุดหมายจุดต่อๆไป และ ใช้เครื่องหมาย "|" (เครื่องหมาย pipe) เป็นตัวคั่นแต่ละเส้นทาง ในกรณีที่มีจุดเริ่มต้นแยกจากกัน
โดยมีรูปแบบดังนี้
path:<latitude_from_1>,<longitude_from_1>-><latitude_to_1.1>,<longitude_to_1.1>-><latitude_to_1.2>,<longitude_to_1.2>->...|<latitude_from_2>,<longitude_from_2>-><latitude_to_2.1>,<longitude_to_2.1>-><latitude_to_2.2>,<longitude_to_2.2>->...|...
เช่น หากต้องการ
- หาเส้นทางจากตำแหน่ง 18.15107,97.94312 ไปยัง 16.72039,98.5968 และไปสิ้นสุดที่ 16.75195,100.2887 และ
- หาเส้นทางจากตำแหน่ง 16.86763,101.33789 ไปสิ้นสุดที่ 16.38339,101.12366
สามารถระบุได้เป็น
path:18.15107,97.94312->16.72039,98.5968->16.75195,100.2887|16.86763,101.33789->16.38339,101.12366
- linecolor - กำหนดสีของเส้นทาง (ดูเพิ่มเติม) โดยสามารถกำหนดเส้นสีของแต่ละพาหนะได้ดังนี้
- road - กำหนดสีของเส้นทางที่เดินทางบนถนน (Default: gray)
- air - กำหนดสีของเส้นทางที่เดินทางทางเครื่องบิน (Default: purple)
- rail - กำหนดสีของเส้นทางที่เดินทางทางรถไฟ (Default: brown)
- ferry - กำหนดสีของเส้นทางที่เดินทางทางเรือเฟอร์รี่ (Default: lightblue)
- tollroad - กำหนดสีของเส้นทางที่เดินทางบนทางด่วน (Default: red)
- other - กำหนดสีของเส้นทางอื่นๆ ที่นอกเหนือจากที่กำหนด (Default: black)
โดยใช้สัญลักษณ์ "[" และ "]" ครอบพารามิเตอร์ข้างต้น และ ใช้เครื่องหมาย "|" (เครื่องหมาย pipe) เป็นตัวแบ่งประเภทพาหนะแต่ละตัว และ ใช้เครื่องหมาย ":" เป็นตัวแบ่งระหว่างชื่อพารามิเตอร์และค่าที่กำหนด
มีรูปแบบดังนี้
- linecolor:<color> หรือ
- linecolor:[<type_name_1>:<color>|<type_name_2>:<color>|...]
เช่น
- linecolor:pink (กำหนดสีเส้นของทุกพาหนะเป็นสีชมพู)
- linecolor:[road:purple|ferry:pink|air:lightblue]; (กำหนดสีเส้นของเส้นทางบนถนนเป็นสีม่วง, เรือเฟอร์รี่เป็นสีชมพู, เครื่องบินเป็นสีฟ้าอ่อน, นอกนั้นเป็นสี Default)
- linecolor:[road:purple|ferry:pink|other:gray]; (กำหนดสีเส้นของเส้นทางบนถนนเป็นสีม่วง, เรือเฟอร์รี่เป็นสีชมพู, นอกนั้นเป็นสีเทา)
- linewidth - กำหนดขนาดของเส้นทาง (หน่วยเป็น pixel) (Default: 5) โดยสามารถกำหนดขนาดของเส้นของแต่ละพาหนะได้ดังนี้
- road - กำหนดขนาดของเส้นทางที่เดินทางบนถนน
- air - กำหนดขนาดของเส้นทางที่เดินทางทางเครื่องบิน
- rail - กำหนดขนาดของเส้นทางที่เดินทางทางรถไฟ
- ferry - กำหนดขนาดของเส้นทางที่เดินทางทางเรือเฟอร์รี่
- tollroad - กำหนดขนาดของเส้นทางที่เดินทางบนทางด่วน
- other - กำหนดขนาดของเส้นทางอื่นๆ ที่นอกเหนือจากที่กำหนด
โดยใช้สัญลักษณ์ "[" และ "]" ครอบพารามิเตอร์ข้างต้น และ ใช้เครื่องหมาย "|" (เครื่องหมาย pipe) เป็นตัวแบ่งประเภทพาหนะแต่ละตัว และ ใช้เครื่องหมาย ":" เป็นตัวแบ่งระหว่างชื่อพารามิเตอร์และค่าที่กำหนด
มีรูปแบบดังนี้
- linewidth:<line_width> หรือ
- linewidth:[<type_name_1>:<line_width>|<type_name_2>:<line_width>|...]
เช่น
- linewidth:3 (กำหนดขนาดเส้นของทุกพาหนะเป็น 3 พิกเซล)
- linewidth:[road:3|ferry:2|air:3]; (กำหนดขนาดเส้นของเส้นทางบนถนนเป็น 3 พิกเซล, เรือเฟอร์รี่เป็น 2 พิกเซล, เครื่องบินเป็น 3 พิกเซล, นอกนั้นเป็นขนาด Default)
- linewidth:[road:3|ferry:2|other:3]; (กำหนดขนาดเส้นของเส้นทางบนถนนเป็น 3 พิกเซล, เรือเฟอร์รี่เป็น 2 พิกเซล, นอกนั้นเป็น 3 พิกเซล)
- mode - กำหนดโหมดในการค้นหาเส้นทางการเดินทาง โดยมีค่าที่สามารถกำหนดได้ดังนี้
- t - ค้นหาเส้นทางตามถนนหลัก โดยพยายามหลบรถติด (traffic)
- c - ค้นหาเส้นทางตามถนนหลัก (cost)
- d - ค้นหาเส้นทางลัดเข้าซอยเพื่อให้ได้ระยะทางที่สั้นที่สุด (distance)
- type - ระบุตัวเลข เพื่อกำหนดประเภทพาหนะในการเดินทาง โดยมีค่าที่สามารถกำหนดได้ดังนี้
- 1 - พาหนะที่ใช้การเดินทางบนถนน
- 2 - เครื่องบิน
- 4 - รถไฟ
- 8 - เรือ
- 16 - พาหนะที่ใช้การเดินทางบนทางด่วน
หากต้องการระบุพาหนะหลายประเภท ให้นำค่าของแต่ละประเภทมา OR กัน เช่น - type:1 (ต้องการหาเส้นทางการเดินทางทางถนนเท่านั้น) - type:3 (ต้องการหาเส้นทางการเดินทางทางถนนและเครื่องบินเท่านั้น คือ 1|2 = 3) - type:17 (ต้องการหาเส้นทางการเดินทางทางถนนและทางด่วนเท่านั้น คือ 1|16 = 17) - type:31 (ต้องการหาเส้นทางการเดินทางทุกประเภท คือ 1|2|4|8|16 = 31)
โดยใช้เครื่องหมาย ";" เป็นตัวแบ่งพารามิเตอร์แต่ละตัว และ ใช้เครื่องหมาย ":" เป็นตัวแบ่งระหว่างชื่อพารามิเตอร์และค่าที่กำหนด เช่น
route=path:18.15107,97.94312->16.72039,98.5968->16.75195,100.2887|16.86763,101.33789->16.38339,101.12366;linecolor:[ferry:pink|air:lightblue|rail:brown|other:black];linewidth:[road:3|tollroad:3|other:5];mode:t;type:31
หรือ
route=path:18.15107,97.94312->16.72039,98.5968->16.75195,100.2887|16.86763,101.33789->16.38339,101.12366;linecolor:FF9FEB;linewidth:3;mode:t;type:31
Parameter format
Color
- ระบุรหัสสี ในรูปแบบ "RRGGBB" เช่น FFF (สีขาว), 000 (สีดำ), FFABDE (สีชมพู) เป็นต้น
- ระบุชื่อสีได้ทั้งหมด 12 สี ดังนี้
- red - สีแดง
- black - สีดำ
- lightblue - สีฟ้า
- blue - สีน้ำเงิน
- white - สีขาว
- brown - สีน้ำตาล
- yellow - สีเหลือง
- pink - สีชมพู
- purple - สีม่วง
- orange - สีส้ม
- green - สีเขียว
- gray - สีเทา
<parameter_name>:<color>
เช่น
linecolor:red หรือ linecolor:FF00CC หรือ linecolor:333 (= linecolor:333333) หรือ linecolor:ABC (= linecolor:AABBCC)
OffsetX
- ระบุตัวเลข มีหน่วยเป็น pixel
- -x - หากระบุค่าติดลบ marker หรือ ข้อความ จะเลื่อนจากตำแหน่งที่กำหนดไปทางขวา x พิกเซลนับจากด้านซ้าย
- x - marker หรือ ข้อความ จะเลื่อนจากตำแหน่งที่กำหนดไปทางซ้าย x พิกเซลนับจากด้านซ้าย
- ระบุชื่อตำแหน่งได้ดังนี้
- left - วาง marker หรือ ข้อความ โดยให้ ด้านซ้ายของ marker หรือ ข้อความ ตรงกับตำแหน่งที่กำหนด
- center - วาง marker หรือ ข้อความ โดยให้กึ่งกลางของ marker หรือ ข้อความในแนวนอน ตรงกับตำแหน่งที่กำหนด (เป็นค่า Default)
- right - วาง marker หรือ ข้อความ โดยให้ด้านขวาของ marker หรือ ข้อความ ตรงกับตำแหน่งที่กำหนด
โดยมีรูปแบบดังนี้
offsetX:<offset_x>
เช่น
offsetX:5 หรือ offsetX:left
OffsetY
- ระบุตัวเลข มีหน่วยเป็น pixel
- -x - หากระบุค่าติดลบ marker หรือ ข้อความ จะเลื่อนจากตำแหน่งที่กำหนดลงมา x พิกเซลนับจากด้านบน
- x - หากระบุค่าบวก marker หรือ ข้อความ จะเลื่อนจากตำแหน่งที่กำหนดขึ้นไป x พิกเซลนับจากด้านบน
- ระบุชื่อตำแหน่งได้ดังนี้
- top - วาง marker หรือ ข้อความ โดยให้ด้านบนของ marker หรือ ข้อความ ตรงกับตำแหน่งที่กำหนด
- middle - วาง marker หรือ ข้อความ โดยให้กึ่งกลางของ marker หรือ ข้อความในแนวดิ่ง ตรงกับตำแหน่งที่กำหนด (เป็นค่า Default)
- bottom - วาง marker หรือ ข้อความ โดยให้ด้านล่างของ marker หรือ ข้อความ ตรงกับตำแหน่งที่กำหนด
โดยมีรูปแบบดังนี้
offsetY:<offset_y>
เช่น
offsetY:5 หรือ offsetY:bottom
Demo code (Get Method): http://mapdemo.longdo.com/mmdemo/index-snippet-get.php
Demo code (Post Method): http://mapdemo.longdo.com/mmdemo/index-snippet-post.php [view PHP source]
- 1998 reads