thinknetmaps
v1.1.0-rc2
Published
WebGL interactive maps library
Downloads
11
Readme
THiNKNET Maps
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
:mega: Upcoming Releases
- [ ] ปรับปรุงฟังก์ชัน addLine
- [ ] แก้ไขรูปทรงของ line และ polygon ได้
:pushpin: Release Notes 1.1.0-rc2
- [x] ปรับปรุงการจัดการ Event listener ของ Marker และ Popup ในแผนที่
- [x] ฟังก์ชัน getMarker สำหรับเรียกข้อมูล Marker ที่ id นั้น
- [x] ฟังก์ชัน getAllMarker สำหรับเรียกข้อมูล Marker ทั้งหมด
- [x] ฟังก์ชัน removeMarker สำหรับการลบ Marker บนแผนที่
- [x] ยกเลิกการใช้งาน ฟังก์ชัน addMarkerArray
- [x] ยกเลิกการใช้งาน ฟังก์ชัน addMarkerImageArray
- [x] Syntax autocomplete
- [x] ย้าย option description ของ Marker เข้าไปใน Popup option
- [x] ฟังก์ชัน addPopup สำหรับการเพิ่ม Popup ให้ Marker
- [x] แก้ไขแผนที่ไม่สามารถใช้งานได้ เมื่อเปิดหลายแผนที่ในหน้าเว็บเดียวกัน
- [x] แก้ไขโลโก้ไม่แสดง เมื่อเปิดหลายแผนที่ในหน้าเว็บเดียวกัน
- [x] แก้ไข Popup ไม่แสดงบนแผนที่
- [x] แก้ bug ฟังก์ชัน clearEventScroll ไม่สามารถใช้งานได้
:clipboard: Features
- แสดงแผนที่บนเว็บไซต์
- การกำหนดการแสดงภาษาบนแผนที่
- Map Style
- Scrolling protection
- Marker
- Geometry
- API Document
:inbox_tray: ติดตั้ง 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' />:electric_plug: เริ่มใช้งาน 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
สามารถเปลี่ยน 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
const map = new thinknetmaps.Map({
container: 'map',
app_id: 'YOUR_APP_ID',
api_key: 'YOUR_API_KEY',
protectScroll: true,
});Marker
- addMarker
- addMarkerImage
- addMarker with popup
- addPopup
- setMarker
- removeMarker
- clearMarker
- getMarker
- getAllMarker
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 ลงบนแผนที่
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
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 | - |
map.on('load', function() {
map.addMarkerImage({
lat: 13.72, // require
lng: 100.20, // require
url: 'YOUR IMAGE'
})
})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
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 | - |
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 อย่างเป็นลำดับ
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 อย่างเป็นลำดับ
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]
]
})
}:bulb: 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>