로그인
: 한국어
Language

X MapManager메인 Options

X MapManager메인 설정 옵션

Name Type Default(value) Description
height String '80%'
minHeight String '300px'
maxHeight String '100VH'
width String '90%'
minWidth String '300px'
maxWidth String '100VW'
maxZoom Integer 20
minZoom Integer 1
IsLocationGEO Boolean false
LocationLAT Float 0
LocationLNG Float 0
IsShowCoord Boolean true
IsZoomFixed Boolean false
IsShowFit Boolean true Marker Data reference Position
ProviderName String OpenLayers OpenLayers, Google, Kakao, Naver
ProviderOption:{} layers:[] layerName String
layerType String TileLayer 'TileLayer', 'VectorLayer', 'VectorImageLayer'
sourceType String OSM 'OSM', 'XYZ', 'Vector','Stamen','TileJSON'
sourceFormat String N/A 'GeoJSON', 'MVT'
sourceOption tileSize Integer N/A [TileJSON] - 512
crossOrigin String N/A [TileJSON] - 'anonymous'
featuresGeoKEY key String N/A properties 'Name' of GeoJSON
input String N/A properties 'Name1,Name2,Name3...' of GeoJSON
callback String N/A properties 'Name1,Name2,Name3...' of GeoJSON
callBackGeoKEY function N/A function(Name1, Name2, Name3){ }
sourceStyle Default fill {} N/A { color:'rgba(255, 255, 255, 0.0)' }
stroke {} N/A { color:'#319FD3', width: 1, lineDash: [0] }
text {} N/A { font:'12px Calibri,sans-serif', fill:{ color: '#000' }, stroke:{ color: '#ffffff', width: 2 } }
Hover IsUse Boolean N/A
fill {} N/A { color:'rgba(255, 99, 71, 0.0)' }
stroke {} N/A { color:'#ff6347', width: 3, lineDash: [2,3], lineDashOffset: 6 }
text {} N/A { font:'12px Calibri,sans-serif', fill:{ color: '#000' }, stroke:{ color: '#007bff', width: 2 } }
attribution String
opacity Integer
visible Boolean
zIndex Integer
DefaultMarker:{} markerIcon String 'marker08' Icon URLmarker01marker02marker03marker04marker05marker06marker07marker08marker09marker10marker11marker12
IsPopupTitle Boolean
IsShowMarkerNo Boolean
TextPosition String 'top' 'top', 'middle', 'bottom'
ClusterMarker:{} IsCluster Boolean true
MaxDistance Integer 150
MinDistance Integer 10
markerIcon String N/A Icon URLmarker01marker02marker03marker04marker05marker06marker07marker08marker09marker10marker11marker12
Compensation IsLabelShow Boolean true
LabelStyle Default fill {} {} { color: 'rgba(255, 255, 255, 0.0)'}
stroke {} {} { color: 'rgba(255, 255, 255, 0.0)', width: 1, lineDash: [0] }
text {} {} { font : 'italic small-caps bold 13px/1.2 Arial' }
textFill {} {} { color: '#252B30c4' }
textStroke {} {} { color: '#eaeaeac4', width: 8 }
Hover IsUse Boolean false
fill {} {} { color: 'rgba(255, 255, 255, 0.0)' }
stroke {} {} { color: 'rgba(255, 255, 255, 0.0)', width: 1, lineDash: [0] }
text {} {} { font : 'italic small-caps bold 13px/1.2 Arial' }
textFill {} {} { color: '#252B30c4' }
textStroke {} {} { color: '#eaeaeac4', width: 8 }
LabelData LabelText String Label Text
CompLAT Long
CompLNG Long
MaxResolution Integer
font String 'italic small-caps bold 3px/1.2 Arial'
MapZoomLevel:{} LevelDefault Integer 8
LevelLabel Integer 18
LebelMarker Integer 18
MapDataLabel:{} IsShow Boolean true
IsScrollReaction Boolean false
IsPopup Boolean false
IsPopupTitle Boolean false
IsLineTraking Boolean true
height String '30px'
width String '45px'
position String 'bottom' 'bottom','top'
MapDataList:[] markerLat Long
markerLng Long
markerIcon String Icon URLmarker01marker02marker03marker04marker05marker06marker07marker08marker09marker10marker11marker12
markerLabel String
markerTitle String
markerLink String
markerContent String
labelImageUrl String
labelContent String
setMapChange() API
setMapMarkerListAppend() API
setMapMarkerListRemove() API
setMapMarkerListRemoveAll() API

Map Setting - Map Provider

