GL Map Basic

by cwhong

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css">
<div id='gl-map'>
</div>

CSS

html, body {
    width: 100%; 
    height: 100%;
}

#gl-map {
  position:fixed; 
  height:calc(100vh - 15px);
  width:calc(100vw - 15px);
 }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY3dob25nIiwiYSI6IjAyYzIwYTJjYTVhMzUxZTVkMzdmYTQ2YzBmMTM0ZDAyIn0.owNd_Qa7Sw2neNJbK6zc1A'

var map = new mapboxgl.Map({
    container: 'gl-map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 10,
    center: [-74.0059, 40.7128]
})

map.addControl(new mapboxgl.NavigationControl(), 'top-left')

var hess = {
  "type": "Feature",
  "properties": {
    "name": "Hess' Triangle"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      -74.00306,
      40.73349
    ]
  }
}

map.on('load', function () {
	map.addSource('hess-source', {
  	type: 'geojson',
    data: hess
  })
  
  map.addLayer({
  	"id": "hess-layer",
    "source": "hess-source",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "steelblue",
      "circle-opacity": 0.7
    }
  })
})