Skip to content

Welcome

SmartMaps JS SDK v5 is a powerful JavaScript library that enables you to integrate interactive maps into your web applications. SmartMaps provides a globally usable map base that can be tailored to your industry-specific requirements. Whether you want to visualize location data, business data, or socio-demographic data on the web, internal applications, or mobile apps, SmartMaps has you covered.

Notice: JS API v3 and v5

If you are still using the legacy SmartMaps JS API v3, please be aware that it is now deprecated and no longer being actively developed. Instead of upgrading to SmartMaps JS SDK v5, we recommend considering a switch to SmartMaps GL for your projects. SmartMaps GL offers a powerful and flexible solution for map rendering and location data visualization, providing better performance and customization options compared to the older versions. However, if you need to access the previous version's documentation for reference purposes, you can find the SmartMaps JS API v3 documentation here.

Getting Started

To start using SmartMaps JS API v5, follow these steps:

  1. Sign up for a free account at SmartMaps to obtain your API key.

  2. Install the SmartMaps library via npm: 

    npm install --save-dev @smartmaps/maps

  3. Import the map function from the library: 

    import { map } from "@smartmaps/map";

  4. Create a map instance by passing the HTML element or CSS selector where you want the map to be displayed, your API key, and the initial center coordinates and zoom level: 

    const map = map(elementOrCssSelector, "INSERT API-KEY", {
  center: [49.021273, 8.439316],
  zoom: 14,
});

  5. Add a div element with a specific ID where you want the map to be rendered: 

    <div id="map"></div>

  6. Ensure that the map container has a defined height by setting it in your CSS: 

    #map { height: 600px; }

  7. Import the SmartMaps styles from node_modules/@smartmaps/maps/dist/smartmaps-maps.css. The exact method depends on your build process. If you're not using a build tool like Webpack or Rollup, you can copy the file from the node_modules directory to a folder hosted in your app and load it via an HTML link tag: 

    <link rel="stylesheet" href="YourAssetsFolder/smartmaps-maps.css">

With SmartMaps JS API v5, you can create interactive and feature-rich maps while prioritizing user privacy and data protection. Leverage the power of SmartMaps to enhance your web applications with location-based functionality and deliver a seamless user experience.