CODEWITHSUNDEEP
angularleaflet
ttmt
ttmt

Reputation: 4984

Leaflet js - position map relative to browser window

I have a plunker here - https://plnkr.co/edit/lsx38RaBgv3PlClPimyu?p=preview

It's a leaflet js map in Angular 4

I have buttons to re position the map to print it and reset the map to the starting position.

The print button respositions the map so I can print the UK

The positioning is done with center which sets the lat and long on the map as the center.

This works but shows a different part of the map if the browser window is a different size.

If the browser window is smaller it cuts off the UK which is what I want to print.

I know of the print plugin but I have other things I want to print from the page

Is is possible to position the lat long a set distance from the top left of the browser window.

    import {Component,HostListener, OnInit} from "@angular/core";

    declare let L: any;

    @Component({
      selector: 'map',
      templateUrl: './src/map.html'
    })

    export class MapComponent implements OnInit {

        smallScreen: number = 600;
      center: any = [54, -5];
      zoom: number = 6;

      centerSmall: any = [50, 10];
      zoomSmall: number = 5;

      private atMap: any;

        constructor() { }

        ngOnInit() {
            setTimeout(() => {
                this.initialiseMap(this.center, this.zoom);
            }, 1000)
        }

        private initialiseMap(center:any, zoom:number) {

        if(this.atMap != undefined || this.atMap != null){
          this.atMap.off();
          this.atMap.remove();  
        }  

            this.atMap = L.map('mapid',{
                center: center,
                zoomControl: false,
                zoom: zoom
            });

            this.atMap.options.maxZoom = 15;
            this.atMap.options.minZoom = 5;

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
        }).addTo(this.atMap);


            L.control.zoom({

Upvotes: 0

Views: 1012

Answers (2)

JRI
JRI

Reputation: 1942

I realise that this doesn't directly answer your question, but why not try setting a bounding box around the UK, then fitting the map to it using the .fitBounds() method:

const uk = new L.LatLngBounds([[49,-9.5],[62,2.3]]);
this.atMap.fitBounds(uk);

This should pan and zoom the map to make the whole of the UK visible, whatever the shape and size of the browser window. It wouldn't guarantee that the centre was a fixed distance from the corner of the window, but you can tweak the bounds to give you sufficient border around the area you want.

Upvotes: 2

user4676340
user4676340

Reputation:

I happen to work on leaflet, and here is my code for initializing a map that will be centered on a point no matter the window size (I'm sure you will adapt this code to your needs) : 

  private initializeMap() {
    // Place the container at the center of France
    const x: L.LatLng = new L.LatLng(47.212105775622426, 2.3291015625000004);

    // Move the zoom buttons on the right (the left is used for research purposes)
    this.leafletMap = L.map(this.map.nativeElement, { zoomControl: false }).setView(x, 6);
    L.control.zoom({ position: 'topright' }).addTo(this.leafletMap);

    // Add a tile layer to the map 
    this.addLayer();
  }

  private addLayer() {
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      // tslint:disable-next-line:max-line-length
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox.streets',
      accessToken: environment.mapBoxToken
    }).addTo(this.leafletMap);

  }

Upvotes: 0

Related Questions