<head>

  <!-- ###### [Map Google] ##### -->
  <script async defer    type="text/javascript"  src="https://maps.google.com/maps/api/js?key=[ YourAppKEY ]&callback=initMapGoogle®ion=kr&senser=true"></script>          

  <!-- ###### [Map Kakao] ##### -->
  <script                type="text/javascript"  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[ YourAppKEY ]&libraries=services,clusterer,drawing"></script>
  
  <!-- ###### [Map Naver] ##### -->
  <script                type="text/javascript"  src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=[ YourAppKEY ]&submodules=geocoder"></script>

</head>

X MapManager Options 예시

X MapManager Options 전체 예시

<script language="javascript">

var xmapManagerOptions = {
    height         : '400px', minHeight: '100PX', maxHeight: '90VH',
    width          : '90%'  , minWidth : '300PX', maxWidth : '100%',
    minZoom        : 1,
    maxZoom        : 18,
    IsLoactionGEO  : false,
    LocationLAT    : 0,
    LocationLNG    : 0,
    IsShowCoord    : false,
    IsZoomFixed    : false,
    IsShowFit      : false,

    DefaultMarker  : { markerIcon: 'marker06', IsPopupTitle: false, IsShowMarkerNo:true, TextPosition:'top' },
    ClusterMarker  : { IsCluster: true, MaxDistance: 150, MinDistance: 10, markerIcon:'' },

    MapZoomLevel   : { LevelDefault: 8, LevelLabel: 18, LebelMarker: 18 },  
    MapDataLabel   : { IsShow: true, IsScrollReaction: true, IsPopup: true, IsPopupTitle: false,  IsLineTraking: true, height:'30px', width:'45px', position:'top',  },
    ProviderName   : 'OpenLayers',
    ProviderOption : {  
                        layers: [
                                  { layerName   :'BaseLayer',
                                    layerType   :'TileLayer',
                                    sourceType  :'OSM',
                                    sourceURL   :'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                                    attribution :'',
                                    opacity     :1,
                                    visible     :true,
                                    zIndex      :1,
                                  }
                                ],
                     },

    MapDataList    : [ 
                       { markerLat: 37.57568549970196,  markerLng: 126.97682018488811, markerIcon:'marker01', markerLabel:'M.01',  markerTitle: 'Gwanghwamun'                  ,  markerLink: 'https://link-url-01'  , markerContent: 'content 01', labelImageUrl:'http://content-01.jpg' , labelContent :'L01'                  , },                               
                       { markerLat: 37.574114494718145, markerLng: 126.97686482349788, markerIcon:'marker02', markerLabel:'M.02',  markerTitle: 'Statue of King Sejong'        ,  markerLink: 'https://link-url-02'  , markerContent: 'content 02', labelImageUrl:'http://content-02.jpg' , labelContent :'L02'                  , },
                       { markerLat: 37.57072881966248,  markerLng: 126.9769339065269 , markerIcon:'marker03', markerLabel:'M.03',  markerTitle: 'Statue of Admiral Yi Sun-sin' ,  markerLink: 'https://link-url-03'  , markerContent: 'content 03', labelImageUrl:'http://content-03.jpg' , labelContent :'L03'                  , },
                       { markerLat: 37.57442542030343,  markerLng: 126.99373185273083, markerIcon:'marker04', markerLabel:'M.04',  markerTitle: 'Jongmyo'                      ,  markerLink: 'https://link-url-04'  , markerContent: 'content 04', labelImageUrl:'http://content-04.jpg' , labelContent :'L04'                  , },
                       { markerLat: 37.58252531363347,  markerLng: 126.98364606033307, markerIcon:'marker05', markerLabel:'M.05',  markerTitle: 'Bukchon Hanok Village'        ,  markerLink: 'https://link-url-05'  , markerContent: 'content 05', labelImageUrl:'http://content-05.jpg' , labelContent :'Bukchon Hanok Village', },
                       { markerLat: 37.557363705022496, markerLng: 126.98904869509904, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-06'  , markerContent: 'content 06', labelImageUrl:'http://content-06.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.54801557538717,  markerLng: 126.99522799852735, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-07'  , markerContent: 'content 07', labelImageUrl:'http://content-07.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.543285932827985, markerLng: 126.98912329080919, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-08'  , markerContent: 'content 08', labelImageUrl:'http://content-08.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.51206450770708,  markerLng: 126.99551350556196, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Sebitseom'                    ,  markerLink: 'https://link-url-09'  , markerContent: 'content 09', labelImageUrl:'http://content-09.jpg' , labelContent :'Sebitseom'            , },
                       { markerLat: 37.512475796838515, markerLng: 127.00008346630337, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Banpo Bridge'                 ,  markerLink: 'https://link-url-10'  , markerContent: 'content 10', labelImageUrl:'http://content-10.jpg' , labelContent :'Banpo Bridge'         , },
                      
                     ]
    };
    
var xmapManagerFrame   = document.body.querySelector('#xmapManagerEX');
var xmapManager        = new XmapManager(xmapManagerFrame, xmapManagerOptions); 

</script>

X MapManager Options 기본 옵션 예시

<script language="javascript">

var xmapManagerOptions = {
   
    MapDataList    : [ 
                       { markerLat: 37.57568549970196,  markerLng: 126.97682018488811, markerIcon:'marker01', markerLabel:'M.01',  markerTitle: 'Gwanghwamun'                  ,  markerLink: 'https://link-url-01'  , markerContent: 'content 01', labelImageUrl:'http://content-01.jpg' , labelContent :'L01'                  , },                               
                       { markerLat: 37.574114494718145, markerLng: 126.97686482349788, markerIcon:'marker02', markerLabel:'M.02',  markerTitle: 'Statue of King Sejong'        ,  markerLink: 'https://link-url-02'  , markerContent: 'content 02', labelImageUrl:'http://content-02.jpg' , labelContent :'L02'                  , },
                       { markerLat: 37.57072881966248,  markerLng: 126.9769339065269 , markerIcon:'marker03', markerLabel:'M.03',  markerTitle: 'Statue of Admiral Yi Sun-sin' ,  markerLink: 'https://link-url-03'  , markerContent: 'content 03', labelImageUrl:'http://content-03.jpg' , labelContent :'L03'                  , },
                       { markerLat: 37.57442542030343,  markerLng: 126.99373185273083, markerIcon:'marker04', markerLabel:'M.04',  markerTitle: 'Jongmyo'                      ,  markerLink: 'https://link-url-04'  , markerContent: 'content 04', labelImageUrl:'http://content-04.jpg' , labelContent :'L04'                  , },
                       { markerLat: 37.58252531363347,  markerLng: 126.98364606033307, markerIcon:'marker05', markerLabel:'M.05',  markerTitle: 'Bukchon Hanok Village'        ,  markerLink: 'https://link-url-05'  , markerContent: 'content 05', labelImageUrl:'http://content-05.jpg' , labelContent :'Bukchon Hanok Village', },
                       { markerLat: 37.557363705022496, markerLng: 126.98904869509904, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-06'  , markerContent: 'content 06', labelImageUrl:'http://content-06.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.54801557538717,  markerLng: 126.99522799852735, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-07'  , markerContent: 'content 07', labelImageUrl:'http://content-07.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.543285932827985, markerLng: 126.98912329080919, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-08'  , markerContent: 'content 08', labelImageUrl:'http://content-08.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.51206450770708,  markerLng: 126.99551350556196, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Sebitseom'                    ,  markerLink: 'https://link-url-09'  , markerContent: 'content 09', labelImageUrl:'http://content-09.jpg' , labelContent :'Sebitseom'            , },
                       { markerLat: 37.512475796838515, markerLng: 127.00008346630337, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Banpo Bridge'                 ,  markerLink: 'https://link-url-10'  , markerContent: 'content 10', labelImageUrl:'http://content-10.jpg' , labelContent :'Banpo Bridge'         , },
                      
                     ]
    };
    
var xmapManagerFrame   = document.body.querySelector('#xmapManagerEX');
var xmapManager        = new XmapManager(xmapManagerFrame, xmapManagerOptions); 

</script>

X MapManager Options - ProviderOption(Multiple Layer)

<script language="javascript">

var xmapManagerOptions = {
 
    ProviderName   : 'OpenLayers',
    ProviderOption : {  
                        layers: [
                                  { layerName      : 'BaseLayer',
                                    layerType      : 'TileLayer',
                                    sourceType     : 'OSM',
                                    sourceURL      : 'https://{a-d}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png',
                                    attribution    : '© <a href="https://carto.com/attributions" target="_blank">CARTO</a>',
                                    opacity        : 1,
                                    visible        : true,
                                    zIndex         : 1,
                                  },
                                  {  
                                    layerName      : 'GEO Countries Layer',
                                    layerType      : 'VectorImageLayer',    
                                    sourceType     : 'Vector',             
                                    sourceURL      : '/data/geo/countries.geo.json',              
                                    sourceFormat   : 'GeoJSON',
                                    featuresGeoKEY : { key:'id', input:'name', callback:'id,name,ol_uid' },
                                    callBackGeoKEY : function(varArg1, varArg2, varArg3, varArg4, varArg5) {   },
                                    sourceStyle    : { 
                                                       Default: { 
                                                                   fill  : { color:'rgba(255, 255, 255, 0.0)'  },  
                                                                   stroke: { color:'#319FD3', width: 1, lineDash: [0]  }, 
                                                                   text  : { font:'12px Calibri,sans-serif', fill:{ color: '#000' }, stroke:{ color: '#ffffff', width: 2 } }
                                                                },
                                                       Hover  : {  IsUse : true,
                                                                   fill  : { color:'rgba(255,  99,  71, 0.0)'  },  
                                                                   stroke: { color:'#ff6347', width: 3, lineDash: [2,3], lineDashOffset: 6  },         
                                                                   text  : { font:'12px Calibri,sans-serif', fill:{ color: '#000' }, stroke:{ color: '#007bff', width: 2 } }
                                                                }     
                                                    },
                                    attribution    : '',
                                    opacity        : 0.5,
                                    visible        : true,
                                    zIndex         : 2,
                                  },
                                  { 
                                    layerName      : 'GEO - Si Gungu Layer',
                                    layerType      : 'VectorLayer',          
                                    sourceType     : 'Vector',              
                                    sourceURL      : '/data/geo/ALL_SIGUNGU.geo.json',  
                                    sourceFormat   : 'GeoJSON',
                                    featuresGeoKEY : { key:'adm_cd', input:'adm_nm', callback:'adm_cd, adm_cd2, adm_nm' },
                                    callBackGeoKEY : function(varArg1, varArg2, varArg3, varArg4, varArg5) {   },
                                    sourceStyle    : { 
                                                       Default: { 
                                                                    fill  : { color:'rgba(255, 255, 255, 0.0)'  },  
                                                                    stroke: { color:'#212529b0', width: 1, lineDash: [0]  }, 
                                                                    text  : { font:'12px Calibri,sans-serif', fill:{ color: '#000' }, stroke:{ color: '#ffffff', width: 3 } }
                                                                 },
                                                        Hover  : {  IsUse : true,
                                                                    fill  : { color:'rgba(255, 255, 255, 0.0)'  },  
                                                                    stroke: { color:'#319FD3', width: 2, lineDash: [3,3], lineDashOffset: 6 },  
                                                                    text  : { font:'12px Calibri,sans-serif', fill:{ color: '#000' }, stroke:{ color: '#007bff', width: 3 } }
                                                                 }     
                                                       },
                                     attribution    : '',
                                     opacity        : 0.5,
                                     visible        : true,
                                     zIndex         : 3,
                                   }
                                  
                                ],
                     },
 
    }; 
</script>

X MapManager Options - MapDataList

<script language="javascript">

var xmapManagerOptions = {
     
    MapDataList    : [ 
                       { markerLat: 37.57568549970196,  markerLng: 126.97682018488811, markerIcon:'marker01', markerLabel:'M.01',  markerTitle: 'Gwanghwamun'                  ,  markerLink: 'https://link-url-01'  , markerContent: 'content 01', labelImageUrl:'http://content-01.jpg' , labelContent :'L01'                  , },                               
                       { markerLat: 37.574114494718145, markerLng: 126.97686482349788, markerIcon:'marker02', markerLabel:'M.02',  markerTitle: 'Statue of King Sejong'        ,  markerLink: 'https://link-url-02'  , markerContent: 'content 02', labelImageUrl:'http://content-02.jpg' , labelContent :'L02'                  , },
                       { markerLat: 37.57072881966248,  markerLng: 126.9769339065269 , markerIcon:'marker03', markerLabel:'M.03',  markerTitle: 'Statue of Admiral Yi Sun-sin' ,  markerLink: 'https://link-url-03'  , markerContent: 'content 03', labelImageUrl:'http://content-03.jpg' , labelContent :'L03'                  , },
                       { markerLat: 37.57442542030343,  markerLng: 126.99373185273083, markerIcon:'marker04', markerLabel:'M.04',  markerTitle: 'Jongmyo'                      ,  markerLink: 'https://link-url-04'  , markerContent: 'content 04', labelImageUrl:'http://content-04.jpg' , labelContent :'L04'                  , },
                       { markerLat: 37.58252531363347,  markerLng: 126.98364606033307, markerIcon:'marker05', markerLabel:'M.05',  markerTitle: 'Bukchon Hanok Village'        ,  markerLink: 'https://link-url-05'  , markerContent: 'content 05', labelImageUrl:'http://content-05.jpg' , labelContent :'Bukchon Hanok Village', },
                       { markerLat: 37.557363705022496, markerLng: 126.98904869509904, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-06'  , markerContent: 'content 06', labelImageUrl:'http://content-06.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.54801557538717,  markerLng: 126.99522799852735, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-07'  , markerContent: 'content 07', labelImageUrl:'http://content-07.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.543285932827985, markerLng: 126.98912329080919, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Namsan'                       ,  markerLink: 'https://link-url-08'  , markerContent: 'content 08', labelImageUrl:'http://content-08.jpg' , labelContent :'Namsan'               , },
                       { markerLat: 37.51206450770708,  markerLng: 126.99551350556196, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Sebitseom'                    ,  markerLink: 'https://link-url-09'  , markerContent: 'content 09', labelImageUrl:'http://content-09.jpg' , labelContent :'Sebitseom'            , },
                       { markerLat: 37.512475796838515, markerLng: 127.00008346630337, markerIcon:'marker08', markerLabel:'M.06',  markerTitle: 'Banpo Bridge'                 ,  markerLink: 'https://link-url-10'  , markerContent: 'content 10', labelImageUrl:'http://content-10.jpg' , labelContent :'Banpo Bridge'         , },
                      
                     ]
    };
     
</script>

X MapManager API

X MapManager 관리 API

Marker Data Append

<script language="javascript">
  
var  MapMarkerList = [ 
                      {  
                        markerLat    : 37.57568549970196,                                // marker lat
                        markerLng    : 126.97682018488811,                               // marker lng
                        markerIcon   :'marker01',                                        // icon Url Or 'marker01' ~ 'marker12'
                        markerLabel  :'No.01'     ,                                      // marker label
                        markerTitle  :'Gwanghwamun',                                     // marker title
                        markerLink   :'https://en.wikipedia.org/wiki/Gwanghwamun',       // marker Popup Link
                        markerContent:'Marker Popup Content..
 link1' // marker Popup Contents
                        labelImageUrl:'http://img.koreatimes.co.kr/upload/news/100810_pp_hiseoul.jpg',                        // label thumbnail Image
                        labelContent :'Label Description',                               // label thumbnail Description
                      },                               
                      {  
                        markerLat    : 37.574114494718145,                               // marker lat
                        markerLng    : 126.97686482349788,                               // marker lng
                        markerIcon   :'marker02',                                        // icon Url Or 'marker01' ~ 'marker12'
                        markerLabel  :'No.02'     ,                                      // marker label
                        markerTitle  :'Statue of King Sejong (Gwanghwamun)',             // marker title
                        markerLink   :'https://en.wikipedia.org/wiki/Sejong_the_Great',  // marker Popup Link
                        markerContent:'Marker Popup Content..
 link2' // marker Popup Contents
                        labelImageUrl:'http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Statue_of_King_Sejong.jpg/220px-Statue_of_King_Sejong.jpg',  // label thumbnail Image
                        labelContent :'Label Description',                               // label thumbnail Description
                      },
                      {  
                        markerLat    : 37.57072881966248,                                // marker lat
                        markerLng    : 126.9769339065269,                                // marker lng
                        markerIcon   :'marker03',                                        // icon Url Or 'marker01' ~ 'marker12'
                        markerLabel  :'No.03'     ,                                      // marker label
                        markerTitle  :'Statue of Admiral Yi Sun-sin',                    // marker title
                        markerLink   :'https://en.wikipedia.org/wiki/Statue_of_Admiral_Yi_Sun-sin',  // marker Popup Link
                        markerContent:'Marker Popup Content..
 link3' // marker Popup Contents
                        labelImageUrl:'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Yi-Sun-sin.jpg/220px-Yi-Sun-sin.jpg',  // label thumbnail Image
                        labelContent :'Label Description',                               // label thumbnail Description
                      },
                     ]; 
 
 xmapManager.setMapMarkerListAppend(MapMarkerList);
 
  
</script>

Marker Data Remove

<script language="javascript">
  
  mapManager.setMapMarkerListRemove(index);
  
</script>

Marker Data Remove All

<script language="javascript">
  
  mapManager.setMapMarkerListRemoveAll();
  
</script>

Provider Change

<script language="javascript">
  
  mapManager.setMapChange('Google');   //OpenLayers, Google, Kakao, Naver
  
</script>
본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
Copyright(c) Since 2018, EPARI All Rights Reserved
Copyright(c) Since 2018, EPARI All Rights Reserved
Upload
v
Name Type Size
Table
   
테마
Table
   
배경
패턴
투명
배치
크기
Table
   
설정
Table
   
높이