New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

thinknetmaps

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

thinknetmaps

WebGL interactive maps library

latest

Source

npm

Version: 1.1.0-rc2

Version published: 7 years ago

Maintainers: 1

Created: 7 years ago

Source

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

:mega: Upcoming Releases

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

:pushpin: Release Notes 1.1.0-rc2

:clipboard: Features

: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 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}]`)
    }
  })
}

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

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]

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]
    ]
  })
}

: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>

FAQs

What is thinknetmaps?

Is thinknetmaps well maintained?

Package last updated on 24 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

thinknetmaps

THiNKNET Maps

:mega: Upcoming Releases

:pushpin: Release Notes 1.1.0-rc2

:clipboard: Features

:inbox_tray: ติดตั้ง THiNKNET Maps

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

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

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

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

THiNKNET Maps initial options

Map Styles

รายชื่อ Map Style

เปลี่ยน Map Style

ผ่านทาง Initial map

ผ่านทางฟังก์ชั่น setStyle

Protected Scrolling

Marker

map.addMarker(options)

เพิ่ม Marker ลงบนแผนที่

Icon Marker

map.addMarkerImage(options)

Draggable Marker

map.addMarker(options) กับ Popup

เพิ่ม Popup ลงใน Marker

map.addPopup(options)

เพิ่ม Popup ลงใน Marker ผ่านฟังก์ชัน (.addPopup)

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

ตัวอย่าง

map.removeMarker(id) ลบ Marker

map.clearMarker()

map.getMarker(id)

map.getAllMarker()

Geometry

map.addLine(options)

Line style

map.addPolygon(options)

:bulb: Code ตัวอย่าง

Related posts

Axios Maintainer Confirms Social Engineering Attack Behind npm Compromise

Node.js Drops Bug Bounty Rewards After Funding Dries Up

ผ่านทางฟังก์ชั่น `setStyle`