JS * Mapbox 사용하기 ( 기초사용법만! )

중국에서는 google map 사용이 잘 안된다고 한다.

난 안 써봐서 모르겠지만.. 안된 단다... 그리하여 사용하게 된 Mapbox !

 

사실 자세한 내용은 워낙 문서가 잘 정리되어 있어서 홈페이지를 방문 하는게 빠르다.

기본 몇가지의 내용만 정리해 둔다!

 

Map 🔗

• Create map object and connect element by id.
• Clear default bottom-right info button if attributionControl option set false. 

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
		center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
    attributionControl: false // remove mapbox info(?) button
});
</script>

Marker 🔗

• Draw marker on the map.

const marker = new mapboxgl.Marker({
        color: "#FFFFFF"
    }).setLngLat([-74.5, 40])
        .addTo(map);

Custom Marker 🔗

• Can create custom marker using HTML element.
• View full-screen demo page

Line Draw 🔗

• Draw line between points 
• If you want to change your map style, you add source and layer after style load

    map.on('style.load', function(){
        // addSource
        // addLayer
    });

Controller 🔗

• Make map size to full screen
• Zoom map
• I think they don't support a style controller but you can make use  setStyle  option.

 

Map | Mapbox GL JS

 

 

 

---

Thanks for 🙈

• javascript - How to remove MapBox logo from bottom left corner? - Stack Overflow
• javascript - I can't add a new layer after change map style in Mapbox gl js - Stack Overflow