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.

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.