Skip to content

thinknetcompany/thinknetmaps

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
.circleci
.circleci
 
 
.github
.github
 
 
bench
bench
 
 
build
build
 
 
cloudformation
cloudformation
 
 
debug
debug
 
 
docs
docs
 
 
example
example
 
 
flow-typed
flow-typed
 
 
release-notes
release-notes
 
 
rollup
rollup
 
 
src
src
 
 
static/image
static/image
 
 
test
test
 
 
vendor/dotcom-page-shell
vendor/dotcom-page-shell
 
 
wiki
wiki
 
 
.babelrc
.babelrc
 
 
.editorconfig
.editorconfig
 
 
.eslintrc
.eslintrc
 
 
.flowconfig
.flowconfig
 
 
.gitignore
.gitignore
 
 
.gitmodules
.gitmodules
 
 
.stylelintrc
.stylelintrc
 
 
.topissuesrc
.topissuesrc
 
 
ARCHITECTURE.md
ARCHITECTURE.md
 
 
CHANGELOG.md
CHANGELOG.md
 
 
CODE-OF-CONDUCT.md
CODE-OF-CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
ICON.md
ICON.md
 
 
LICENSE.txt
LICENSE.txt
 
 
README-CONTRIBUTOR.md
README-CONTRIBUTOR.md
 
 
README.md
README.md
 
 
README_ENG.md
README_ENG.md
 
 
RFC_TEMPLATE.md
RFC_TEMPLATE.md
 
 
batfish.config.js
batfish.config.js
 
 
jest.config.js
jest.config.js
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
rollup.config.js
rollup.config.js
 
 
thinknetmaps.d.ts
thinknetmaps.d.ts
 
 

Repository files navigation

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.2.0-rc0

  • ปรับปรุงการจัดการ 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.2.0-rc0.min.js'></script>
<link href='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.2.0-rc0.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.2.0-rc0.min.js'></script>
    <link href='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.2.0-rc0.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,object false
protectScroll ป้องกันการเลื่อนโดนแผนที่ boolean false

**** หมายเหตุ navigationCtrl สามารถปรับแต่งเพิ่มเติมได้

การเรียกใช้ฟังก์ชันแผนที่ ทุกฟังก์ชันจะต้องเรียกหลังจากที่แผนที่ 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]
    ]
  })
}

Navigation

หากต้องการปรับแต่ง navigationCtrl สามารถใช้ในรูปแบบ ของ object ได้ดังนี้

Property Description Type Default
showCompass ค่าที่ใช้ควบคุมการแสดงเข็มทิศ boolean true
showZoom ค่าที่ใช้ควบคุมการแสดงการย่อขยาย boolean true
position ค่าที่กำหนดตำแหน่งของ navigation มี 4 ตำแหน่ง top-right ,top-left ,bottom-left ,bottom-right string 'top-right'

show compass

ปิดการใช้งานของ compass

showcompass false

const map = new thinknetmaps.Map({
  container: 'map', // div's id for render map
  app_id: 'YOUR_APP_ID',
  api_key: 'YOUR_API_KEY',
  navigationCtrl: {
    showCompass: false
  }
})

show zoom

ปิดการใช้งานของ zoom

showzoom false

const map = new thinknetmaps.Map({
  container: 'map', // div's id for render map
  app_id: 'YOUR_APP_ID',
  api_key: 'YOUR_API_KEY',
  navigationCtrl: {
    showZoom: false
  }
})

position

สร้างปรับแต่งตำแหน่งของ navigation

โดยสามารถจัดตำแหน่งได้ 4 ค่า top-right ( default ) ,top-left ,bottom-left ,bottom-right

position top left

const map = new thinknetmaps.Map({
  container: 'map', // div's id for render map
  app_id: 'YOUR_APP_ID',
  api_key: 'YOUR_API_KEY',
  navigationCtrl: {
    position: 'top-left'
  }
})

💡 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.2.0-rc0.min.js'></script>
<link href='https://api-maps.thinknet.co.th/libs/thinknetmaps.1.2.0-rc0.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>

About

No description, website, or topics provided.

Resources

Readme

License

View license

Code of conduct

Code of conduct
Activity
Custom properties

Stars

7 stars

Watchers

8 watching

Forks

0 forks
Report repository

Releases

6 tags

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages