Parcel Tiles API

PARCEL TILES API

OVERVIEW

This endpoint serves a nationwide parcel boundary layer in raster (PNG) format, which can be used with web mapping tools such as Mapbox GL and Leaflet.

AUTHENTICATION

Unlike other ATTOM API endpoints, the /parceltiles endpoint supports the authentication key (apikey) to be provided as a query parameter to support integration with common mapping tools, some of which may not support the passing of request headers.

Example:

/parceltiles/{z}/{x}/{y}.format?apikey=<ApiKey>

TILES

The base path for this endpoint is /parceltiles/{z}/{x}/{y}.format. The supported format is PNG at present. Tiles are available as far out as zoom level 14 and as close in as zoom level 18. Tiles outside of that range will return a 204 No Content response.

USAGE EXAMPLES

Leaflet raster layer example

To add raster tiles to a Leaflet map:

L.tileLayer( 'https://api.gateway.attomdata.com/parceltiles/{z}/{x}/{y}.png?apiKey=<ApiKey>' ).addTo(map)

ArcGIS Online (AGOL) and ArcGIS Desktop

ArcGISOnline TiledLayer works with our raster tile layer, but the {z}/{x}/{y} of our urls needs to be changed to the literal text string that looks like this: {level}/{col}/{row}

You literally leave those level, col, and row words in there instead of the z,x,y

AGSWebTiledLayer(urlTemplate: "https://api.gateway.attomdata.com/parceltiles/{level}/{col}/{row}.png?apiKey=<ApiKey>

Google Maps

The following code example demonstrated how the Tile Server endpoint can be incorporated into Google Maps

<!DOCTYPE html>
<html>
<head>
  <title>Google Map with Parcel Tiles</title>
  <style>
    /* Set the size of the map container */
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
  <!-- Load the Google Maps JavaScript API -->
  <script src="https://maps.googleapis.com/maps/api/js?key=your_google_maps_api_key"></script>
  <script>
    function initMap() {
      // Set the initial map options
      const mapOptions = {
        center: { lat: 37.7749, lng: -122.4194 }, // San Francisco coordinates
        zoom: 14 // Zoom level
      };

      // Create a new Google Map instance with the options
      const map = new google.maps.Map(document.getElementById("map"), mapOptions);

      // Add the ATTOM Parcel Tiles layer to the map
      const parcelTilesLayer = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
          // Construct the URL for the ATTOM Parcel Tiles API
                  return `https://api.gateway.attomdata.com/parceltiles/${zoom}/${coord.x}/${coord.y}.png?apikey=your_attom_api_key`;
        },
        tileSize: new google.maps.Size(256, 256),
        name: "Parcel Tiles"
      });
      map.overlayMapTypes.insertAt(0, parcelTilesLayer);
    }
  </script>
</head>
<body onload="initMap()">
  <!-- Create a map container to hold the Google Map -->
  <div id="map"></div>
</body>
</html>