I added the viewport with properties allowing zooming/scaling. And I added these to the native code:
WebSettings settings = super.appView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(true);
settings.setSupportZoom(true);
I am able to zoom, but along with my view, ion-header-bar
and ion-nav-bar
gets zoomed. I tried giving the header css, to keep it fixed:
position: fixed;
top: 0px;
left: 0px;
but still, it'd get zoomed.
My index.html has an ion-header-bar
, which contains an image.
The templates go into
<ion-nav-view class="has-header"></ion-nav-view>
The template in which I require zooming in a particular div is having a 'ion-view` and it looks like:
<ion-view>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="right">
icon1
</ion-nav-buttons>
<ion-nav-buttons side="left">
icon2
</ion-nav-buttons>
</ion-nav-bar>
<div>
Multiple divs in here, which are containers for html and css data we receive via AJAX requests. And this is here I need zooming in.
</div>
</ion-view>
PS: Would it matter if I add a full HTML code(with meta viewport, no header, but body and divs) inside the ion-view
?
I wanted to get similar functionality and was able to get it to work using ion-scroll.
<ion-scroll zooming="true" direction="xy" style="width: 100%; ">
<div></div>
</ion-scroll>
Thanks to @laughinpine above, I came up with this solution in Ionic 4:
<ion-content scrollX scrollY>
<div #map style="background-image: url('/assets/images/map.png');">
</div>
</ion-content>
import * as Hammer from 'hammerjs';
@Component({
...
})
export class MapPage
@ViewChild('map') public map: ElementRef;
private readonly minZoom: number = 0.3;
private readonly maxZoom: number = 2.0;
private readonly zoomVelocity: number = 0.005;
public constructor(private renderer: Renderer2) {}
private addPinchToMap(): void {
const hammerTime = new Hammer.Manager(this.map.nativeElement, { touchAction: 'pan-x pan-y' });
const pinch = new Hammer.Pinch();
let lastZoom: number = 1; // Default original zoom
hammerTime.add(pinch);
hammerTime.on('pinchin', (event: MSGestureEvent) => {
let newZoom = lastZoom - this.zoomVelocity;
newZoom = newZoom < this.minZoom ? this.minZoom : newZoom;
this.renderer.setStyle(this.map.nativeElement, 'zoom', newZoom);
lastZoom = newZoom;
});
hammerTime.on('pinchout', (event: MSGestureEvent) => {
let newZoom = lastZoom + this.zoomVelocity;
newZoom = newZoom > this.maxZoom ? this.maxZoom : newZoom;
this.renderer.setStyle(this.map.nativeElement, 'zoom', newZoom);
lastZoom = newZoom;
});
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With