วิธีใช้ React ร่วมกับ Map API สร้างแผนที่ออนไลน์อย่างง่าย

React เป็น JavaScript Framework อีกหนึ่งตัวที่โด่งดัง และใช้กันอย่างแพร่หลาย โดยในบทความนี้ จะอธิบายถึงวิธีการที่ใช้ React ร่วมกับแผนที่ออนไลน์อย่าง Longdo Map API สำหรับการสร้างเว็บไซต์ที่ต้องมีส่วนประกอบของแผนที่ เหมือนกับที่เราสามารถ ใช้ Longdo Map API ร่วมกับ Vue.js ได้นั่นเอง

ดูฉบับเต็มได้ที่ Longdo Map’s Github

วิธีการใช้ มีด้วยกัน 3 ขั้นตอน ดังนี้

1. สมัครคีย์ Longdo Map API
2. ดาวน์โหลดไฟล์ LongdoMap.js
3. เรียกใช้ Map API ใน src/App.js

1. สมัครคีย์ Longdo Map API

อันดับแรก นักพัฒนาต้องมี KEY API สำหรับเรียก API ก่อน สมัครฟรีได้ที่ Longdo Map API key.
ท่านจะได้คีย์ยาวๆ มา เช่น

5e3612dcbfa88a77bf9cc67xxxxxxxxx

2. ดาวน์โหลดไฟล์ LongdoMap.js

นักพัฒนาต้อง copy ไฟล์ LongdoMap.js ไปวางยัง folder ที่ต้องการ

ในที่นี้ผมวางไฟล์ไว้ที่ ./src/longdo-map/LongdoMap ครับ

3. เรียกใช้ Map API ใน src/App.js

นักพัฒนาสามารถ copy โค้ดชุดด้านล่างนี้ ไปใช้ได้เลย (อย่าลืมเปลี่ยน key api)

import React, { Component } from 'react';
import './App.css';
import { longdo, map, LongdoMap } from './longdo-map/LongdoMap';
//replace a LongdoMap.js file

class App extends Component {

  initMap(){
    map.Layers.setBase(longdo.Layers.GRAY);
  }

  render() {
    const mapKey = '5e3612dcbfa88a77bf9cc67xxxxxxxxx'
    return (
      <div className="App">
        <LongdoMap id="longdo-map" mapKey={mapKey} callback={this.initMap} />
      </div>
    );
  }
}

export default App;

• id (required) -> HTML id ที่ใช้แสดงแผนที่
• mapKey(required) -> Longdo Map Key API ที่สมัคร
• callback -> Callback function after a map is initialized, use this for map customiztion

 ผลลัพธ์

Longdo Map Javascript API Reference

ท่านสามารถใช้คำสั่ง การปักหมุด (Marker) , การวาดรูปทรง (Geometry) , การค้นหาเส้นทาง (Routing) ได้จากคู่มือ https://map.longdo.com/docs

สรุป

จากที่กล่าวมาทั้งหมดข้างต้น การพัฒนาทางเทคนิคโดยใช้ JavaScript API ร่วมกับ React ที่ไม่ยากนัก แต่ผลลัพธ์และการแสดงผลที่ได้สามารถนำไปประยุกต์ต่อได้อีกมากมาย
หากท่านใดสนใจและมีโจทย์ที่ต้องใช้แผนที่ร่วมกับ Web หรือ Mobile Application เราแนะนำให้ศึกษาละเอียดๆ ได้ที่ map.longdo.com/products ครบถ้วน ทุกกระบวนท่า : )

Longdo Map เราเป็นแผนที่ออนไลน์คนไทย ที่มีความตั้งใจ อยากให้ธุรกิจ/หน่วยงานต่างๆ ของประเทศไทย ได้ใช้เทคโนโลยีภูมิสารสนเทศ (GIS) เพื่อเสริมความแข็งแกร่ง แข่งขันกับต่างชาติได้ ด้วยต้นทุนที่ไม่สูงเท่าแผนที่เจ้าอื่นในตลาด

ทั้งนี้ นักพัฒนาสามารถสมัครคีย์ฟรีได้ถึง 100,000 transactions/เดือน ซึ่งเพียงพอต่อการใช้ได้ระดับนึงเลยครับ