No description, website, or topics provided.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci launch v1.0.0 + initialize Dec 19, 2018
.github launch v1.0.0 + initialize Dec 19, 2018
bench update preparation (version 1.1.0-rc0) Jan 21, 2019
build update preparation (version 1.1.0-rc0) Jan 21, 2019
cloudformation launch v1.0.0 + initialize Dec 19, 2018
debug update preparation (version 1.1.0-rc0) Jan 21, 2019
docs update preparation (version 1.1.0-rc0) Jan 21, 2019
example
flow-typed launch v1.0.0 + initialize Dec 19, 2018
release-notes update version to 1.2.0-rc0 Jan 31, 2019
rollup launch v1.0.0 + initialize Dec 19, 2018
src update version to 1.2.0-rc0 Jan 31, 2019
static/image update version to 1.2.0-rc0 Jan 31, 2019
test update preparation (version 1.1.0-rc0) Jan 21, 2019
vendor/dotcom-page-shell update preparation (version 1.1.0-rc0) Jan 21, 2019
wiki update preparation (version 1.1.0-rc0) Jan 21, 2019
.babelrc
.editorconfig launch v1.0.0 + initialize Dec 19, 2018
.eslintrc launch v1.0.0 + initialize Dec 19, 2018
.flowconfig
.gitignore release version 1.1.0-rc1 Jan 22, 2019
.gitmodules launch v1.0.0 + initialize Dec 19, 2018
.stylelintrc launch v1.0.0 + initialize Dec 19, 2018
.topissuesrc launch v1.0.0 + initialize Dec 19, 2018
ARCHITECTURE.md launch v1.0.0 + initialize Dec 19, 2018
CHANGELOG.md update preparation (version 1.1.0-rc0) Jan 21, 2019
CODE-OF-CONDUCT.md launch v1.0.0 + initialize Dec 19, 2018
CONTRIBUTING.md
ICON.md launch v1.0.0 + initialize Dec 19, 2018
LICENSE.txt launch v1.0.0 + initialize Dec 19, 2018
README-CONTRIBUTOR.md launch v1.0.0 + initialize Dec 19, 2018
README.md update version to 1.2.0-rc0 Jan 31, 2019
README_ENG.md update version to 1.2.0-rc0 Jan 31, 2019
RFC_TEMPLATE.md launch v1.0.0 + initialize Dec 19, 2018
batfish.config.js update preparation (version 1.1.0-rc0) Jan 21, 2019
jest.config.js launch v1.0.0 + initialize Dec 19, 2018
package.json update version to 1.2.0-rc0 Jan 31, 2019
postcss.config.js launch v1.0.0 + initialize Dec 19, 2018
rollup.config.js launch v1.0.0 + initialize Dec 19, 2018
thinknetmaps.d.ts update version to 1.2.0-rc0 Jan 31, 2019

README.md

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>