Skip to content

Getting Started with Data Hub Maps JS

Even when you're using a Playground sample as a starting point, it's good to know the mechanics of the data ends up on the map. And when you're starting from scratch, it's vital that you understand how to make all of it happen yourself.

Setup Basic Map Display

  1. Create a basic HTML and load the modules

    <!DOCTYPE html>
          <script src="" type="text/javascript" charset="UTF-8" ></script>
          <script src="" type="text/javascript" charset="UTF-8" ></script>
          <script src="" type="text/javascript" charset="UTF-8" ></script>
          <!-- include this if you want to use an MVT basemap -->
          <script src="" type="text/javascript" charset="UTF-8" ></script>
  2. Add a div element to body that can act as the display container

      <div style="width: 960px; height: 540px" id="map"></div>
  3. Create a basic Map Layer/Provider and setup visibility

    <script type="application/javascript">
      //specify your credentials to spaces
      var YOUR_ACCESS_TOKEN = "abcdef"; // <--- TODO: Replace this with your token
      // configure layers
      var layers = [
            name: 'Image Layer',
                min: 1,
                max: 20,
                provider: new{
            name: 'Live Map',
              url : 'https://{SUBDOMAIN_INT_1_4}{QUADKEY}?access_token='+YOUR_ACCESS_TOKEN
  4. Initialize the Map with Layer config and define the starting location

      // setup the Map Display
      window.display = new document.getElementById("map"), {
          zoomLevel : 17,
          center: {
              longitude: -117.15406, latitude: 32.72966
          // add layers to display
          layers: layers
  5. Congratulations! Your first Data Hub map is ready