bakelormaplib v0.0.7

Bakelormaplib

This library was generated with Angular CLI version 8.0.3.

How To Use?

Once you installed the library in node_modules:

in your app.module.ts, add:

import { BakelorMapModule } from 'bakelormaplib';

...
imports: [
    ...
    BakelorMapModule,
    ...
]
...

How to Create and Configure Map

<bakelor-map [containerId]="'map'"></bakelor-map>

containerId must be provided to initialize the map on the screen.

Available options for the map:

Base Map Options

• containerId: string (id of the map container)
• width: number (to set width of the map container in %)
• height: number (to set height of the map container in px)
• crs: string (to set CRS of the map)
• attributionControl: boolean (to show/hide attribution text)
• dragging: boolean (to enable/disable dragging property of the map)
• center: number[] (to set the center of the map)
• zoom: number (to set the zoom level of the map)
• maxZoom: number (to set maximum zoom level of the map)
• minZoom: number (to set minimum zoom level of the map)
• maxNativeZoom: number (to set max native zoom level of given tile set)
• tile: string (to set tile layer of the map)

Overlay Tile Options

• overlayTiles: string[] (to insert additional tile sets to the map)
• overlayMinZoom: number (to set minimum zoom level of additional tile sets)
• overlayMaxZoom: number (to set maximum zoom level of additional tile sets)
• bounds: L.LatLngBounds (to set bounds of additional tile sets)

UI Layer Options

• circles: L.Circle | L.Circle[] (to init map with circles)
• markers: L.Marker | L.Marker[] (to init map with markers)
• polylines: L.Polyline | L.Polyline[] (to init map with polylines)
• polygons: L.Polygon | L.Polygon[] (to init map with polygons)

Examples

Example 1:

in your template, add;

<bakelor-map [containerId]="'map'"></bakelor-map>

This will initialize the map with default values without any UI layers on it.

Example 2:

in your template, add;

<bakelor-map [containerId]="'map'" 
             [tile]="'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'"
             [center]="[41.006506,29.246758]"
             [zoom]="18" [maxZoom]="22" [maxNativeZoom]="18" [minZoom]="2"
             [circles]="circles"
             [markers]="marker">
</bakelor-map>

Example circles and marker object:

var circles = [
                 L.circle([41.006506, 29.246758], { radius: 10, color: 'red' }),
                 L.circle([41.006506, 29.246758], { radius: 25, color: 'green' })
              ];

var marker = L.marker(
                        [41.006506, 29.246758], 
                        {
                          icon: L.icon({
                             iconSize: [25, 41],
                             iconAnchor: [13, 41],
                             iconUrl: 'leaflet/marker-icon.png',
                             shadowUrl: 'leaflet/marker-shadow.png'
                          })
                        });

This will initialize the map with given configurations and 2 circles and 1 marker on the center of the map.

Example 3: Adding Overlay Tiles for Indoor Mapping

in your template, add;

<bakelor-map [containerId]="'map'" 
             [tile]="'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'"
             [center]="[41.006506,29.246758]"
             [zoom]="18" [maxZoom]="22" [maxNativeZoom]="18" [minZoom]="2"
             [overlayTiles]="['assets/0/{z}/{x}/{y}.png', 'assets/1/{z}/{x}/{y}.png']"
             [bounds]="exampleBounds" [overlayMinZoom]="20" [overlayMaxZoom]="24">
</bakelor-map>

You can provide more than one tile sets for each floor

Adding overlayTiles to your map will generate auto controls to navigate between floors.

Example bounds object:

var exampleBounds= L.latLngBounds(
                     L.latLng(41.00627027, 29.24744324),
                     L.latLng(4100644117, 29.24764159)
                   );

Using BakelorMapService

Properties

• map (The instance of recently added map)
• maps (All map instances on the screen)

Methods

• addItem(itemToBeAdded, map)
• removeItem(itemToBeRemoved, map?)

Example

In your component.ts;

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { BakelorMapService } from 'bakelormaplib';
import * as L from 'leaflet';

@Component({ selector: 'app-example', templateUrl: './example.component.html' }) export class ExampleComponent implements OnInit, AfterViewInit {

map: L.Map; exampleCircle: L.Circle;

constructor(private bakelorMapService: BakelorMapService){ }

ngOnInit(){ this.exampleCircle = L.circle(41.006506, 29.246758, { radius: 50, color: 'blue'}); }

ngAfterViewInit(){ //To get the instance of recently added map this.map = this.bakelorMapService.map;

 //To add item to the given map
 this.bakelorMapService.addItem(this.exampleCircle, this.map);

 //You can use all leaflet methods
 this.exampleCircle.setRadius(30);

}

removeExampleCircle(){
//if not map instance provided, service searches the //given item in all map instances and removes if exists this.bakelorMapService.removeItem(this.exampleCircle); } }

> _In your template;_

```html
<bakelor-map [containerId]="'map'" 
             [tile]="'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'"
             [center]="[41.006506,29.246758]"
             [zoom]="18" [maxZoom]="22" [maxNativeZoom]="18" [minZoom]="2">
</bakelor-map>

<button type="button" (click)="removeExampleCircle()">Remove Example Circle</button>