@smartmaps/maps v5.2.3

SmartMaps

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 or routing 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

For more information visit our Examples or Documentation

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

Maps (@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)

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)

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)

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.