'Fullscreen' does not exist on type 'typeof Control'
jlaverdure-talis opened this issue · 6 comments
Hello,
Working on Angular 6 (typescript), I encounter an issue where I can't install the leaflet-fullscreen properly.
I followed the process :
- npm i leaflet-fullscreen --save
(as given when you click on "Used by" on Github. Also tested with leaflet.fullscreen) - Added the scripts import in the index.html part
- Added the import statement in the component
- Tried the three methods of use, preferably the new L.Control.Fullscreen() (nothing is recognized).
I get this error message from my IDE and from a ng serve command, as if the plugin didn't install :
this.mymap.addControl(new L.Control.Fullscreen());
==> TS2339: Property 'Fullscreen' does not exist on type 'typeof Control'.
Do you know where this problem comes from?
Here is my call in component file where I display my map :
import * as L from 'leaflet';
import 'leaflet-fullscreen'; // Also tested direct path
...
this.mymap = L.map('mymap',{layers: [mapToDisplay, LayerGroupMarkers ]}).setView([0, 0], this.zoom);
this.mymap.addControl(new L.Control.Fullscreen());
Here is my call in index.html file :
< link href='../node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css' rel='stylesheet' />
< script src='../node_modules/leaflet-fullscreen/dist/Leaflet.fullscreen.min.js'></script>
Here is my package.json :
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0",
"@angular/animations": "^6.1.9",
"@angular/cdk": "^7.0.0-rc.0",
"@angular/cli": "^6.2.4",
"@angular/common": "6.1.9",
"@angular/compiler": "6.1.9",
"@angular/compiler-cli": "6.1.9",
"@angular/core": "6.1.9",
"@angular/forms": "6.1.9",
"@angular/http": "6.1.9",
"@angular/language-service": "6.1.9",
"@angular/material": "^7.0.0-rc.0",
"@angular/platform-browser": "6.1.9",
"@angular/platform-browser-dynamic": "6.1.9",
"@angular/router": "6.1.9",
"@angular/tsc-wrapped": "^4.3.3",
"@ng-bootstrap/ng-bootstrap": "^2.2.2",
"@ngtools/json-schema": "^1.1.0",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@types/hammerjs": "^2.0.36",
"@types/leaflet": "^1.2.11",
"angular-calendar": "^0.26.1",
"awesome-typescript-loader": "^5.2.1",
"codelyzer": "^4.5.0",
"firebase": "^5.5.3",
"jspdf": "^1.4.1",
"jspdf-autotable": "^2.3.5",
"ng2-tree": "^2.0.0-rc.11",
"ngx-cookie": "^4.0.1",
"ngx-toastr": "^9.1.0",
"protractor": "^5.4.1",
"rxjs": "^6.3.3",
"tslint": "^5.11.0",
"typescript": "^2.9.2",
"uglifyjs-webpack-plugin": "^2.0.1"
},
"dependencies": {
"@types/leaflet.markercluster": "^1.0.3",
"@types/node": "^8.0.0",
"angular": "^1.6.7",
"angular-bootstrap-md": "^6.2.6",
"angular-font-awesome": "^3.1.2",
"angular2-cookie-law": "^6.0.4",
"angular2-csv": "^0.2.9",
"angular5-data-table": "^1.0.3",
"async-listener": "^0.6.9",
"bootstrap": "^4.1.3",
"chart.js": "^2.7.3",
"continuation-local-storage": "^3.2.1",
"date-fns": "^1.29.0",
"font-awesome": "^4.7.0",
"leaflet": "^1.5.1",
"leaflet-control-geocoder": "^1.6.0",
"leaflet-easyprint": "^2.1.9",
"leaflet-fullscreen": "^1.0.2",
"leaflet.markercluster": "^1.4.1",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"ng-material-multilevel-menu": "^4.0.8",
"ng-pick-daterange": "^1.0.0",
"ng2-file-upload": "^1.3.0",
"ngx-cookie-service": "^1.0.10",
"ngx-gallery": "^5.6.2",
"ngx-mat-select-search": "^1.4.2",
"rxjs-compat": "^6.3.3",
"zone.js": "^0.8.26"
}
Hello @jlaverdure-talis Doesn't work for me too, I'm using leaflet with Angular 7 and I had followed the same steps. did you find any solution ?
Hello @skn-hyn ,
I didn't find any solution, I tried multiple actions of reinstalling, version revising, import call changes, nothing does actually works. I put this function in stand-by, waiting for some support.
If you find any clue, I'd be interested to know where the problem came from for you.
Anyone has a solution to propose?
Hi @jlaverdure-talis,
it's solved for me..
I used this https://github.com/brunob/leaflet.fullscreen,
I downloaded it,
I added it to my project repository (assets folder),
then I imported the .js file like this : import 'assets/leaflet-fullscreen/Control.FullScreen.js';
and I added the control fullscreen to my map using this :
L.control.fullscreen({ position: 'bottomright', title: 'Plein écran', titleCancel: 'Quitter le mode plein écran', content: null }).addTo(map);
Hope this can help you !
Hi @skn-hyn,
Thanks for your answer, I will give it a try in the few next days, I'll come back to say if it works.
Thank you Paul for this solution, that's the solution that worked for me :
"I did this fully in TS and angular using the following code
import { Component, OnInit, Input } from '@angular/core';
import {Map, control} from 'leaflet';
import * as L from 'leaflet';
import '../../../node_modules/leaflet.fullscreen/Control.FullScreen.js';
declare module 'leaflet' {
namespace control {
function fullscreen(v: any): Control;
}
}
selector: 'app-fullscreen-control',
template: '',
styleUrls: ['./fullscreen-control.component.css']
})
export class FullscreenControlComponent implements OnInit {
private _map: Map;
constructor() { }
ngOnInit() {
}
@input() set map(map: Map){
this._map = map;
control.fullscreen({
position: 'topleft',
title: 'View Fullscreen',
titleCancel: 'Exit Fullscreen',
}).addTo(map);
map.on('enterFullscreen', () => map.invalidateSize());
map.on('exitFullscreen', () => map.invalidateSize());
}
get map(): Map {
return this._map
}
}`
You have to pass in the map object when it has finished drawing - which I do {using ngx-leaflet} using the onMapReady event to change an input parameter on the control's directive 👍
onMapReady(map: Map) {
this.map = map;
}
and
<app-fullscreen-control [map]="map">"
I actually pulled the comment back because there was a typo - but you obviously worked around that :)
I went ahead and created an npm package to do this - look at https://github.com/runette/ngx-leaflet-fullscreen