❤
npm
Sign UpSign In

thinknetmaps
TypeScript icon, indicating that this package has built-in type declarations

1.1.0-rc2 • Public • Published

THiNKNET Maps

THiNKNET Maps Logo

thinknetmaps Library สำหรับการใช้งานแผนที่ดิจิตอลบนเว็บไซต์ด้วย Javascript มีฟังก์ชันรองรับการแสดงผล และ Interaction บนแผนที่ พร้อมกับ Map Style ที่มีให้เลือกใช้กว่า 10 แบบ

Official Site : https://maps.thinknet.co.th

For Developers : https://developer-maps.thinknet.co.th สำหรับจัดการ API Key และรับสิทธิ์การเข้าถึง THiNKNET Maps บน Application ของคุณ

ดูตัวอย่างเพิ่มเติมได้ที่: DEMO

📣 Upcoming Releases

  • ปรับปรุงฟังก์ชัน addLine
  • แก้ไขรูปทรงของ line และ polygon ได้

📌 Release Notes 1.1.0-rc2

  • ปรับปรุงการจัดการ Event listener ของ Marker และ Popup ในแผนที่
  • ฟังก์ชัน getMarker สำหรับเรียกข้อมูล Marker ที่ id นั้น
  • ฟังก์ชัน getAllMarker สำหรับเรียกข้อมูล Marker ทั้งหมด
  • ฟังก์ชัน removeMarker สำหรับการลบ Marker บนแผนที่
  • ยกเลิกการใช้งาน ฟังก์ชัน addMarkerArray
  • ยกเลิกการใช้งาน ฟังก์ชัน addMarkerImageArray
  • Syntax autocomplete
  • ย้าย option description ของ Marker เข้าไปใน Popup option
  • ฟังก์ชัน addPopup สำหรับการเพิ่ม Popup ให้ Marker
  • แก้ไขแผนที่ไม่สามารถใช้งานได้ เมื่อเปิดหลายแผนที่ในหน้าเว็บเดียวกัน
  • แก้ไขโลโก้ไม่แสดง เมื่อเปิดหลายแผนที่ในหน้าเว็บเดียวกัน
  • แก้ไข Popup ไม่แสดงบนแผนที่
  • แก้ bug ฟังก์ชัน clearEventScroll ไม่สามารถใช้งานได้

📋 Features

📥 ติดตั้ง THiNKNET Maps

ติดตั้งผ่าน NPM

$ npm install thinknetmaps --save

จากนั้นนำ thinknetmaps เข้าสู่โปรเจค

const thinknetmaps = require('thinknetmaps')
require('node_modules/thinknetmaps/dist/thinknetmaps.css')

หรือดาวน์โหลดจาก THiNKNET Maps Server สำหรับใช้บน HTML

<script src='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.1.0-rc2.min.js'></script>
<link href='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.1.0-rc2.min.css' rel='stylesheet' />

🔌 เริ่มใช้งาน THiNKNET Maps API

เริ่มต้นสร้างแผนที่

สร้าง div สำหรับเป็นพื้นที่ให้ render map ลงบนหน้าเว็บ และก่อนที่จะใช้ THiNKNET Maps คุณต้องทำการสร้าง app_id และ api_key จาก THiNKNET Maps เพื่อนำมาใช้งานกับแผนที่ของคุณ

<html>
  <head>
    <script src='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.1.0-rc2.min.js'></script> 
    <link href='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.1.0-rc2.min.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style="height: 100vh;" />
    <script>
      const map = new thinknetmaps.Map({
        container: 'map', // id ของ div ที่จะให้ map ไป render
        app_id: 'YOUR_APP_ID',
        api_key: 'YOUR_API_KEY',
      })
    </script> 
  </body>
</html>

ชื่อของ container จะต้องตรงกับ ID ของ div ที่ใช้แสดงแผนที่ และคุณก็สามารถใช้ชื่อ container อื่นๆได้เช่นกัน

THiNKNET Maps initial options

Property Description Type Default
container ID ของ container ที่จะใช้ render map string map
app_id Application ID ของคุณ string -
api_key API key ของคุณ string -
center จุดเริ่มต้นของแผนที่ object { lng: 100.49, lat: 13.72 }
zoom ระดับการซูมขณะเริ่มแผนที่ จะต้องอยู่ระหว่าง 1 - 22 integer 9
navigationCtrl แสดงแถบปรับมุมมองของแผนที่ boolean false
protectScroll ป้องกันการเลื่อนโดนแผนที่ boolean false

การเรียกใช้ฟังก์ชันแผนที่ ทุกฟังก์ชันจะต้องเรียกหลังจากที่แผนที่ load เสร็จแล้ว ด้วยการเรียกฟังก์ชันใน map.on('load', function...) ดังนี้

map.on('load', function() {
  ...
})

Map Styles

รายชื่อ Map Style

map style satellite

เปลี่ยน Map Style

สามารถเปลี่ยน Map Style ได้ 2 ทาง คือ

ผ่านทาง Initial map
const map = new thinknetmaps.Map({
  container: 'map', // div's id for render map
  app_id: 'YOUR_APP_ID',
  api_key: 'YOUR_API_KEY',
  style: 'MAP_STYLE'
})
ผ่านทางฟังก์ชั่น setStyle
map.setStyle('satellite')

