<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.github

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

ok <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Mapa cortado cuando cambio la orientación del celular.,about telerik-verified-plugins/mapbox

Comments (6)

risinghero commented on July 18, 2024

Hi @mauricioLopezRamirez. Unfortunately I understand Spanish only with Google translate. But I hope that you understand English. Add orientation cordova plugin. Subscribe to orientation change event and recreate map. Like this (I haven't tested):
screen.orientation.addEventListener('change', function(){ Mapbox.hide(); Mapbox.show(yourOptions); });

from mapbox.

mauricioLopezRamirez commented on July 18, 2024

@risinghero gracias por tu respuesta, lo e hecho sin plugin, solo utilice javascript lo cual detecta el cambio de orientación pero no ha funcionado el siguiente código. Que otra opción propones:

  window.addEventListener("orientationchange", function() {

Mapbox.hide();
showMap();

});

from mapbox.

risinghero commented on July 18, 2024

@mauricioLopezRamirez please check with debugger that event "orientationchange" works. There can be some problems with it.

from mapbox.

mauricioLopezRamirez commented on July 18, 2024

@risinghero si funciona, e puesto un alert para que me verifique que si se cambio de orientación y si cambia.

from mapbox.

risinghero commented on July 18, 2024

@mauricioLopezRamirez to further help you I need simple example reproducing this issue. Can you create one? Just Map+subscription to event so i can test it on my pc.

from mapbox.

mauricioLopezRamirez commented on July 18, 2024

ok @risinghero este es mi codigo del index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript" src="cordova.js"></script>
   

  </head>
  <body onload="onLoad()">

  
<script>
  function onLoad() {

     document.addEventListener("deviceready", onDeviceReady, false);

 }

 function onDeviceReady() {
    showMap();
 }


  var zoom = 12;


  function setTilt() {
    Mapbox.setTilt({
      pitch: 45,
      duration: 4500
    });
  }


 window.addEventListener("orientationchange", function() {

Mapbox.hide();
showMap();

});

  function showMap() {

    Mapbox.show({
              style: 'emerald',
              margins: {
                'left': 0,
                'right': 0,
                'top': 0,
                'bottom': 0
              },
              center: {
                
                lat: 3.4210196,
                lng: -76.5201787
              },
              zoomLevel: zoom, // 0 (the entire world) to 20, default 10
              showUserLocation: true, // default false
              hideAttribution: true, // default false
              hideLogo: true, // default false
              hideCompass: false, // default false
              disableRotation: false, // default false
              disableScroll: false, // default false
              disableTilt: false, // default false
              disableZoom: false, // default false
              disablePitch: false, // default false
              markers: [
                {  
                  'lat': 3.4356455,
                  'lng': -76.5281464,
                  'title': 'CALLE 13 CON CARRERA 23',
                  'subtitle': 'Sentido: SUR-NORTE\nZona: CENTRO'
                }
              ]
            },
            function (result) {
              console.log(JSON.stringify(result));
              // let's add a callback for these markers - invoked when the callout is tapped (Android) or the (i) icon in the marker callout (iOS)
              Mapbox.addMarkerCallback(function (selectedMarker) {
               // alert("Marker selected: " + JSON.stringify(selectedMarker));
              });
              // let's add callbacks for region changing
              //
              // - invoked when the map is about to moved (animated or not).
              Mapbox.onRegionWillChange(function(centerCoordinates) {
                console.log("Map will move from: ", centerCoordinates);
              });
              // - invoked at each tick (so 60 per second) when the map moves. So don't do any heavy computing here.
              Mapbox.onRegionIsChanging(function(centerCoordinates){
                console.log("New map center is: ", centerCoordinates);
              });
              // - invoked after the map has moved (animated or not).
              Mapbox.onRegionDidChange(function(centerCoordinates) {
                console.log("Map as finished to move to : ", centerCoordinates);
              });
            },
            function (error) {
              alert(error);
            }
    )
  }

</script>

  </body>
</html>

from mapbox.

Mapa cortado cuando cambio la orientación del celular. about mapbox HOT 6 OPEN

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent