another-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 "appid" and "apikey" 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],
              })
            })