const map = new routo.maps.Map('map', {
   center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
   zoom: 15, // 지도 로딩 시 최초 표시 레벨
   maxZoom: 19, // 지도의 최대 표시 레벨
   minZoom: 7, // 지도의 최소 표시 레벨
   enableRotation: true, // 지도의 회전 여부
   keyboardShortcuts: true, // 키보드 단축키 사용 여부
   isFractionalZoomEnabled: false, // 확대/축소 시 고정 축척레벨이 아닌 축척으로 이동 허용 여부
   restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
 });

 let circle = new routo.maps.Circle({
   center: { lat: 37.507009, lng: 127.0406339 },
   radius: 200, 
 });
 circle.setMap(map);

// Map 생성시 기본적으로 Data를 가지고 있습니다.
const myMap = new routo.maps.Map("map", {
  center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
  zoom: 15, // 지도 로딩 시 최초 표시 레벨
  maxZoom: 19, // 지도의 최대 표시 레벨
  minZoom: 7, // 지도의 최소 표시 레벨
  enableRotation: true, // 지도의 회전 여부
  keyboardShortcuts: true, // 키보드 단축키 사용 여부
  isFractionalZoomEnabled: true, // 확대/축소 시 고정 축척레벨이 아닌 축척으로 이동 허용 여부
  restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
});
 
// 점형 Feature 생성
const latLng = new routo.maps.LatLng({ lat: 37.507009, lng: 127.0586339 });
const point = new routo.maps.Data.Point(latLng);
point.forEachLatLng((lngLat) => {
  console.log(lngLat.lng());
});
console.log(point.get());

// Data에 점형 Feature 추가
const feature = map.data.add(
  new routo.maps.Data.Feature({
    geometry: point,
    id: 1,
  })
);

const options = {
  geometry: new routo.maps.data.Geometry(),
  id: 1,
  properties: {}
};
const feature = new routo.maps.data.Feature(options);

const latLng = new routo.maps.LatLng({ lat: 37.507009, lng: 127.0586339 });
const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const innerCoords1 = [
  { lat: 37.497009, lng: 127.0686339 }, // north west
  { lat: 37.492009, lng: 127.0686339 }, // south west
  { lat: 37.492009, lng: 127.0786339 }, // south east
  { lat: 37.497009, lng: 127.0786339 }, // north east
];
const point = new routo.maps.Data.Point(latLng);
const polygon = new routo.maps.Data.Polygon([outerCoords, innerCoords1]);
const collection = [point, polygon];
const geomCollection = new routo.maps.data.GeometryCollection(collection);

const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const linearRing = new routo.maps.Data.LinearRing(outerCoords);

const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const lineString = new routo.maps.Data.LineString(outerCoords);

const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const innerCoords1 = [
  { lat: 37.497009, lng: 127.0686339 }, // north west
  { lat: 37.492009, lng: 127.0686339 }, // south west
  { lat: 37.492009, lng: 127.0786339 }, // south east
  { lat: 37.497009, lng: 127.0786339 }, // north east
];
const multiLineString = new routo.maps.Data.MultiLineString([
  outerCoords,
  innerCoords1,
]);

const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const multiPoint = new routo.maps.Data.MultiPoint(outerCoords);

const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const innerCoords1 = [
  { lat: 37.497009, lng: 127.0686339 }, // north west
  { lat: 37.492009, lng: 127.0686339 }, // south west
  { lat: 37.492009, lng: 127.0786339 }, // south east
  { lat: 37.497009, lng: 127.0786339 }, // north east
];
const multiPolygon = new routo.maps.Data.MultiPolygon([
  [outerCoords, innerCoords1],
  [innerCoords1],
]);

const latLng = new routo.maps.LatLng({ lat: 37.507009, lng: 127.0586339 });
const point = new routo.maps.data.Point(latLng);

const outerCoords = [
  { lat: 37.507009, lng: 127.0586339 }, // north west
  { lat: 37.487009, lng: 127.0586339 }, // south west
  { lat: 37.487009, lng: 127.0886339 }, // south east
  { lat: 37.507009, lng: 127.0886339 }, // north east
];
const innerCoords1 = [
  { lat: 37.497009, lng: 127.0686339 }, // north west
  { lat: 37.492009, lng: 127.0686339 }, // south west
  { lat: 37.492009, lng: 127.0786339 }, // south east
  { lat: 37.497009, lng: 127.0786339 }, // north east
];
const polygon = new routo.maps.data.Polygon([outerCoords, innerCoords1]);

