Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
bench
build
cloudformation
debug
dist
docs
example
flow-typed
release-notes
rollup
src
static/image
test
vendor/dotcom-page-shell
wiki
.editorconfig
.eslintrc
.flowconfig
.gitignore
.stylelintrc
.topissuesrc
ARCHITECTURE.md
CHANGELOG.md
CODE-OF-CONDUCT.md
CONTRIBUTING.md
ICON.md
LICENSE.txt
README-CONTRIBUTOR.md
README.md
README_ENG.md
RFC_TEMPLATE.md
_config.yml
batfish.config.js
circle.yml
package.json
postcss.config.js
rollup.config.js
yarn.lock

README.md

MapMagic GL

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

Official Site : https://www.mapmagic.co.th

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

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

📣 Upcoming Releases

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

📌 Release Notes 1.2.5-rc.1

  • แก้ให้ overlay แสดงเมื่อมีการ scroll
  • แก้ไข logger ใช้งานไม่ได้

📋 Features

📥 ติดตั้ง MapMagic GL

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

ติดตั่ง dependencies

$ npm install mapmagic-gl --save

จากนั้น import mapmagic-gl เข้าสู่โปรเจค

const MapmagicGL = require('mapmagic-gl')
require('node_modules/mapmagic-gl/dist/mapmagic-gl.css')

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

<script src='https://libs.mapmagic.co.th/mapmagic-gl/1.2.5-rc.1/js/mapmagic-gl.js'></script>
<link href='https://libs.mapmagic.co.th/mapmagic-gl/1.2.5-rc.1/css/mapmagic-gl.css' rel='stylesheet' />

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

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

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

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

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

MapMagic 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 style

รายชื่อ Map Style

map style satellite

เปลี่ยน Map Style

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

ผ่านทาง Initial map
const map = new mapmagic.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 mapmagic.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

styled marker

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

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.addMarkerImage(options) เพิ่ม Marker ที่เป็นรูปภาพ

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

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://libs.mapmagic.co.th/mapmagic-gl/1.2.5-rc.1/js/mapmagic-gl.js'></script>
    <link href='https://libs.mapmagic.co.th/mapmagic-gl/1.2.5-rc.1/css/mapmagic-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style="height: 100vh;"></div>
    <script>
        const map = new mapmagic.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>
You can’t perform that action at this time.