Scroll to an x,y coordinate on my webView using typeScript

Question

I am making a custom map in my application. Which is essentially a large map image where I move a small avatar image over the large map image based on a gps location.

I allow the user to scroll around the map to look at places off the screen.

I now want to include a button which will center the user back on their location. but it is not working, I have tried using:

  window.moveTo()
  window.scrollTo()

but nothing happens. Can anyone assist with this?

html

 <ion-content padding id=ionScroll scrollX="true" scrollY="true">

  <div id = "main" >
    <img class = "map"
    id = "map"
    src = "../../assets/img/limerickmap.JPG"
    alt = "map"/> 
    <img class = "avatar"
    id = "avatar"
    src = "../../assets/img/satan.png"
    alt = "avatar" />
  </div>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click) = "centreMap()">
      <ion-icon name="compass"></ion-icon>
    </ion-fab-button>
  </ion-fab>

   </ion-content>

Typescript

 ngOnInit() {
      ionScroll = window.document.getElementById("ionScroll");
 }

 centreMap() {
     ionScroll.scrollTo(avatar.style.left , avatar.style.top);
     console.log("TEST scroll" +avatar.style.left+"  "+avatar.style.top)
 }

score 0 · Accepted Answer · answered Jul 02 '19 at 05:42

Trying to set the id isn't the right way I don't think.

Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.

First, you need scrollEvents on the ion-content:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ion Content Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true">
  <div style="height: 50px;width:600px;" text-right>
    <ion-button (click)="ScrollToPoint(-300, -120)">
      Scroll To Point Right
    </ion-button>
  </div>
</ion-content>

In the code you need to use a @ViewChild to get a code reference to the ion-content then you can use its ScrollToPoint() api:

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild(IonContent) content: IonContent;

  constructor(
  ){
  }

  ScrollToPoint(X,Y){
    this.content.scrollToPoint(X,Y,1500);
  }
}

I've simplified the article so you will need to put some content in that adds scrollbars to the page if you want this to actually work.

Scroll to an x,y coordinate on my webView using typeScript

1 Answers1

Linked