CODEWITHSUNDEEP
javascriptangularjsleaflet
Charly
Charly

Reputation: 166

leaflet doesnt load url first time

I have this code for loading a non geographical map inside a get function, to get the map i need everytime :

$scope.tableFloors = data;

//Creamos las dimensiones del mapa e inicializamos la url de la imagen correspondiente al plano
$scope.url = $scope.tableFloors.results[0].idBluePrint;
console.log("url: " + $scope.url);
//INICIALIZACIÓN DE VARIABLES NECESARIAS PARA GENERAR EL MAPA
//zoom mínimo para el mapa
$scope.minZoom = 1;
//zoom máximo para el mapa
$scope.maxZoom = 4;
//posición del centro para el mapa
$scope.center = [0, 0];
//zoom por defecto al cargar el mapa
$scope.zoom = 3;
//sistema de referencia de coordenadas
$scope.crs = L.CRS.Simple;
//atributo para mostrar/ocultar información extra
$scope.attributionControl = false;
$scope.map = L.map('image-map',
{
    minZoom: $scope.minZoom,
    maxZoom: $scope.maxZoom,
    center: $scope.center,
    zoom: $scope.zoom,
    crs: $scope.crs,
    attributionControl: $scope.attributionControl
});

//obtenemos el ancho y el alto de la foto del plano
$scope.fotoPlano = new Image();
$scope.fotoPlano.src = $scope.url;
$scope.width = $scope.fotoPlano.width;
$scope.height = $scope.fotoPlano.height;
// Calculamos los bordes de la imagen en el espacio de coordenadas
$scope.surOeste = $scope.map.unproject([0, $scope.height], $scope.map.getMaxZoom() - 1);
$scope.norEste = $scope.map.unproject([$scope.width, 0], $scope.map.getMaxZoom() - 1);;
$scope.bounds = new L.LatLngBounds($scope.surOeste, $scope.norEste);
// lo añadimos
L.imageOverlay($scope.url, $scope.bounds).addTo($scope.map).bringToFront();
$scope.myIcon = L.icon(
{
    iconUrl: 'assets/images/ic_location.png',
    // iconRetinaUrl: '[email protected]',
    iconSize: [34, 34],
    iconAnchor: [22, 94],
    // popupAnchor: [-3, -76],
    // shadowUrl: 'my-icon-shadow.png',
    // shadowRetinaUrl: '[email protected]',
    // shadowSize: [68, 95],
    // shadowAnchor: [22, 94]
});

// establecemos los límites
$scope.map.setMaxBounds($scope.bounds);
$scope.yx = L.latLng;
$scope.xy = function (x, y)
{
    if (L.Util.isArray(x))
    { // When doing xy([x, y]);
        return $scope.yx(x[1], x[0]);
    }
    return $scope.yx(y, x); // When doing xy(x, y);
};

var puntoIncidencia1 = $scope.xy(100, -40);

var incidencia1 = L.marker(puntoIncidencia1,
{
    icon: $scope.myIcon,
    draggable: true
}).addTo($scope.map).bindPopup('incidencia1');
//version con mapclickevent
$scope.map.on('click',
    function mapClickListen(e)
    {
        var pos = e.latlng;
        console.log("pos: ", this.options);
        console.log('map click event');
        var marker = L.marker(
            pos,
            {
                draggable: true
            }
        );
        marker.on('drag', function (e)
        {
            console.log('marker drag event');
        });
        marker.on('dragstart', function (e)
        {
            console.log('marker dragstart event');
            $scope.map.off('click', mapClickListen);
        });
        marker.on('dragend', function (e)
        {
            console.log('marker dragend event');
            setTimeout(function ()
            {
                $scope.map.on('click', mapClickListen);
            }, 10);
        });
        marker.addTo($scope.map);
    }
);

But the first time i call the function it doesnt load properly the image or if i delete cache the first time called doesnt load it too. It loads properly when i recall the function and after that if i dont delete cache it loads ok all the times, its only the first time it doesnt load properly... why?

Upvotes: 1

Views: 167

Answers (1)

Lakshay Dulani
Lakshay Dulani

Reputation: 1775

Your image doesn't get loaded by the time you are accessing its size.

var imageObj = new Image();
imageObj.addEventListener('load', function() { /* ... */ }, false); 
// use the load event to know that image has been loaded

Proceed when the image has been loaded.

Upvotes: 1

Related Questions