This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Cercalia Maps API Javascript

Build high-performance, interactive mapping experiences for the web using Cercalia’s JavaScript SDKs.

    Welcome to the documentation for the Cercalia Maps Javascript API. Whether you are building a modern dashboard with vector tiles or a classic mapping interface, our SDKs provide the tools to create rich geospatial experiences.

    Why Cercalia for Frontend?

    Cercalia’s client-side SDKs are designed with a focus on performance, interactivity, and ease of integration. We provide developers with two powerful paths depending on project requirements:

    1. High Performance: Vector-based rendering for smooth zooming and rotation.
    2. Broad Compatibility: Robust, layer-based mapping for legacy support and standard GIS workflows.
    3. Modern Ecosystem: First-class support for React, Vue, Angular, and Next.js.

    API Flavors

    Choose the version that best fits your technical stack and visual goals:

    The modern standard for web mapping. Built on top of MapLibre GL JS, it uses WebGL to render vector tiles on the client side. This allows for:

    • Dynamic Styling: Change map styles on the fly without reloading data.
    • 3D Capabilities: Render buildings, terrain, and tilted views with high FPS.
    • Smooth Interaction: Fluid animations and non-integer zoom levels.

    Cercalia Maps API v5

    Our battle-tested library based on OpenLayers. It is the ideal choice for applications that require extensive support for various OGC standards (WMS, WMTS) or need to maintain compatibility with older browser environments.

    • Layer Management: Deep control over raster and vector layers.
    • GIS Integration: Native support for complex geospatial formats.
    View API v5 Documentation

    Frontend Framework Integration

    Modern web development demands more than just a <script> tag. We provide official examples and patterns to integrate Cercalia seamlessly into your framework of choice.

    Why use a Framework Wrapper?

    Integrating a map library into a reactive framework like React or Vue can be tricky due to how they manage the DOM. Our examples show you how to:

    • Handle the lifecycle of the map object correctly (initialization and cleanup).
    • Synchronize state between your application and the map (e.g., updating markers when data changes).
    • Maintain type safety using TypeScript.
    Vanilla JavaScript

    Vanilla JavaScript

    The quickest way to start. Learn the core patterns without framework overhead.

    React

    React

    Custom hooks and component patterns for the React ecosystem.

    Vue

    Vue

    Composition API examples for reactive map state management.

    Angular

    Angular

    Service-based architecture for enterprise-scale mapping apps.

    Next.js

    Next.js

    Server-side rendering (SSR) and hydration strategies for maps.

    Browse all code samples at the Official Examples Repository .