Longdo Map API Tips

แสดงช่องค้นหาในหน้าเว็บ

ดูตัวอย่างการเขียนโค้ดเพื่อแสดงช่องค้นหาได้ที่ https://mapdemo.longdo.com/searchbox/

เปิดตัวเลือกแผนที่ (ถนน, เขตการปกครอง ฯลฯ) ในโหมด Mobile

ในกรณีที่เปิดเว็บจากอุปกรณ์ที่มีหน้าจอเล็ก เช่นโทรศัพท์มือถือ ตัว API จะเลือก default UI ที่เหมาะสมสำหรับ mobile จึงมีการลดเครื่องมือบางส่วนบนหน้าจอไป ทำให้ตัวเลือกแผนที่ (ถนน, เขตการปกครอง ฯลฯ) ไม่ถูกแสดง

อย่างไรก็ตาม เราสามารถบังคับให้แสดงได้ โดยระบุดังนี้

var map = new longdo.Map({
ui: longdo.UiComponent.MobileWithFullLayerSelector,
…
});

วิธีแสดงตำแหน่งปัจจุบัน แบบเสมือนว่ากดปุ่มตำแหน่งปัจจุบัน

map.Ui.Geolocation._geolocateButton.click();

วิธีซ่อนบาง Layer ใน API3 ให้แผนที่แลดูขาวสะอาดเกลี้ยงๆ

บางกรณีเราต้องการแสดงผลแผนที่ที่แลดูสะอาดๆ เกลี้ยงๆ และไม่แสดงบางชั้นข้อมูล เช่น ขอบอาคาร หรือ แม้กระทั่งชื่อจังหวัด อำเภอ ตำบล สามารถสั่งปิดได้โดยใช้คำสั่งดังต่อไปนี้

map.Renderer.setLayoutProperty('building', 'visibility', 'none');
map.Renderer.setLayoutProperty('label_route', 'visibility', 'none');
map.Renderer.setLayoutProperty('label_admin','visibility','none');
map.Renderer.setLayoutProperty('label_natural','visibility','none');

มี layers อะไรบ้าง

map.Renderer.getStyle().layers

นอกจากนี้แนะนำให้ใช้โหมดแผนที่ longdo.Layers.LIGHT ในกรณีที่ต้องการให้แผนที่แลดูขาวสะอาด โล่งๆ

      map = new longdo.Map({
          placeholder: document.getElementById('map'),
          layer: [longdo.Layers.LIGHT],
          zoom: 12,
          lastView: false
        })

API ที่เกี่ยวข้องกับ Traffic

• Traffic speed : https://map.longdo.com/docs/rest#operations-Route-GetTrafficSpeed
• Calculate Route in GeoJSON : https://map.longdo.com/docs/rest#operations-Route-GetCalculateRouteInGeoJSON
• Calculate Route Matrix : https://map.longdo.com/docs/rest#operations-Route-GetCalculateRouteMatrix
• Coverage Area of Route : https://map.longdo.com/docs/rest#operations-Route-GetSpanArea
• Route planner : https://map.longdo.com/docs/rest#operations-Route-GetRoutePlanner

[API2] วิธีแสดงผล Layer ที่มีแค่ถึงบางซูม ให้แสดงผลในซูมที่ลึกลงไปอีกได้ โดยวิธียืดภาพ

บาง Layer ที่เอามาแสดงผลบนแผนที่ เรามีภาพถึงแค่บางซูม เช่น ซูม 11 แต่เราต้องการให้แสดงผล Layer นั้นได้ในซูม 12, 13,… โดยใช้วิธีเอาภาพมายืดก็ได้ กล่าวคือ ภาพจะแตกไม่เป็นอะไร แต่อยากให้แสดงผลได้ มีวิธีทำคือ ใช้ attribute source: {max: <zoom ที่ภาพมีถึง>} ตัวอย่าง เช่น ชั้นข้อมูล Bluemarble จะมีถึงแค่ซูม 11 ถ้าอยากให้แสดงผลมากกว่านั้น ให้เขียนดังนี้

 var map;

  var bluemarble = new longdo.Layer('bluemarble_terrain', { source: { max: 11} });

  onload = () => {
    map = new longdo.Map({
      placeholder: document.getElementById('map'),
      layers: [bluemarble],
      ui: longdo.UiComponent.Full,
      lastView: true
    })
    map.Event.bind('ready', init)
  }

  let init = () => {
    map.Layers.setBase(bluemarble);
  }