Mapbox gl playground

A mapbox gl js playground for quick tryouts

by cs09g

HTML

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

CSS

#map {
  height: 500px;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-68.13734351262877, 45.137451890638886],
  zoom: 5
});

map.on('load', function() {

  map.addLayer({
    'id': 'maine',
    'type': 'fill',
    'source': {
      'type': 'geojson',
      'data': {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': 
          [[[-67.13734351262877, 45.137451890638886],
          [-67.79035274928509, 47.066248887716995],
          [-67.79141211614706, 45.702585354182816],
          [-67.13734351262877, 45.137451890638886]]]
        }
      }
    },
    'layout': {},
    'paint': {
      'fill-color': '#088',
      'fill-opacity': 0.8
    }
  });
  map.addLayer({
    'id': 'maine2',
    'type': 'fill',
    'source': {
      'type': 'geojson',
      'data': {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': 
          [[[-67.23734351262877, 45.137451890638886],
          [-67.80035274928509, 47.066248887716995],
          [-67.80141211614706, 45.702585354182816],
          [-67.23734351262877, 45.137451890638886]]]
        }
      }
    },
    'layout': {},
    'paint': {
      'fill-color': '#800',
      'fill-opacity': 0.8
    }
  });
  
  map.on("mousedown", "maine", function() {
    console.log('maine');
  });
  
  map.on("mousedown", "maine2", function() {
    console.log('maine2');
  });
});