Wrong map center in iOS

[neumartin]

Hi!

In iOS when I put marker and mapView location, the map does not display centered, but if I move the phone to landscape and rotate again to portrait the map center fine. In Adnroid works fine.

Im using this code:

                mapView.clear();
                var marker = new mapsModule.Marker();
                marker.position = mapsModule.Position.positionFromLatLng(loc.latitude, loc.longitude);
                marker.title = "Mi posición";
                marker.color = "red";
                mapView.addMarker(marker);

                mapView.latitude = loc.latitude;
                mapView.longitude = loc.longitude;
                mapView.settings.zoomGesturesEnabled = false;
                mapView.zoom = 15;

And this is my view:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:maps="nativescript-google-maps-sdk" navigatingTo="onNavigatingTo" loaded="onPageLoaded" class="page" actionBarHidden="true">

    <StackLayout class="" verticalAlignment="top" height="100%">
        <StackLayout class="p-10 action-bar" orientation="horizontal" verticalAlignment="top" height="75">
            <StackLayout>
                <Image src="res://autocorp_notext" height="30" horizontalAlignment="left"></Image>
                <Label text="Tu asistente de movilidad" class="subtitulo-bar" textAlignment="left" />
            </StackLayout>
            <StackLayout style="width: 100%; padding: 0; margin: 0" verticalAlignment="middle" horizontalAlignment="right">
                <Button text="Asistencia" tap="onHelp" horizontalAlignment="right" class="btn btn-help" textWrap="true"/>
            </StackLayout>
        </StackLayout>
        <GridLayout rows="*" height="100%">
            <StackLayout row="0" height="100%">
                <!-- <maps:mapView latitude="-34.6037345" longitude="-58.3837591" zoom="15" mapAnimationsEnabled="true" mapReady="onMapReady" markerSelect="onMarkerSelect" markerBeginDragging="onMarkerBeginDragging" markerEndDragging="onMarkerEndDragging" markerDrag="onMarkerDrag" cameraChanged="onCameraChanged" cameraMove="onCameraMove" /> -->
                <maps:mapView width="100%" height="100%" latitude="-34.6037345" longitude="-58.3837591" zoom="15" mapReady="onMapReady" mapAnimationsEnabled="true" zoomGesturesEnabled="false" myLocationButtonEnabled="false" compassEnabled="false" />
                <!-- <Image src="res://mapa_autocorp" stretch="aspectFill"></Image> -->
            </StackLayout>
            <StackLayout row="0" id="stkCards" backgroundColor="transparent" height="100%" style="padding: 0;margin: 0">
                <StackLayout height="100%" orientation="vertical" backgroundColor="transparent" style="padding-left: 30;padding-right: 30;padding-bottom: 0;padding-top: 30;">
                    <ListView items="{{ noticias }}" height="100%" backgroundColor="transparent" itemTap="onItemTap" loaded="{{ onListViewLoaded }}" id="listView" separatorColor="transparent">
                        <ListView.itemTemplate>
                            <StackLayout>
                                <StackLayout class="card" orientation="horizontal" width="auto" marginTop="{{ TopMargin }}">
                                    <StackLayout width="18%" style="margin-right: 10">
                                        <Image src="res://icono_texto"></Image>
                                    </StackLayout>
                                    <StackLayout width="82%">
                                        <Label text="{{ Date }}" horizontalAlignment="right" class="card-date" />
                                        <Label text="{{ Title }}" horizontalAlignment="left" class="card-titulo" />
                                        <Label text="{{ Text }}" textWrap="true" horizontalAlignment="left" class="card-texto" />
                                        <TextView id="{{ 'txtTexto' + SerNr }}" visibility="{{ !Enviada && DataType == 'A' ? 'visible' : 'collapsed' }}" text="" hint="" autocorrect="false" class="input input-border input-card"></TextView>
                                        <TextField id="{{ 'txtNum' + SerNr }}" visibility="{{ !Enviada && DataType == 'N' ? 'visible' : 'collapsed' }}" text="" hint="" autocorrect="false" class="input input-border input-card" keyboardType="number"></TextField>
                                        <DatePicker id="{{ 'dpk' + SerNr }}" visibility="{{ !Enviada && DataType == 'D' ? 'visible' : 'collapsed' }}"></DatePicker>
                                        <StackLayout orientation="horizontal" horizontalAlignment="right">
                                            <Label text="Enviar" visibility="{{ !Enviada && DataType != '' ? 'visible' : 'collapsed' }}" horizontalAlignment="right" SerNr="{{ SerNr }}" DataType="{{ DataType }}" class="card-enviar" onTap="onTapEnviar" />
                                            <Label text="Descartar" visibility="{{ (Enviada || Mandatory == 0) || DataType == '' ? 'visible' : 'collapsed' }}" horizontalAlignment="right" SerNr="{{ SerNr }}" class="card-descartar" onTap="onTapDescartar" />
                                        </StackLayout>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </ListView.itemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </GridLayout>
    </StackLayout>
</Page>

[3rror404]

I'm also seeing this issue in iOS. The map is positioned with the provided latitude and longitude in the top left corner instead of centred.

[neumartin]

@dapriett @naderio @breningham can you help us with this? Thanks!

[saibbyweb]

Can you post some screenshots?

[neumartin]

Can you post some screenshots?

Simply the center moves up to the left

[neumartin]

Finally I do that:

                if (platform.isIOS) {
                    mapView.latitude = loc.latitude + 0.01;
                    mapView.longitude = loc.longitude - 0.008;
                }
                else {
                    mapView.latitude = loc.latitude;
                    mapView.longitude = loc.longitude;
                }

It's a ugly solution for a basic functionallity.

[saibbyweb]

Okay folks, here's the solution : https://stackoverflow.com/a/54445615/3565182

[Reached]

For anyone coming across this who needs the map to take up the full height of the IOS window, I used @saibbyweb's solution and adapted it slightly, this works and feels instant:

if(platform.isIOS) {
       setTimeout(() => this.mapView.height = {
             unit: '%',
             value: 0.999
         }, 1);
}