mapmagic-gl

v1.2.5-rc.1

Published

3 years ago

WebGL interactive maps library

Downloads

0High
0Medium
0Low

thinknet

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

:mega: Upcoming Releases

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

:pushpin: Release Notes 1.2.5-rc.1

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

:clipboard: Features

:inbox_tray: ติดตั้ง 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' />

:electric_plug: เริ่มใช้งาน 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)

เพิ่ม 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

เพิ่ม 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) วาดเส้นลงแผนที่

Line style

ตัวอย่างการวาดเส้น โดยการเพิ่มตำแหน่ง (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

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