another-mapmagic-gl v0.3.28

Mapmagic GL

Mapmagic-gl is a Javascript library that simplifies your life.

Visit our official website at https://www.mapmagic.co.th

Features

• Responsive
• Mobile Friendly
• Filter markers by label
• Display map on website
• Display marker
• Customizable marker
• Image marker
• Display popup on marker
• Draw line on map
• Draw polygon on map
• Create a draggable point and get location (lat,lng)

Installing

$ npm install mapmagic-gl --save

Basic Usage

Initial map

Import css file to your project

import 'node_modules/mapmagic-gl/dist/mapmagic-gl.css';  
// or 
// <link href='node_modules/mapmagic-gl/dist/mapmagic-gl.css' rel='stylesheet' />

Import Mapmagic GL script bundle into the project and then you need to get "app_id" and "api_key" for using mapmagic style at Mapmagic developer console

const MapmagicGL = require('mapmagic-gl')

...

const map = new MapmagicGL.Map({
    container: 'map',
    app_id: '<your app id>',
    api_key: '<your api key>',
})

Important! to use each function below, you have to call it after map loaded

map.on('load', function() {
      map.addMarker({
        id: 'bangbon',
        lat: 13.72,
        lng: 100.49,
        onClick: () => {
            alert('รถรับส่ง 6 ล้อ บางบอน')
        }
      })
    })

Add Marker

Add simple marker to map

map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    onClick: () => {
        alert('รถรับส่ง 6 ล้อ บางบอน')
    }
})

Custom Marker

Change marker's style such as icon

map.addMarker({
      id: 'bangbon',
      lat: 13.72,
      lng: 100.49,
      icon: 'mmg_car_2_orange',
  })

Add image marker

Use image instead of default icon

map.addMarkerImage({
        lat: 13.72,  // require
        lng: 100.20, // require
        url: 'https://vignette.wikia.nocookie.net/line/images/0/00/Moon-blow-kiss.png/revision/latest?cb=20151211000627'
      })

Add popup to marker

To add marker popup you need to reference popup id to marker id

map.addMarker({
    id: 'bangbon',
    lat: 13.72,
    lng: 100.49,
    icon: 'mmg_car_2_orange',
})

map.addPopup({
    id: 'bangbon',
    action: 'click',
    description: 'รถ ว. บางบอน 2'
})

Add line

Draw line by add an array of coordinates respectively

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

Draw polygon

Draw polygon by add an array of coordinates respectively

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

Add draggable marker

Add draggable marker. onClick and onDragEnd event are enabled to use

map.addMarker({
  id: 'bangbon',
  lat: 13.50,
  lng: 100.49,
  draggable: true,
  onClick: (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: (e) => {
    const {lng, lat} = e.lngLat
    alert(`you are at [${lng}, ${lat}]`)
  }
})

Relocate marker

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

...

map.addMarker({
    id: 'bangbon',
    lng: 100.61,
    lat: 13.66,
    icon: 'mmg_car_2_orange',
    onClick: () => {
        alert('รถรับส่ง 6 ล้อ บางบอน')
    }
})

document.getElementById('selected-value').addEventListener('change', (val) => {
              const lngLat = val.target.value.split(',')
              console.log(lngLat)
              map.setMarker({
                id: 'bangbon',
                lng: lngLat[0],
                lat: lngLat[1],
              })
            })