Overview
  • Authentication
  • Routing APIs
    • Directions API
    • Directions Basic API
    • Distance Matrix API
    • Distance Matrix Basic API
    • Route Optimizer API
    • Fleet Planner API
  • Roads APIs
    • Snap To Road API
    • Nearest Roads API
    • Speed Limits API
  • Places APIs
    • Autocomplete API
    • Place Details API
    • Advance Place Details API
    • Nearby Search API
    • Advance Nearby Search API
    • Photo API
    • Text Search API
    • Address Validation API
    • Geofencing API
    • Elevation API
  • Geocoding
    • Geocoding API
    • Reverse Geocoding API
  • Map Tiles
    • 2D Tiles
      • Overview
      • Vector Tiles API
      • Static Tiles API
    • 3D Tiles
      • Overview and Integration
    • Style Editor
  • Navigation SDKs
    • Navigation SDK - Android
    • Navigation SDK - iOS
  • Map SDKs
    • Map SDK - iOS
    • Map SDK - Android
  • Places SDKs
    • Places SDK - Android
    • Places SDK - iOS
  • Web SDK
    • SDK Setup
    • Adding Markers
    • Events & Controls
    • Static Maps
    • Geolocation
    • Adding Shapes
    • Marker Clustering
    • Heatmap Layer
    • Ground Overlays
    • Custom Overlays
  • Ola Maps MCP
    • MCP Overview
    • Ola Maps MCP Server
  • Street View

Adding Custom Overlays in map

This documentation provides methods for creating a custom canvas overlay on top of a map. This is useful for more dynamic overlays, like drawing on the map or creating custom animations.

Creating a Custom Overlay

To add a custom overlay, you can use the addLayer method with a type "custom" layer.

Initialization with `onAdd`

The onAdd function is called when the layer is added to the map. Use this to set up any resources your layer will need, like creating a canvas, initializing WebGL, or setting up a 3D scene. This takes two parameters:
  • "map" : The map instance, providing access to the map's API.
  • "gl" : The WebGL context, particularly important for 3D rendering.

Rendering with `render`

The render function is where the magic happens. It’s called every time to update the visual content of your custom layer. This takes two parameters:
  • "gl" : The WebGL context, used if rendering with WebGL.
  • "matrix" : The transformation matrix representing the map's current state (e.g., zoom, rotation).
In this function, you draw your custom content on the map, be it a simple 2D graphic or a complex 3D scene

Example