Mapmagic-gl is a Javascript library that simplifies your life.
Visit our official website at https://www.mapmagic.co.th
$ npm install mapmagic-gl --save
Import css file to your project
import ' node_modules/mapmagic-gl/dist/mapmagic-gl.css ' ;
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 simple marker to map
map . addMarker ( {
id : ' bangbon ' ,
lat : 13 . 72 ,
lng : 100 . 49 ,
onClick : ( ) => {
alert ( ' รถรับส่ง 6 ล้อ บางบอน ' )
}
} )
Change marker's style such as icon
map . addMarker ( {
id : ' bangbon ' ,
lat : 13 . 72 ,
lng : 100 . 49 ,
icon : ' mmg_car_2_orange ' ,
} )
Use image instead of default icon
map . addMarkerImage ( {
lat : 13 . 72 ,
lng : 100 . 20 ,
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 '
} )
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 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. 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 } ] ` )
}
} )
< 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 ] ,
} )
} )
