SmartMaps GL Angular

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 Functions

Install

npm install @smartmaps/smartmaps-gl-angular

pnpm add @smartmaps/smartmaps-gl-angular

The @smartmaps/smartmaps-gl-angular package wraps the service from @smartmaps/smartmaps-gl in an angular directive

// You can provide your API key and options during the application bootstrap process:

bootstrapApplication(AppComponent, {
	providers: [
		provideApiKey(INSERT-API-KEY here or read it from environment options),
		provideMapOptions(environment.mapOptions),
		// ... additional providers
	]
})

// Alternatively, you can also provide your API key as a directive input:

<div smartmapsGL apiKey="INSERT-API-KEY"></div>

or in the mapOptions variable

<div
	smartmapsGL
	[mapOptions]="{
        apiKey: 'INSERT-API-KEY'
    }">
</div>

Import the MapDirective in Standalone Component or NgModule:

import { MapDirective } from '@smartmaps/smartmaps-gl-angular';

@Component({
standalone: true,
imports: [
MapDirective,
// ... additional imports
],
// ... additional settings
})

Use the 'smartmapsGL' Directive in the html template. The 'heigth' property can be a number, "full", "grow" or "none". Default is "full". Look for the docs in the directive for a detailed explanation:

<div smartmapsGL [mapOptions]="options" (ready)="onMapReady($event)"></div>

Import the styles from node_modules/@smartmaps/smartmaps-gl-angular/smartmaps-gl.scss . This will depend on your build process. Either you import the styles into your css:

@import '@smartmaps/smartmaps-gl-angular/smartmaps-gl.scss';

Peer Dependencies

This package relies on @smartmaps/smartmaps-gl and maplibre-gl as a peer dependency. Please ensure that you have it installed in your project. You can install it using npm:

npm install @smartmaps/smartmaps-gl maplibre-gl

pnpm add @smartmaps/smartmaps-gl maplibre-gl

Using maplibre-gl functionalities

All functionalities provided by maplibre-gl can be used in conjunction with this package. Please refer to the maplibre-gl documentation for more information on how to use these functionalities.

Features

Smartmaps GL (@smartmaps/smartmaps-gl)

Smartmaps GL 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.

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.