npm package: @smartmaps/maps
Description: GDPR-compliant javascript map library developed by YellowMap AG
Latest version: 5.2.7

# SmartMaps

<img src="https://www.smartmaps.net/wp-content/uploads/2022/09/SmartMaps_poweredby.svg"
     alt="SmartMaps - powered by YellowMap AG"
     width="500" /><br>
SmartMaps is a GDPR-compliant map platform developed by YellowMap AG. The focus of the platform is the digital sovereignty of users. Based on OpenStreetMap data, SmartMaps offers individually customizable functions such as maps, geocoding, autocomplete, routing as well as elevation, timezone and weather information for the visualization of points of interest, internal location analyses or address validations. SmartMaps is certified with the seals 'Software Hosted in Germany' and 'fair.digital'. These confirm a GDPR-compliant, transparent and data-saving handling of personal information.

To get started with SmartMaps, register for free at [SmartMaps](https://www.smartmaps.net/pricing)

For more information visit our [SmartMaps Documentation](https://docs.smartmaps.cloud/)

## Install

```
npm install --save-dev @smartmaps/maps
```

Use it with:

- Pass the map instance the HTML element or the CSS selector where you want the map to be displayed, your API key and the center with the desired zoom level as initial values

```
import { map } from "@smartmaps/map"

const map = map(elementOrCssSelector, "INSERT-YOUR-API-KEY-HERE", {
          center: [49.021273, 8.439316],
          zoom: 14,
})

```

- Put a div element with a certain id where you want your map to be (elementOrCssSelector is 'map' in this case):

```
<div id="map"></div>
```

- Make sure the map container has a defined height, for example by setting it in CSS:

```
#map { height: 600px; }
```

Import the styles from node_modules/@smartmaps/maps/dist/smartmaps-maps.css. This will depend on your build process. If you don't use a builder like Webpack or Rollup you may copy the file from the node_modules in a folder which is hosted in your app and load it via html script tag.

```
<link rel="stylesheet" href="YourAssetsFolder/smartmaps-maps.css">
```

## Features

### SmartMaps GL ([@smartmaps/smartmaps-gl](https://www.npmjs.com/package/@smartmaps/smartmaps-gl))

SmartMaps GL JS is the globally usable vector map base to integrate interactive and costumizable maps into your web applications. Built on top of MapLibre GL, SmartMaps GL JS provides a powerful and flexible solution for map rendering and location data visualization.

### Maps ([@smartmaps/maps](https://www.npmjs.com/package/@smartmaps/maps))

Maps is the globally usable map base for your industry-specific requirements. Whether you want to visualize location data, business data or socio-demographic data on the web, internal applications or an app.

### Autocomplete ([@smartmaps/autocomplete](https://www.npmjs.com/package/@smartmaps/autocomplete))

A few letters are enough to inspire your customers. With the Autocomplete function, suitable suggestions are already recommended when the first letters are entered in the address search. Autocomplete is easily customizable through parameters like local boosting.

### Geocoding ([@smartmaps/geocoding](https://www.npmjs.com/package/@smartmaps/geocoding))

With the help of geocoding, you convert postal addresses into coordinates and visualize them on the map with pinpoint accuracy. Reverse geocoding allows you to convert an existing coordinate from an automatic location into an address in the opposite way.

### Routing ([@smartmaps/routing](https://www.npmjs.com/package/@smartmaps/routing))

Show your customer the way to your location and navigate him safely to the desired destination - whether on foot, by bike or by car. Use the routing API not only for classic A-B routing, but also for matrix routing, the calculation of isochrones, trip planning or map match.

### Elevation ([@smartmaps/elevation](https://www.npmjs.com/package/@smartmaps/elevation))

The Elevation Service is a powerful tool that allows you to retrieve elevation data for any location on Earth. Whether you need to determine the height of a specific point or analyze the terrain profile along a route, the Elevation Service provides accurate and reliable data.

### Timezone ([@smartmaps/timezone](https://www.npmjs.com/package/@smartmaps/timezone))

The SmartMaps Timezone API allows you to retrieve detailed timezone information for any geographical location. By leveraging this API, you can access real-time data on local time, UTC offsets, and daylight saving time, enhancing your applications with precise temporal context.

### Weather ([@smartmaps/weather](https://www.npmjs.com/package/@smartmaps/weather))

The SmartMaps Weather API offers access to weather data and forecasts for specific locations across Europe. It supports querying weather information through various methods, including geographic coordinates, addresses, locations, rectangles, and polylines. The data is provided by "Deutsche Wetterdienst".

### Area ([@smartmaps/area](https://www.npmjs.com/package/@smartmaps/area))

The Area Service provides a comprehensive REST API for querying geographic boundaries and areas based on geographic coordinates or OpenStreetMap (OSM) IDs. This API supports both JSON and GeoJSON formats, ensuring seamless integration with a wide range of applications.