var bounds = [
    [-103.5, 33], // Southwest coordinates
    [-94, 38]  // Northeast coordinates
];


mapboxgl.accessToken = 'pk.eyJ1IjoiZGFycmVuamF3b3Jza2kiLCJhIjoiZmQ4OTYyNzJjYzc0OThiZTFjMmViMDE3ZmI0NTJmOTgifQ.3XwMxZz97E3nuPEZLoxohw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/darrenjaworski/cinys0yag0002asnnnh8pb86a',
    maxBounds: bounds
});


map.on('load', function(){
  var url = '/darrenjaworski/raw/b7f36a2401c0f905b664abf24349d885/parks.geojson';
  map.addSource('parks', {
    type: 'geojson',
    data: url
  });

  map.addLayer({
    "id": "stateParks",
    "type": "symbol",
    "source": "parks",
    "layout": {
      "icon-image": "park-15",
      "icon-allow-overlap": true
    }
  });
});


map.on('click', function (e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['stateParks'] });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  // Populate the popup and set its coordinates
  // based on the feature found.
  var popup = new mapboxgl.Popup()
    .setLngLat(feature.geometry.coordinates)
    .setHTML(feature.properties['State Parks'])
    .addTo(map);
});


map.on('mousemove', function (e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['stateParks'] });
  map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});