Foros del Web » Programando para Internet » Javascript »

Error al mostrar Mbtiles (JS/LEAFLET)

Estas en el tema de Error al mostrar Mbtiles (JS/LEAFLET) en el foro de Javascript en Foros del Web. Hola, Estoy mostrando un mbtile que esta hosteado en un servidor, el problema que tengo es que el plugin que estoy utilizando no es crossbrowser ...
  #1 (permalink)  
Antiguo 14/09/2015, 11:33
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 701
Antigüedad: 22 años, 10 meses
Puntos: 8
Error al mostrar Mbtiles (JS/LEAFLET)

Hola,
Estoy mostrando un mbtile que esta hosteado en un servidor, el problema que tengo es que el plugin que estoy utilizando no es crossbrowser porque se comporta de manera distinta en IE (funciona ok), FF (desplega las imagenes en forma parcial) y Chrome (funciona ok).

Eso por una parte, pero por otra, al leer el mbtile en forma local, en IE y Chrome no desplega las imagenes, y en FF solo las lee en forma parcial.

El codigo es el siguiente:

Código Javascript:
Ver original
  1. var mbt = MBTiles.load(
  2.   'http://t.tilemap.jp/jcp_maps/shimabara.mbtiles',
  3.   function(me) {
  4.     var centerVal = me.metadata('center').split(",");
  5.     var boundVal  = me.metadata('bounds').split(",");
  6.     var bounds    = new L.LatLngBounds( new L.LatLng(boundVal[1],boundVal[0]), new L.LatLng(boundVal[3],boundVal[2]) );
  7.     console.log(boundVal);
  8.     var MBLayer = L.TileLayer.extend({
  9.       options: {
  10.         minZoom: me.metadata('minzoom'),
  11.         maxZoom: me.metadata('maxzoom'),
  12.         tileSize: 256,
  13.         tms: true,
  14.         errorTileUrl: '',
  15.         attribution: me.metadata('attribution'),
  16.         zoomOffset: 0,
  17.         opacity: 1,
  18.         bounds: bounds,
  19.         continuousWorld: true,
  20.         unloadInvisibleTiles: L.Browser.mobile,
  21.         updateWhenIdle: L.Browser.mobile
  22.       },
  23.       getTileUrl: function (tilePoint) {
  24.         this._adjustTilePoint(tilePoint);
  25.         var tile = me.getTileImage(tilePoint.x, tilePoint.y, this._getZoomForUrl());
  26.         return tile;
  27.       }
  28.     });
  29.    
  30.     var MBLayerObj = new MBLayer('dummy',{tms:true});
  31.     var map = new L.Map('map',
  32.       {
  33.         minZoom: me.metadata('minzoom'),
  34.         maxZoom: me.metadata('maxzoom')
  35.       }
  36.     );
  37.     console.log(me.metadata('minzoom'));
  38.     map.addLayer(MBLayerObj);
  39.     console.log(centerVal);
  40.     //map.setView(new L.LatLng(parseFloat(centerVal[1]),parseFloat(centerVal[0])),parseInt(centerVal[2]));
  41.     map.fitBounds(bounds);
  42.   }
  43. );

Código HTML:
Ver original
  1. <div id="map" ></div>

El ejemplo completo se encuentra en este fiddle:
http://jsfiddle.net/kochizufan/rj4Eh/

Gracias de antemano
__________________
18 laaaaargos años en FDW... y soy de los pocos que ví correr sangre! :X

Etiquetas: mapas, sqlite3
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:13.