Protected Scrolling

protected scrolling

const map = new thinknetmaps.Map({
  container: 'map',
  app_id: 'YOUR_APP_ID',
  api_key: 'YOUR_API_KEY',
  protectScroll: true,
});

Marker

map.addMarker(options)

Property Description Type Default
id ระบุ ID ให้แต่ละ marker ( ห้ามซ้ำเด็ดขาด ) string (Random ID)
lat latitude ของ Marker number -
lng longitude ของ Marker number -
offset ระยะห่างของ icon กับพิกัดของ Marker number[] [0, 0]
onClick event ที่จะเกิดขึ้นเมื่อผู้ใช้ click function -
icon เปลี่ยน Icon string -
draggable ทำให้ Marker สามารถลากวางได้ boolean false
onDragEnd event ที่จะเกิดขึ้นเมื่อผู้ใช้ drag เสร็จสิ้น function -
popup แสดง Popup บน Marker object -
เพิ่ม Marker ลงบนแผนที่

simple marker

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    offset: [0, -10],
    onClick: function() {
        alert('รถรับส่ง 6 ล้อ บางบอน')
    }
  })
})
Icon Marker

เพิ่ม Marker ในลักษณะ icon ที่มาจาก THiNKNET Maps

styled marker

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    icon: 'mmg_car_2_orange',
  })
})

map.addMarkerImage(options)

เพิ่ม Marker ที่เป็นรูปภาพ โดยเป็น URL ของรูป

Property Description Type Default
url URL รูปภาพ string -

Image marker

map.on('load', function() {
  map.addMarkerImage({
    lat: 13.72,  // require
    lng: 100.20, // require
    url: 'YOUR IMAGE'
  })
})
Draggable Marker

draggable marker

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.50,
    lng: 100.49,
    draggable: true,
    onClick: function(e) {
      const {lng, lat} = e.lngLat
      alert(`you are at [${lng}, ${lat}]`)
    }
  })
 
  map.addMarker({
    id: 'bangbon1',
    lat: 13.45,
    lng: 100.79,
    draggable: true,
    onDragEnd: function(e) {
      const {lng, lat} = e.lngLat
      alert(`you are at [${lng}, ${lat}]`)
    }
  })
}

map.addMarker(options) กับ Popup

Property Description Type Default
description คำอธิบายเมื่อ Popup แสดงขึ้น string -
action เมื่อ action นี้ถูกเรียก popup จะแสดง มี 2 รูปแบบคือ click และ hover string click
offset ระยะห่างของ Popup กับพิกัดของ Marker number[] [0, 0]
เพิ่ม Popup ลงใน Marker

marker's popup

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    icon: 'mmg_car_2_orange',
    popup: {
      action: 'click',
      description: 'รถ ว. บางบอน 2'
    }
  })
}

map.addPopup(options)

Property Description Type Default
id ID ของ Marker ที่ จะเพิ่ม Popup string -
description คำอธิบายเมื่อ Popup แสดงขึ้น string -
action เมื่อ action นี้ถูกเรียก Popup จะแสดง มี 2 รูปแบบคือ click และ hover string click
offset ระยะห่างของ Popup กับพิกัดของ Marker number[] [0, 0]
เพิ่ม Popup ลงใน Marker ผ่านฟังก์ชัน (.addPopup)
map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    icon: 'mmg_car_2_orange'
  })
 
  map.addPopup({
    id: 'bangbon',
    action: 'click',
    description: 'รถ ว. บางบอน 2'
  })
}

map.setMarker(options) ปรับตำแหน่ง Marker

Property Description Type Default
id ID ของ Marker ที่ต้องการ update string -
lat latitude ของ Marker number -
lng longitude ของ Marker number -
ตัวอย่าง

HTML

<select id="selected-value">
  <option value="100.61,13.66">บางนา</option>
  <option value="100.49,13.65">บางมด</option>
  <option value="100.39,13.66">บางบอน</option>
</select>

Javascript

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lng: 100.61,
    lat: 13.66,
    icon: 'mmg_car_2_orange',
    onClick: function() {
      alert('รถรับส่ง 6 ล้อ บางบอน')
    }
  })
 
  document.getElementById('selected-value').addEventListener('change', function(val) {
    const lngLat = val.target.value.split(',')
    console.log(lngLat)
    map.setMarker({
      id: 'bangbon',
      lng: lngLat[0],
      lat: lngLat[1],
    })
  })
}

map.removeMarker(id) ลบ Marker

Property Description Type Default
id ID ของ Marker ที่ต้องการลบออก string -

Remove Marker

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    offset: [0, -10],
    size: 1.9,
    icon: 'mmg_car_2_orange',
    onClick: () => {
        map.removeMarker('bangbon')
      }
    })
 
  map.addMarker({
    id: 'bangkhae',
    lat: 13.74,
    lng: 100.40,
    icon: 'mmg_car_2_orange',
    onClick: () => {
      map.removeMarker('bangkhae')
    }
  })
 
  map.addMarker({
      id: 'shop',
      lat: 13.7,
      lng: 100.35,
      onClick: () => {
        map.removeMarker('shop')
      }
  });
})

