Tile layers

Introduction

Tile layers are a crucial component of web-based mapping applications, providing an efficient way to render large datasets. Our service offers two types of tile layers: raster tiles for displaying crop maps and vector tiles for displaying boundary information. Both types of tiles are designed to work seamlessly with popular mapping libraries such as Leaflet, Mapbox GL JS, and OpenLayers.

CORS

To prevent unauthorized use, this service has been configured to allow Cross-Origin Resource Sharing (CORS) requests for debugging purposes. The current configuration permits CORS requests only from localhost:8000.

Raster tiles

Overview

Raster tiles are used to display the crop map, providing a visual representation of crop distribution and health. These tiles are generated from raster data and are typically used in agricultural monitoring and analysis applications.

Specifications

• Tile Format: PNG or JPEG
• Tile Size: 256x256 pixels
• Zoom Levels: 0 to 14
• Coordinate System: Web Mercator (EPSG:3857)

URL Template

The URL template for accessing raster tiles is as follows:

https://tiles.onesoil.ai/raster/{tileset_id}/{z}/{x}/{y}.{format}

Where:

• {tileset_id} unique identifier of tileset (example: demo-france-2023-v1)
• {z} is the zoom level
• {x} is the tile column
• {y} is the tile row
• {format} png or jpg

Usage Example

mapboxgl.accessToken = 'your-mapbox-access-token';
const map = new mapboxgl.Map({
  container: 'map', // container ID
  style: 'mapbox://styles/mapbox/dark-v11',
  center: [4.08, 49.32], // starting position
  zoom: 5 // starting zoom
});
map.on('load', () => {
  map.addSource('demo-raster-source', {
    type: 'raster',
    tileSize: 256,
    tiles: ['https://tiles.onesoil.ai/raster/demo-france-2023-v1/{z}/{x}/{y}.png'],
  });
  map.addLayer({
    'id': 'demo-raster',
    'type': 'raster',
    'source': 'demo-raster-source',
    'minzoom': 0,
    'maxzoom': 14,

  });
})

Vector Tiles

Overview

Vector tiles are used to display boundaries, such as administrative boundaries or parcel boundaries. These tiles provide a scalable and interactive way to render vector data on the map.

Specifications

• Tile Format: PBF (Protocolbuffer Binary Format)
• Zoom Levels: 0 to 14
• Coordinate System: Web Mercator (EPSG:3857)

Properties

• year - The year for which the prediction was made.
• country_name - The name of the country.
• iso_alpha_3 - The ISO 3166-1 alpha-3 code representing the country.
• subdivision_name - The name of the specific region within the country.
• iso_subdivision_code - The ISO 3166-2 code representing the country's subdivision (state, province, etc.).
• season - A unique identifier for the growing season (season1 or season2)
• season_start - The starting date of the growing season.
• season_end - The ending date of the growing season.
• crop_name - The name of the crop that is being predicted.
• crop_eppo_code - The EPPO (European and Mediterranean Plant Protection Organization) code for the predicted crop.
• predicted_at - The specific date when the crop prediction was made (for in-season predictions).
• area_ha - The area of the field in hectares.
• crop_model_version - The version of the crop model used to make the prediction.
• boundary_model_version - The version of the boundary model used to make the prediction.

URL Template

The URL template for accessing raster tiles is as follows:

https://tiles.onesoil.ai/vector/{tileset_id}/{z}/{x}/{y}.pbf

Where:

• {tileset_id} unique identifier of tileset (example: demo-france-2023-v1)
• {z} is the zoom level
• {x} is the tile column
• {y} is the tile row

Usage Example

mapboxgl.accessToken = 'your-mapbox-access-token';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v11',
  zoom: 5,
  center: [4.08, 49.32],
});

map.on('load', () => {
  map.addSource(
    'boundaries',
    {
      'type': 'vector',
      'tiles': [`https://tiles.onesoil.ai/vector/demo-france-2023-v1/{z}/{x}/{y}.pbf`],
      'minzoom': 1,
      'maxzoom': 14
    }
  );
  map.addLayer(
    {
      'id': 'boundaries-fill',
      'type': 'fill',
      'source': 'boundaries',
      'source-layer': 'demo-france-2023-v1',
      'paint': {
        'fill-color': {
          property: 'crop_name',
          type: 'categorical',
          stops: [
            ['wheat', '#d8b56b'],
            ['maize', '#ffd300'],
            ['rice', '#00a8e2'],
            ['sorghum', '#ff9e0a'],
            ['barley', '#e2007c'],
            ['soybeans', '#267000'],
            ['rapeseed', '#d1ff00'],
            ['sunflower', '#ffff00'],
            ['sugarbeet', '#a800e2'],
            ['sugarcane', '#af7cff'],
            ['grass', '#ffa5e2'],
            ['cotton', '#ff2626'],
            ['other', '#00af49'],
            ['not_field', '#999999'],
            ['to_delete', '#000000'],
          ]
        },
        'fill-opacity': {
          "stops": [
            [10, 0.2],
            [12, 0.6],
            [14, 0.9],
            [16, 1.0]
          ]
        }
      }
    }
  );
  map.addLayer({
    'id': 'boundaries-outline',
    'type': 'line',
    'source': 'boundaries',
    'source-layer': 'demo-france-2023-v1',
    'paint': {
      'line-color': '#fff',
    }
  });
});