Bounds Options

Example of bounds with added parameters.

A simple map with an OSM source.

main.js

var boundsOptions = {
  padding: {
    top: 100,
    bottom: 75,
    left: 75,
    right: 75
  }
};
var bounds = new cercaliagl.Bounds([2.61291312, 41.89081818, 3.04677098, 42.04505241], boundsOptions);
var map = new cercaliagl.Map({
  target: 'map',
  disableKeyboardControls: true,
  bounds: bounds
});

function applyBounds() {
  var top = Number(document.getElementById('top').value);
  var right = Number(document.getElementById('right').value);
  var bottom = Number(document.getElementById('bottom').value);
  var left = Number(document.getElementById('left').value);
  var boundsCoordinates = [top, right, bottom, left];

  if (document.getElementById('applyOptions').checked) {
    var animation = document.getElementById('animation').checked;
    var bearing = Number(document.getElementById('bearing').value);
    var duration = Number(document.getElementById('duration').value);
    var maxZoom = Number(document.getElementById('maxZoom').value);
    var padding = Number(document.getElementById('padding').value);
    var pitch = Number(document.getElementById('pitch').value);
    var _boundsOptions = {
      animation: animation,
      bearing: bearing,
      duration: duration,
      maxZoom: maxZoom,
      padding: padding,
      pitch: pitch
    };
    map.fitBounds(new cercaliagl.Bounds(boundsCoordinates, _boundsOptions));
  } else {
    map.fitBounds(new cercaliagl.Bounds(boundsCoordinates));
  }
}

map.whenReady(function () {
  document.getElementById('applyBounds').addEventListener('click', function () {
    applyBounds();
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Bounds Options</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form class="demo-form" id="boundsOptionsForm">
      <span class="demo-title ">Coordinates</span>

      <div class="demo-form-row">
        <label>
          Top (latitude):
          <input type="number" id="top" value="2.61291312" min="-90" max="90" step="0.0001"/>
        </label>
        <label>
          Right (longitude):
          <input type="number" id="right" value="41.89081818" min="-180" max="180" step="0.0001"/>
        </label>
        <label>
          Bottom (latitude):
          <input type="number" id="bottom" value="3.04677098" min="-90" max="90" step="0.0001"/>
        </label>
        <label>
          Left (longitude):
          <input type="number" id="left" value="42.04505241" min="-180" max="180" step="0.0001"/>
        </label>
      </div>

      <span class="demo-title">
        Bounds Options
        <input type="checkbox" id="applyOptions" checked />
      </span>

      <div class="demo-form-row">
        <label>
          Animation:
          <input type="checkbox" id="animation" checked />
        </label>
        <label>
          Bearing:
          <input type="number" id="bearing" value="0" min="0" max="360"/>
        </label>
        <label>
          Duration (ms):
          <input type="number" id="duration" value="1000" step="100"/>
        </label>
        <label>
          Max Zoom:
          <input type="number" id="maxZoom" min="0" max="24"/>
        </label>
        <label>
          Padding:
          <input type="number" id="padding" value="25"/>
        </label>
        <label>
          Pitch:
          <input type="number" id="pitch" value="0" min="0" max="60"/>
        </label>
      </div>
      
      <div>
        <button id="applyBounds" class="btn demo-button" type="button">Apply Bounds</button>
      </div>
    </form>    
    <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
    <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=YOUR_API_KEY"></script>
    <script src="main.js"></script>
  </body>
</html>