Problem with map zoom

[matteo]

Hello, I'm having some problems with maps.

I get an error when i try to move with mouse on the map

the error is -> TypeError: cannot read property 'features' of null at getTranslate...

What can be the cause of this error?

The html is:

    

<ejs-map id="myMap" #MyMap [zoomSettings]="zoomSettings">

     <e-layers>

          <e-layer [shapeData]="italyMap" ></e-layer>

     <e-layers>

</ejs-map>

the zoomSettings is:

zoomsettings : object = {

     enable: true,

     enablePanning: true, 

     zoomFactor: 5,

     pinchZooming: true, 

     mouseWheelZoom : true

}

shapeData is a file I downloaded from documentation: https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/uploads/user/uploads/Maps_GeoJSON.zip?_ga=2.192339692.793879647.1618209854-221780082.1612770808&_gac=1.45935504.1618218231.EAIaIQobChMIsbPG06z47wIVELh3Ch3Y4QmIEAAYASAAEgJR7fD_BwE

 I performed the injection:

Maps.Inject(Zoom); 

and added ZoomService in module.ts

Thanks

[Swetha Babu]

Hi Matteo,

Thank you for contacting Syncfusion support.

We are not able to reproduce the reported issue. We have created an Angular application by using the Italy map from the mentioned link in the StackBlitz. We have also enabled the zooming feature in the Maps component in the application. Please find the sample link below for your reference.

https://stackblitz.com/edit/angular-waavjz-adkzha?file=app.component.ts 

If you are still facing the reported issue, please modify the above sample to reproduce the reported issue. It will be helpful for us to analyze further and assist you better.

Regards,
Swetha Babu 

[matteo]

I'm going to try, but for zooming options, there is a maximum zoom?

Because I tryed to use the centerPosition with a zoomFactor of 25, and it worked, but if I decrease the zoom I can't re-increase

I tryed to add maxZoom="50" to the ejs-map but it doesn't works.

**

 * Maps default sample

 */

import { Component, ViewEncapsulation, Inject } from '@angular/core';

import {Maps, Zoom } from '@syncfusion/ej2-angular-maps';

import italy from './Italy.json';

Maps.Inject(Zoom);

declare var require: any;

@Component({

    selector: 'app-root',

 template:  ejs-maps id='myMap' [zoomSettings]='zoomSettings' maximumZoom='70'  [centerPosition]="pos"  style="display:block;">

    e-layers>

    e-layer [shapeData]='shapeData'>/e-layer>

    /e-layers>

    /ejs-maps>

    encapsulation: ViewEncapsulation.None

})

export class AppComponent {

    public zoomSettings: object = {

        enable: true,

        enablePanning: true, 

        pinchZooming: true, 

        mouseWheelZoom : true,

        zoomFactor : 30 

    };

    public shapeData: object = italy;

    

pos = { latitude: 45.4398, longitude: 12.3319}

    constructor() {

        

    };

}

(I've removed all tags "<")

Thanks

[Swetha Babu]

Hi Matteo, 

 

Thank you for your update. 

 

When we analyzed the provided code, we came to know that you are using a property named “maximumZoom” which is not available in the Maps control. To set the maximum zoom level as “50” for the Maps, maxZoom property in zoomSettings of ejs-maps must be used. However, we have created a simple Angular application to demonstrate the same. Please find the sample from the below link. 

 

https://stackblitz.com/edit/angular-waavjz-tzt1bu?file=app.component.ts 

 

Please let us know if the above sample meets your requirement. If not, please modify the above sample and share the same to us to reproduce the reported issue. It will be helpful for us to analyze further and assist you better. 

 

Regards, 

Swetha Babu

[matteo]

Thanks, the example worked.

How can I use the

 this.myMap.zoomToCoordinates(45.07, 10.99,46.20,12.33);

method? 

It doesn't zoom to fit the coordinates. The points are very close and I'm expect a very high zoom.

I used @ViewChild('myMap')  myMap : MapsComponent;

ngAfterViewInit(){

  this.myMap.zoomToCoordinates(45.07, 10.99,46.20,12.33);

}

And I have a problem with size:

how can I set the size of the map?

for example I want to give a 100% width and a 100% height?

Thanks a lot

[Swetha Babu]

Hi Matteo, 

 

Thank you for your update. 

 

Please find the details for your queries below. 

 

Query1 : It doesn't zoom to fit the coordinates 

 

When we checked the provided code snippet, we came to know that you have called the zoomToCoordinates() method in the “ngAfterViewInit()” method where the Maps component will not be rendered. We must call the zoomToCoordinates() method after complete render of the Maps component. This method will zoom the map within the provided co-ordinates. So, we need to provide the minimum and the maximum co-ordinates as parameter to zoom with the provided locations. However, we have created an Angular application to demonstrate the same. Please find the sample from the below link. 

 

https://stackblitz.com/edit/angular-waavjz-svfsxs?file=app.component.ts 

 

In the above sample, we have rendered the Italy map with the button “Zoom To Coordinates”. When we click on the button, the map gets zoomed based on the coordinates. 

 

Query 2: I want to set the height and width to 100% 

 

We can set the height and width of the Maps to 100% by using the “height” and “width” property in “ejs-maps” from version 19.1.0.57(we have fixed this in our latest weekly NuGet release). The component will be rendered based on the height and width of the parent element. We have demonstrated the same in the above sample. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Swetha Babu