Angular Leaflet Map - Examples

00-examples

1.- Basic:
https://stackblitz.com/edit/angular-leaflet-map-basic?file=src%2Fapp%2Fapp.component.ts
2.- Basic + Custom Size
https://stackblitz.com/edit/angular-leaflet-map-basic-custom-size?file=src%2Fapp%2Fapp.component.html
3.- Set Map Center: 
https://stackblitz.com/edit/angular-leaflet-map-basic-set-center-position?file=src%2Fapp%2Fapp.component.ts
4.- Zoom Controls - Positions / In out titles
https://stackblitz.com/edit/angular-leaflet-zoom-positions-titles?file=src%2Fapp%2Fapp.component.ts
5.- Zoom Level
https://stackblitz.com/edit/angular-leaflet-zoom-levels?file=src%2Fapp%2Fapp.component.ts
6.- Marker Basic and fitBounds
https://stackblitz.com/edit/angular-leaflet-map-with-marker?file=src%2Fapp%2Fapp.component.ts
7.- Markers and fitBounds
https://stackblitz.com/edit/angular-leaflet-map-with-markers?file=src%2Fapp%2Fapp.component.ts
8.- Random Markers with default zoom and Fit Bounds
https://stackblitz.com/edit/angular-leaflet-map-random-markers?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
9.- Random Markers with differents zoom levels and Fit Bounds
https://stackblitz.com/edit/angular-leaflet-zoom-levels-random-markers?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
10.- Base Layers
https://stackblitz.com/edit/angular-leaflet-map-random-markers-tmqbap?file=src%2Fapp%2Fapp.component.ts
11.- Base / Over Layers
https://stackblitz.com/edit/angular-leaflet-map-base-over-layers?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
12.- Base / Over Layers with select default base and active overlayers
https://stackblitz.com/edit/angular-leaflet-map-base-over-layers-default?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
13.- Scale Control position
https://stackblitz.com/edit/angular-leaflet-scale-positions-titles?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
14.- Scale - Units Only Show and Max witdh control
https://stackblitz.com/edit/angular-leaflet-scale-units-max-width?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
15.- Watermark - Control position 
https://stackblitz.com/edit/angular-leaflet-scale-positions-titles-jkmxjy?file=src%2Fapp%2Fapp.component.ts
16.- Watermark - Image change and differents sizes

2x - Global configurations
https://stackblitz.com/edit/angular-leaflet-map-basic-dflpbc?file=src%2Fapp%2Fapp.component.ts

app-01-2.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
}

app-03.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    center: [27.9881, 86.9253], // [lat, lng]
    zoom: {
      default: 15
    }
  }
}

app-04.component.ts

 import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    zoom: {
      position: 'topright',       // 'topright', 'topleft', 'bottomleft', 'bottomright'
      zoomInTitle: 'Acercar',     // Mouse hover value "+" with title
      zoomOutTitle: 'Alejar',     // Mouse hover value "-" with title
      default: 8                  // Values between 4 and 20
    }
  }
}

app-05.component.ts

 import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true
  }
}

app-06.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true
  }
  marker = [{'lat': 43.1824528, 'lng': -2.3878554}]
}

app-07.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true
  }
  markers =  [
    {
      "lat": 43.17757110078426,
      "lng": -2.3661233885984085
    },
    {
      "lat": 43.177781697765305,
      "lng": -2.367583962060063
    },
    {
      "lat": 43.1765773404203,
      "lng": -2.409942167562859
    }
  ];
}

app-08.components.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true
  }
  randomMarkers = true;
}

app-09.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    fitBounds: true
  }
  markers =  [
    {
      "lat": 43.17757110078426,
      "lng": -2.3661233885984085
    },
    {
      "lat": 43.177781697765305,
      "lng": -2.367583962060063
    }
  ];
}

app-10.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    layers: {
      baseLayers: [
        {
          label: 'Default',
          map: tileLayers.baseLayers.default.map,
          atribution: tileLayers.baseLayers.default.atribution,
          default: true // <=== To show with this selection
        },
        {
          label: 'CycloOSM',
          map: tileLayers.baseLayers.cycloOsm.map,
          atribution: tileLayers.baseLayers.cycloOsm.atribution
        },
        {
          label: 'OSMHot',
          map: tileLayers.baseLayers.osmHot.map,
          atribution: tileLayers.baseLayers.osmHot.atribution
        },
        {
          label: 'OSMManik',
          map: tileLayers.baseLayers.osmManik.map,
          atribution: tileLayers.baseLayers.osmManik.atribution
        }],
      
    },
  }

}

