In this Proof of Concept (POC), we explore two authentication approaches supported by IOCheese Cloud:

• Map Access Keys — designed for client-side map applications.
• OAuth 2.0 Client Credentials — designed for server-to-server API access.

This guide explains the intended use case for each approach and provides basic implementation examples.

Authentication Overview​

The two authentication mechanisms solve different problems.

The key distinction is:

Map Access Keys are intended to identify and control access from client-side map applications, while OAuth 2.0 is intended for authenticated server-to-server communication.

1. Client-Side Applications: Map Access Keys​

When a map is rendered directly in a user's browser, the authentication credential will eventually be visible in the browser's network requests.

For this reason, a client-side map credential should not be treated like a server-side secret.

Instead, use a Map Access Key that is specifically designed for map access and can be revoked or restricted according to your IOCheese configuration.

Example with MapLibre GL JS​

const map = new maplibregl.Map({
  container: 'map',

  style:
    'https://api.iocheese.com/v1/map/styles/default/style.json?key=xxxxxxxxxxxxxxxxxx',
  center: [78.9629, 22.5937],
  zoom: 4,
  minZoom: 3,
  maxZoom: 19,
});

2. Server-to-Server Workflows: Use OAuth 2.0 Flow​

For backend workers, data ingestion pipelines, or batch tile downloads, exchange your client_id and client_secret for short-lived JWT tokens:

curl -X POST https://api.iocheese.com/oauth/token \
  -H "Content-Type: application/json" \
  -d '{
    "client_id": "YOUR_CLIENT_ID",
    "client_secret": "YOUR_CLIENT_SECRET",
    "grant_type": "client_credentials"
  }'

Response:

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6...",
  "token_type": "Bearer",
  "expires_in": 3600
}

Use the received access_token in subsequent API requests via the Authorization: Bearer <token> header.

Summary & Resources​

• Use Map Access Keys for client-side map rendering.
• Use OAuth 2.0 for server-side endpoints and management APIs.

For detailed instructions and code snippets in Node.js, Python, and C#, read our Authentication Overview and OAuth Authentication Guide.

When working with MapLibre GL JS and vector or GeoJSON data, a few architectural and rendering decisions can have a significant impact on performance.

In this guide, we cover 5 practical techniques for improving MapLibre GL JS performance in web applications.

1. Use Clustering for Large Point Datasets​

Rendering thousands of individual points can quickly become expensive, especially when using HTML-based markers.

For large point datasets, use MapLibre's built-in GeoJSON clustering:

map.addSource('fleet-vehicles', {
  type: 'geojson',
  data: 'https://api.iocheese.com/v1/datasets/fleet.geojson',

  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50
});

Whether you're building logistics dashboards, real estate locators, or full-scale geospatial analytics platforms, IOCheese Maps provides the foundation for smooth 60fps rendering across desktop and mobile browsers.

Why Vector Tiles?​

Traditional raster map tiles pre-render static bitmap images on servers, resulting in heavy bandwidth consumption and rigid styling. Vector map tiles package raw geometric data (points, lines, polygons, and metadata) in lightweight Protocol Buffers (PBF/MVT), allowing the client browser to style and render dynamic vector graphics on the GPU using WebGL / WebGPU.

Key Benefits:​

• Ultra-Fast Global Edge Caching: Tiles are distributed via Anycast CDN nodes across North America, Europe, and Asia-Pacific.
• Dynamic Styling at Runtime: Switch between Light, Dark, Satellite-hybrid, or custom brand themes without fetching new map data.
• Crisp High-DPI Displays: Vector graphics stay razor sharp on Retina and 4K screens at any zoom level.
• Fraction of the Bandwidth: Typical tile payloads are under 30KB, saving data costs and accelerating initial map load.

Quick Example with MapLibre GL JS​

Integrating IOCheese Vector Tiles into any web project takes just a few lines of code:

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.iocheese.com/v1/map/styles/default/style.json?key=YOUR_MAP_ACCESS_KEY',
  center: [78.9629, 20.5937], // Centered over India
  zoom: 5
});

// Add standard navigation controls
map.addControl(new maplibregl.NavigationControl(), 'top-right');

What's Next?​

Over the coming months, we will be rolling out:

1. Interactive Style Studio: A web-based visual editor to customize colors, fonts, and layer visibility with one-click export.
2. Turn-by-Turn Routing & Directions API: High-efficiency pathfinding and matrix distance calculations.
3. Geocoding & Autocomplete: Fast place search and address reverse-geocoding.

Check out our Quickstart Guide or explore the API Reference to get started!