Creating Custom Tile Layers

You can create a custom Layer to get tiles with custom display styles and attributes returned. A Layer defines the set of data attributes returned in the vector tiles and line styling for raster tiles.

Customized parcel attributes are only available in the Mapbox Vector Tiles (.mvt) format. Vector maps are styled client-side, so they do not require a custom layer to style unless you need to include custom attributes. Your mapping platform (for example, Mapbox GL or Tangram) will have detailed documentation on how to style data.

Each layer has a unique ID. Each unique set of styles, attributes, and queries defines new layer – you cannot edit existing layers, just create new ones.

Endpoint

All tileserver requests will be to the https://tiles.regrid.com domain, with the paths described below per request.

Vector tile default response attributes

By default, the following attributes are returned as properties when using our vector tiles:

"properties": {
        "address": "123900 MAPLE AVE",
        "fid": 607301,
        "ogc_fid": 607301,
        "owner": "ROBERT JAMES",
        "parcelnumb": "11191090020000",
        "path": "/us/il/cook/evanston/607301",
        "ll_uuid": "4e23f7dd-556f-4ca0-90f9-7a2c537548cf"
      }

If an attribute has a null value, that attribute will be omitted from the properties. This primarily affects the address or owner attributes, but could affect any attribute.

How to create a custom layer

The basic order of operations to create a custom layer is:

1. POST JSON to /api/v1/sources to define the styles or custom data (vector tiles only) for a new layer.
2. Read the response that is formatted in TileJSON to get the new layer's url(s).
3. Use the urls specified in the response on your map.

Layer creation endpoint

POST /api/v1/sources?token=

Request parameters:

• format (optional): The format of tiles you want. Defaults to png. Specify mvt for Mapbox Vector Tile format tiles.

Request body:

The JSON for a layer definition has these parameters:

• query: Set to parcel: true to select parcel data (basically always used as in example below). If a parcel is stacked, set return_stacked:false to return only the first parcel with identical geometry.
• fields (option available for vector tiles only): A list of Regrid Parcel Schema attributes to include. By default, vector tiles include address, owner, and path
• styles (option available for raster tiles only): A string of CartoCSS styles (see "composing styles" below). We apply a set of default styles if you don't specify any.

Sample request body:

This layer requests parcels with a custom line color and additional fields:

POST /api/v1/sources?token=
{
  "query": {
    "parcel": true, "return_stacked":false
  },
  "fields": {
    "parcel": ["usecode", "usedesc", "parval", "landval"]
  },
  "styles": "Map { background-color: rgba(0,0,0,0); } #loveland { line-color: #69387a; }"
}

Sample layer request response:

You will get a TileJSON response response that includes:

• a unique layer ID
• the tile URL template for use in slippy maps
• the query, fields and styles you submitted

{
    "tilejson": "2.1.0",
    "id": "e13c4cd22eaf5a751552692075fd04f5c7d741be",
    "maxZoom": 21,
    "tiles": ["https://tiles.regrid.com/api/v1/sources/parcel/layers/e13c4cd22eaf5a751552692075fd04f5c7d741be/{z}/{x}/{y}.png?token="],
    "grids": ["https://tiles.regrid.com/api/v1/sources/parcel/layers/e13c4cd22eaf5a751552692075fd04f5c7d741be/{z}/{x}/{y}.json?token="],
    "vector": ["https://tiles.regrid.com/api/v1/sources/parcel/layers/e13c4cd22eaf5a751552692075fd04f5c7d741be/{z}/{x}/{y}.mvt?token="],
    "query": {
        "parcel": true,
        "operation": "intersection"
    },
    "fields": {
        "parcel": [
            "usecode",
            "usedesc",
            "parval",
            "landval"
        ]
    },
    "styles": "Map { background-color: rgba(0,0,0,0); } #loveland { line-color: #69387a; }"
}

Custom Raster Map Styles

You can style raster tiles (.pngs) by writing CartoCSS styles. Styles should be applied to the #loveland layer.

Some sample styles that illustrate styling based on zoom level:

#loveland {
  line-color: #69387a;
  line-width: 0.25;

  [zoom >= 14] { line-opacity: 0.5; }
  [zoom >= 15] { line-width: 1.5; line-opacity: 1;}
  [zoom >= 17] { line-width: 2.5; }
  [zoom >= 18] { line-width: 3; }
}

You can change the map's background color with Map { background-color: rgba(0,0,0,0); }. That value specifies a transparent background, but you can put in any color.

Leaflet raster layer example

This snippet of code creates a custom layer with red parcel polygons and adds it to a leaflet map:

$.ajax({
  method: 'POST',
  url: 'https://tiles.regrid.com/api/v1/sources?token=...',
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  data: JSON.stringify({
    "query": {
      "parcel": true,
    },
    "styles": "Map { background-color: rgba(0,0,0,0); } #loveland { polygon-fill: #FF0000; }",
  }),
}).done(function(data) {
  console.log('Got layer', data);
  L.tileLayer(data.tiles[0]).addTo(map);
});