Igniteui-angular: How to zoom into IgxGeographicMapComponent

[simonluebker]

Question

I have a question with the zoom functionality of the IgxGeographicMapComponent.
I try to automatic zoom into the map to the actual position of the device.
I store the position into a new IgxGeoGraphicSymbolSeriesComponent with longitude and latitude and some other properties. Then i add the GeoGraphicSymbolSeries to the map by the add() method and tried in the ngAfterViewinit() to auto zoom in by the map.zoomToGeographic(this.actualPosition.getEffectiveViewPort()) method. There is only a single entry in this IgxGeoGraphicSymbolSeriesComponent.
I expected, that the view is now zooming into that position, but it only gets moved a little bit to the right side of the map

Is there such an autozoom functionality or do i have to set the zoom manualy by setting the map.windowRect property?

• igniteui-angular version: 9.0.10
• browser: firefox 77.0.1

[wnvko]

@simonluebker
Here is s StackBlitz sample showing how to zoom to a given region on the map. To do so you should provide a rectangle to zoomToGeographic like this:

this.map.zoomToGeographic({
       left: -6,
       top: 48,
       width: 6,
       height: 10
});

The rectangle consists of:

• left - this is the left edge of the rectangle in geographic coordinates, from 180E (negative) to 180W;
• top - this is the tip edge of the rectangle in geographic coordinates, from 85S (negative) to 85N;
• width and height of the rectangle in degrees.

Check the Navigating Map Content topic for additional information.