
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
ngx-apple-mapkit
Advanced tools
This is a renewed variant of the ngx-apple-maps. This runs on Angular 16 and Ivy. I personally use the library and it is therefore regularly maintained.
npm install ngx-apple-mapkit
You can test it here:
https://projects.web-timo.de/preview/ngx-apple-mapkit
For generating, you need:
index.html
script including
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
AppleMapsModule
to imports in your app.module.ts
options: MapKitInitOptions
in your *.component.ts
filesettings: MapConstructorOptions
<ngx-apple-mapkit [options]="options" [settings]="settings"></ngx-apple-mapkit>
in your *.component.html
To start the map, the ngx-apple-mapkit
must be described in the HTML component.
<ngx-apple-mapkit (onLoaded)="onLoaded($event)"
*ngIf="options && settings"
[options]="options" [settings]="settings">
</ngx-apple-mapkit>
export class NgxAppleMapkitComponent implements OnInit, OnDestroy {
public settings: MapConstructorOptions;
public options: MapKitInitOptions;
private map: MapKitLoaded;
// ...
ngOnInit(): void {
const token: string = "YOUR_TOKEN";
this.initMapkit(token);
}
// ...
private initMapkit(token: string) {
const dark: boolean = this.themeService.isDark;
const home = {
latitude: 51.68,
longitude: 7.86
};
this.settings = {
colorScheme: dark ? "dark" : "light",
isZoomEnabled: true,
showsZoomControl: true,
showsUserLocationControl: false,
showsMapTypeControl: true,
showsUserLocation: false,
tracksUserLocation: false,
isScrollEnabled: true,
mapType: "standard",
center: home,
isRotationEnabled: true,
region: {
center: home,
span: {
from: 0.050, // Zoom
to: 0.050 // Zoom
}
}
};
this.options = {
JWT: token, // <-- Here your MapKit Token
language: window.navigator.language,
callback: (data: any) => {
console.log('data ', data);
}
};
}
onLoaded(e: MapKitLoaded) {
this.map = e;
}
ngOnDestroy(): void {
this.map?.map?.destroy();
}
}
Parameter | Typ | Use | Default | Required |
---|---|---|---|---|
[options] | MapKitInitOptions | Needed for Token and Init Option | - | β |
[settings] | MapConstructorOptions | Settings for Apple Maps | - | β |
[logging] | boolean | For Development | false | β |
[language] | "en" | "de" | "es" | "it" | "fr" | string | Set Language | "en" | β |
(onLoaded) | (event: MapKitLoaded) => void; | Return Map | - | β |
As you can see from the previous code examples, the token is set in options
.
this.options = {
JWT: token, // <-- Here your MapKit Token
language: window.navigator.language,
callback: (data: any) => {
console.log('data ', data);
}
};
With the ngx-apple-mapkit
, you get an object back via the onLoaded that contains the map and some pre-built functions.
<ngx-apple-mapkit-annotation
...
(onLoaded)="onLoaded($event)"
></ngx-apple-mapkit-annotation>
function onLoaded(e: MapKitLoaded) {
this.map = e;
}
export declare interface MapKitLoaded {
key: number;
map: MapKit.Map; // <-- Native mapkit.js Map
addEventListener<T, K extends keyof MapKit.MapEvents<this>>(
type: K,
listener: (this: T, event: MapKit.MapEvents<this>[K]) => void,
thisObject?: T
): void;
isRotationAvailable: () => boolean;
isRotationEnabled: () => boolean;
isScrollEnabled: () => boolean;
isZoomEnabled: () => boolean;
getCenter: () => CoordinatesInterface;
setCenterAnimated: (latitude: number, longitude: number, animate?: boolean) => void;
getRegion: () => MapKitRegion;
setRegionAnimated: (center: CoordinatesInterface, span?: SpanInterface, animate?: boolean) => void;
getRotation: () => number;
setRotationAnimated: (degrees: number, animate?: boolean) => void;
getCameraDistance: () => number;
setCameraDistanceAnimated: (distance: number, animate?: boolean) => void;
getCameraZoomRange: () => MapKitGetCameraZoomRange;
setCameraZoomRangeAnimated: (minCameraDistance: number, maxCameraDistance: number, animate?: boolean) => void;
getColorScheme: () => SchemeString | string;
setColorScheme: (scheme: SchemeString) => void;
getDistances: () => DistancesString;
setDistances: (distance: DistancesString) => void;
getMapType: () => MapTypeString;
setMapType: (type: MapTypeString) => void;
getPadding: () => PaddingInterface;
setPadding: (padding: PaddingInterface) => void;
getShowsMapTypeControl: () => boolean;
setShowsMapTypeControl: (value: boolean) => void;
getShowsZoomControl: () => boolean;
setShowsZoomControl: (value: boolean) => void;
getShowsUserLocationControl: () => boolean;
setShowsUserLocationControl: (value: boolean) => void;
getShowsPointsOfInterest: () => boolean;
setShowsPointsOfInterest: (value: boolean) => void;
getShowsScale: () => ShowsScaleString;
setShowsScale: (padding: ShowsScaleString) => void;
getTintColor: () => string;
setTintColor: (value: string) => void;
showItems: (items: MapKitItem | MapKitItem[], mapShowItemOptions?: MapShowItemOptionsInterface) => void;
getAnnotations: () => Promise<MapKitAnnotation[]>;
getSelectedAnnotations: () => MapKitGetSelectedAnnotations;
showsCompass: MapKitCompass;
showsMapTypeControl: boolean;
showsZoomControl: boolean;
showsUserLocationControl: boolean;
showsPointsOfInterest: boolean;
tintColor: string;
}
Since I can't really integrate the zoom. But there is a workaround for this.
class NgxAppleMapkitComponent {
// ...
onLoaded(e: MapKitLoaded) {
const map: MapKit.Map = e.map;
map._impl.zoomLevel = 4; // <-- Zoom Level
}
// ...
}
<ngx-apple-mapkit ...>
<ngx-apple-mapkit-annotation
[options]="{title: 'Timo KΓΆhler', subtitle: 'web-timo.de', glyphText: 'π§βπ»', selected: true}"
(onSelect)="onSelect($event)"
(onDeselect)="onDeselect($event)"
[latitude]="51.68"
[longitude]="7.86"
></ngx-apple-mapkit-annotation>
</ngx-apple-mapkit>
Parameter | Typ | Use | Required |
---|---|---|---|
[options] | AnnotationConstructorOptionsInterface | For example, name, subtitle or icon are specified there | β |
[latitude] | number | Latitude | β |
[longitude] | number | Longitude | β |
(onSelect) | (event: any) => void; | This is triggered when the user clicks on the marker | β |
(onDeselect) | (event: any) => void; | This is triggered when the user leaves the marker | β |
<ngx-apple-mapkit ...>
<ngx-apple-mapkit-annotation ...>
<div style="background-color: white; padding: 10px; border-radius: 10px; color: red">
Timo KΓΆhler
</div>
</ngx-apple-mapkit-annotation>
</ngx-apple-mapkit>
From version 0.0.24 you can use typed mapkit.js
.
This makes it much easier for them to find and use functions themselves rather than having to constantly try them out. Thanks to IDE.
import {MapKit, mapkit} from 'ngx-apple-mapkit';
class NgxAppleMapkitComponent {
// ...
onLoaded(e: MapKitLoaded) {
this.map = e;
const map: MapKit.Map = e.map;
const people = [
{
title: "Juan Chavez",
coordinate: new mapkit.Coordinate(37.3349, -122.0090201),
role: "developer",
building: "HQ"
},
{
title: "Anne Johnson",
coordinate: new mapkit.Coordinate(37.722319, -122.434979),
role: "manager",
building: "HQ"
}
];
}
// ...
}
MapKit
: Typed Namespace.
mapkit
: Basically the window.mapkit but with MapKit
Type.
For using api without map you should initialize API using AppleMapsService:
Init mapkit js using AppleMapsService
this.appleMapsService.initialize({
JWT: 'YOUR_TOKEN'
});
Import AppleMapsSearchService
this.appleMapsSearchService.initialize(options);
const result: MapKit.SearchResponse = await this.appleMapsSearchService.searchPromised(query, options);
const result: MapKit.SearchAutocompleteResponse = await this.appleMapsSearchService.autocompletePromised(query, options);
Import AppleMapsGeocoderService
this.appleMapsGeocoderService.initialize(options);
const result: MapKit.GeocoderResponse = await this.appleMapsGeocoderService.reverseLookupPromised(latitude, longitude, options);
Map don't rendering on the server side, all methods unavailable.
Tip: You can use the Native mapkit.js
This is a renewed variant of the ngx-apple-maps. This runs on Angular 16 and Ivy. I personally use the library, and it is therefore regularly maintained.
You can find more information in the original project: github.com/ihor-zinchenko/ngx-apple-maps
As of version ngx-apple-mapkit@0.0.24, more significant changes have been made. This has an impact, please pay attention when replacing or updating!
MapKitLoaded
and directly use mapkitFAQs
This is a renewed variant of the ngx-apple-maps. This runs on Angular 16 and Ivy. I personally use the library and it is therefore regularly maintained.
The npm package ngx-apple-mapkit receives a total of 0 weekly downloads. As such, ngx-apple-mapkit popularity was classified as not popular.
We found that ngx-apple-mapkit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.