app-11.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    layers: {
      baseLayers: [
        {
          label: 'Default',
          map: tileLayers.baseLayers.default.map,
          atribution: tileLayers.baseLayers.default.atribution,
          default: true // <=== To show with this selection
        },
        {
          label: 'CycloOSM',
          map: tileLayers.baseLayers.cycloOsm.map,
          atribution: tileLayers.baseLayers.cycloOsm.atribution
        },
        {
          label: 'OSMHot',
          map: tileLayers.baseLayers.osmHot.map,
          atribution: tileLayers.baseLayers.osmHot.atribution
        },
        {
          label: 'OSMManik',
          map: tileLayers.baseLayers.osmManik.map,
          atribution: tileLayers.baseLayers.osmManik.atribution
        }],
      overLayers: [{
        label: 'Trail / Hiking',
        map: tileLayers.overlayers.wayMarkedTrails.hiking,
        select: false
      },
      {
        label: 'Open Railway',
        map: tileLayers.overlayers.openRailway,
        select: false
      }]
    },
  }

}

app-12.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    layers: {
      baseLayers: [
        {
          label: 'Default',
          map: tileLayers.baseLayers.default.map,
          atribution: tileLayers.baseLayers.default.atribution
        },
        {
          label: 'CycloOSM',
          map: tileLayers.baseLayers.cycloOsm.map,
          atribution: tileLayers.baseLayers.cycloOsm.atribution,
          default: true // <=== To show with this selection
        },
        {
          label: 'OSMHot',
          map: tileLayers.baseLayers.osmHot.map,
          atribution: tileLayers.baseLayers.osmHot.atribution
        },
        {
          label: 'OSMManik',
          map: tileLayers.baseLayers.osmManik.map,
          atribution: tileLayers.baseLayers.osmManik.atribution
        }],
      overLayers: [{
        label: 'Trail / Hiking',
        map: tileLayers.overlayers.wayMarkedTrails.hiking,
        select: true
      },
      {
        label: 'Open Railway',
        map: tileLayers.overlayers.openRailway,
        select: true
      }]
    },
  }

}

app-13.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    scale: {
      position: 'bottomright'
    }
  }
}

app-14.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    scale: {
      show: true
    }
  }
}

app-15.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    scale: {
      imperial: false
      // metric / imperial for default is true
    }
  }
}

app-16.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    scale: {
      metric: false
      // metric / imperial for default is true
    }
  }
}

app-17.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    scale: {
      maxWidth: 500// For default value: 100px, suggest values 100, 250, 400, 500
    }
  }
}

app-18.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    watermark: {
      show: true
    }
  }
}

app-19.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    watermark: {
      position: 'bottomright' // 'topright', 'bottomleft','topleft'
    }
  }
}

app-20.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    watermark: {
      // Logotip de Angular
      img: 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/21_Angular_logo_logos-128.png'
    }
  }
}

app-21.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    watermark: {
      // Logotip de Angular
      img: 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/21_Angular_logo_logos-128.png',
      border: true
    }
  }
}

app-22.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    watermark: {
      // Logotip de Angular
      img: 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/21_Angular_logo_logos-128.png',
      border: true,
      size: '100px'
    }
  }
}

app-23.component.ts

export class AppComponent {
  title = 'angular-leaflet';
  configMap: IConfigMap = {
    fullscreen: true,
    watermark: {
      // Logotipo de Angular
      img: 'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/21_Angular_logo_logos-128.png',
      border: true,
      size: '100px',
      borderColor: 'red' // Use <color-name> / rgb / rgba / hexadecimal / hsl / hsla
    }
  }
}

app.component.html

<!--1.- Basic example. Load map with default layer and take 100% width and 600px height-->
<alm-map></alm-map>
<!--=====================================-->

<!--2.- Show map with custom size with 1100px width and height 450px-->
<alm-map [size]="{ width: '1100px', height: '450px' }" ></alm-map>
<!--=====================================-->

<!-- 3.- Set center location map with desired ocation coordinates -->
<!-- 4.- Zoom controls configurations-->
<!-- 5.- Fullscreen button available-->
<alm-map [config]="configMap"></alm-map>

<!--6.- One marker add wuth full screen-->
<alm-map [config]="configMap" [markers]="marker"></alm-map>
<!--7.- Many markers-->
<alm-map [config]="configMap" [markers]="markers"></alm-map>
<!--8.- Random markers-->
<alm-map [config]="configMap" [randomMarkers] = true></alm-map>
<!--9.- FItbounds with many markers-->
<alm-map [config]="configMap" [markers]= "markers"></alm-map>


<!--10.- Base Layers -->
<!--11.- Base and Over Layers -->
<!--12.- Base and OverLayers with select overlayers-->
<alm-map [config]="configMap"></alm-map>

<!--13.- Scale control - Imperial / Metric / Bottom Right-->
<!--14.- Scale control - Imperial / Metric -->
<!--15.- Scale control - Metric -->
<!--16.- Scale control - Imperial -->
<!--17.- Scale control - Max Width -->
<alm-map [config]="configMap"></alm-map>

<!--18.- Control Watermark - Show with default options-->
<!--19.- Control Watermark - Select position - Default 'bottomleft', check with other options: 'topright', 'bottomright','topleft'-->
<!--20.- Control Watermark - Select image - Default 'logo "A"'-->
<!--21.- Control Watermark - Show border bottom - Default "false", add true-->
<!--22.- Control Watermark - Image Size: 60px for default-->
<!--23.- Control Watermark - borderColor: Default: '#506bff'-->
<alm-map [config]="configMap"></alm-map>