map.clearMarker()

ลบ Marker ทั้งหมดในแผนที่

map.on('load', function() {
  map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    offset: [0, -10],
    size: 1.9,
    icon: 'mmg_car_2_orange',
    onClick: () => {
        map.removeMarker('bangbon')
      }
    })
 
  map.addMarker({
    id: 'bangkhae',
    lat: 13.74,
    lng: 100.40,
    icon: 'mmg_car_2_orange',
    onClick: () => {
      map.removeMarker('bangkhae')
    }
  })
 
  map.addMarker({
      id: 'shop',
      lat: 13.7,
      lng: 100.35,
      onClick: () => {
        map.removeMarker('shop')
      }
  })
 
  map.clearMarker() // remove all marker
})

map.getMarker(id)

เรียกขอ Marker ตาม ID ที่ต้องการ

Property Description Type Default
id ID ของ Marker string -

map.getAllMarker()

เรียกขอ Marker ทั้งหมด

Geometry

map.addLine(options)

วาดเส้นลงแผนที่

Property Description Type Default
id ระบุ ID ให้แต่ละ Line (ห้ามซ้ำเด็ดขาด) string (Random ID)
coordinates Array ของพิกัดแต่ละจุด (เพื่อที่จะวาดเส้นต้องมีมากกว่า 1 จุด) array(number[]) -
style รูปแบบของเส้น object -
Line style
Property Description Type Default
lineWidth ความหนาของเส้น number -
color รหัสสีของเส้น string -

ตัวอย่างการวาดเส้น โดยการเพิ่มตำแหน่ง (lng, lat) ลงใน Array อย่างเป็นลำดับ

draw line

map.on('load', function() {
  map.addLine({
    id: 'phra-pradaeng',
    coordinates: [
      [100.47644313104138, 13.681937298079163],
      [100.48129943712564, 13.675842487108369],
      [100.50780677440406, 13.67191026727113],
      [100.5265613225339, 13.693628535272623],
      [100.54052320248576, 13.69873993645703],
      [100.55559187760178, 13.719054839020814]
    ],
    style: {
      lineWidth: 5,
    }
  })
 
  map.addLine({
    id: 'rama-9',
    coordinates: [
      [100.58888632828723, 13.630326416375254],
      [100.59795464990867, 13.599711115944729],
      [100.61036393209162, 13.589969053546099],
      [100.60415929098656, 13.573731393137876],
      [100.63947801727284, 13.52547579371847]
    ],
    style: {
      color: '#000FF0'
    }
  })
}

map.addPolygon(options)

วาด Polygon ลงบนแผนที่

Property Description Type Default
id ระบุ ID ให้แต่ละ Polygon (ห้ามซ้ำเด็ดขาด) string (Random ID)
coordinates Array ของพิกัดแต่ละจุด (เพื่อที่จะวาด Polygon ต้องมีมากกว่า 2 จุด) array(number[]) -

วาด Polygon โดยการเพิ่มตำแหน่ง (lat, lng) ลงใน Array อย่างเป็นลำดับ

draw polygon

map.on('load', function() {
  map.addPolygon({
    id: 'city-district',
    coordinates:[
      [100.5182085132937, 13.810625871384914],
      [100.49004639314808, 13.757788616172789],
      [100.51436822418873, 13.739137321964094],
      [100.54829077800093, 13.713644819353718],
      [100.58093323543875, 13.787627594325201],
      [100.5521310671059, 13.833621879410586]
    ]
  })
}

💡 Code ตัวอย่าง

<html>
  <head>
    <title>DEMO</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.1.0-rc2.min.js'></script> 
<link href='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.1.0-rc2.min.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style="height: 100vh;"></div>
    <script>
        const map = new thinknetmaps.Map({
            container: 'map',
            app_id: 'YOUR_APP_ID',
            api_key: 'YOUR_API_KEY'
        });
 
        map.on('load', function() {
          map.addMarker({
            id: 'bangbon',
            lat: 13.72,
            lng: 100.49,
            onClick: function() {
                alert('รถรับส่ง 6 ล้อ บางบอน')
            }
          })
 
          map.addPolygon({
            id: 'city-district',
            coordinates:[
              [100.5182085132937, 13.810625871384914],
              [100.49004639314808, 13.757788616172789],
              [100.51436822418873, 13.739137321964094],
              [100.54829077800093, 13.713644819353718],
              [100.58093323543875, 13.787627594325201],
              [100.5521310671059, 13.833621879410586]
            ]
          })
        })
    </script> 
  </body>
</html>

Readme

Keywords

none

Package Sidebar

Install

npm i thinknetmaps

Repository

github.com/thinknetcompany/thinknetmaps

Homepage

github.com/thinknetcompany/thinknetmaps#readme

Weekly Downloads

4

Version

1.1.0-rc2

License

SEE LICENSE IN LICENSE.txt

Unpacked Size

17.9 MB

Total Files

449

Last publish

Collaborators

  • thinknet
Try on RunKit
Report malware