const map = new routo.maps.Map('map', {
  center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
  zoom: 15, // 지도 로딩 시 최초 표시 레벨
  maxZoom: 19, // 지도의 최대 표시 레벨
  minZoom: 7, // 지도의 최소 표시 레벨
  enableRotation: true, // 지도의 회전 여부
  keyboardShortcuts: true, // 키보드 단축키 사용 여부
  isFractionalZoomEnabled: false, // 확대/축소 시 고정 축척레벨이 아닌 축척으로 이동 허용 여부
  restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
});
const drawingManager = new routo.maps.drawing.DrawingManager({
  map: map,
  circleOptions: {
    strokeColor: '#000000',
    strokeOpacity: 0.3,
    strokeWeight: 10,
    fillOpacity: 0.8,
    fillC
  markerOptions: {
    opacity: 0.8,
    label: {
      text: '마커',
      fontFamily: 'Malgun Gothic',
      fontWeight: 'bold',
      fontSize: '17px'
    },
  },
  polygonOptions: {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#abc',
    fillOpacity: 1,
    arrow:true,
  },
  polylineOptions: {
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 10,
    arrow: true,
  },
  rectangleOptions: {
    draggable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#abc',
    fillOpacity: 1,
  }
});
drawingManager.setOptions({
  polylineOptions: {
    strokeColor: '#abc',
    strokeOpacity: 0.5,
    strokeWeight: 10,
    arrow: true,
  }
});
function setDrawingMode(drawingMode) {
  drawingManager.setDrawingMode(drawingMode);
}
// 모든 도형 삭제
const deleteDrawing = () => drawingManager.clear();
$('#deleteBtn').click(e => deleteDrawing());
$('button').click(e => {
  const target = e.currentTarget;
  setDrawingMode($(target).data('type'));
})

const vb = new routo.maps.Pixel();
const domEvent = {};
const latLng = new routo.maps.LatLng(37.534539, 126.909747);
const pixel = new routo.maps.Pixel();

const eventResponse = new routo.maps.EventResponse(vb, domEvent, latLng, pixel);

const center = {
  lat: 37.532283,
  lng: 126.951886
};

// map 생성
const map = new routo.maps.Map('map', {
  center,
  zoom: 15,
  maxZoom: 19,
  minZoom: 7,
  blockRotation: true,
  keyboardEventTarget: document,
  constrainResolution: true,
  restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
});

// Info Window(Overlay)에 들어갈 텍스트
const content = '<button id="closeInfoWindowBtn" class="btn__overlay--close" style="float : right; cursor:pointer;" onclick="closeInfoWindow();">닫기</button>'
  + '<div id="content">'
  + '<h4>InfoWindow</h4>'
  + '<div>info window 입니다</div>'
  + '</div>';

const infowindow = new routo.maps.InfoWindow({
  content,
  position: center,
});

$('#create-info-window').click(evt => {
  infowindow.open({
    map,
  });
});

$('#delete-info-window').click(evt => {
  infowindow.close();
});

window.closeInfoWindow = () => infowindow.close();

new routo.maps.LatLng(37.534539, 126.909747);
new routo.maps.LatLng(37.534539, 126.909747, true);
new routo.maps.LatLng({lat: 37.534539, lng: 126.909747});
new routo.maps.LatLng({lat: 37.534539, lng: 126.909747}, true);
new routo.maps.LatLng({lat: 37.534539, lng: 126.909747}, null, true);
new routo.maps.LatLng(new routo.maps.LatLng({lat: 37.534539, lng: 126.909747}));
new routo.maps.LatLng(new routo.maps.LatLng({lat: 37.534539, lng: 126.909747}), true);
new routo.maps.LatLng(new routo.maps.LatLng({lat: 37.534539, lng: 126.909747}), null, true);

new routo.maps.LatLngBounds(new routo.maps.LatLng({lat: 37.534539, lng: 126.909747}), new routo.maps.LatLng({lat: 37.666666, lng: 126.999999})); 
new routo.maps.LatLngBounds({lat: 37.534539, lng: 126.909747}, {lat: 37.534539, lng: 126.909747});

const map = new routo.maps.Map('map', {
    center: { lat: 37.516509, lng: 126.9000000 }, // 지도 초기 위치
    zoom: 13, // 지도 로딩 시 최초 표시 레벨
    maxZoom: 19, // 지도의 최대 표시 레벨
    minZoom: 7, // 지도의 최소 표시 레벨
    enableRotation: true, // 지도의 회전 여부
    keyboardShortcuts: true, // 키보드 단축키 사용 여부
    isFractionalZoomEnabled: false, // 확대/축소 시 고정 축척레벨이 아닌 축척으로 이동 허용 여부
    restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
});

const customLayer = new routo.maps.layer.CustomLayer({
    zIndex: 20,
    extent: [14127619.46, 4511198.75, 14131130.79, 4513835.83],
    tileUrlFunction: ([z, x, y]) => {
        if (z === 19) {
            return `https://tile.routo.com/webgis_tile01/Detail/v3/${z}/${x}/${y}.png8`
        }
    }
});

map.addLayer_(customLayer);

let map = new routo.maps.Map("map", {
  center: { lat: 37.5062764164784, lng: 126.945216460666 }, // 지도 초기 위치
  zoom: 18, // 지도 로딩 시 최초 표시 레벨
  maxZoom: 19, // 지도의 최대 표시 레벨
  minZoom: 7, // 지도의 최소 표시 레벨
  enableRotation: false, // 지도의 회전 여부
  keyboardShortcuts: true, // 키보드 단축키 사용 여부
  isFractionalZoomEnabled: false, // 확대/축소 시 고정 축척레벨이 아닌 축척으로 이동 허용 여부
  restriction: { latLngBounds: { west: 124.6, south: 33.114, east: 131.875, north: 42.59 }, strictBounds: true }, // 지도가 표시할 영역을 지정(해당 영역 밖으로 이동 불가)
  //mapTypeId: "roadmap_vector_basic"
});

const instance = {};
const eventName = "";
const handler = function() {};
const mapsEventListener = new routo.maps.MapsEventListener(instance, eventName, handler);

const mapTypeRegistry = new routo.maps.MapTypeRegistry();

const myLatlng = {
  lat: 37.52997778,
  lng: 126.96464444
};
// Marker 생성

let marker = new routo.maps.Marker({
  position : myLatlng,
  map: map,
  label: {text: "마커", font: "'Malgun Gothic'", fontWeight: "bold", fontSize: "17px"},
});