Leaflet breaks on load

Question

I am facing issue with leaflet library. When I try to load map, images are loaded more then once. I am using leaflet with angular, grunt and browserify. I suspect it can be because of order of loading libraries and async execution, but I am not sure. There is no js error messages, leaflet just breaks.

This is my grunt file:

var $ = require('jquery');
window.jQuery = $;

//require boostrap.js for bootstrap components
var angular = require('angular');


require('ui.bootstrap');
require('showErrors');

require('leaflet');
require('leaflet-directive');

angular.module('common', [
   require('angular-resource')
]);

var requires = [
    'ngRoute',
    'leaflet-directive',
    'common',
    'ui.bootstrap',
    'ui.bootstrap.showErrors'
];
require('./common');


angular.module('app', requires).config(function($routeProvider) {

    customRouteProvider.when('/common', {templateUrl: 'js/common/1.html'});
    customRouteProvider.otherwise({redirectTo: '/'});
});

Html code:

<div ng-controller="mapController">
    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
</div>

mapController:

module.exports = function ($scope, leafletData) {
    var map = L.map( 'map', {
        center: [20.0, 5.0],
        minZoom: 2,
        zoom: 2
    });

    L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
        subdomains: ['otile1','otile2','otile3','otile4']
    }).addTo( map );
}

But when I execute the code leaflet breaks and my map looks like: enter image description here

I tried also with angular-leaflet-directive with standard and it still breaks. Did anyone face this issue before? Any suggestions?

Yes. The problem was that scss does not support standard @import for css files. — Sanja, Jul 08 '15 at 11:50
What do you mean standard @import? The use of @import should be exception. Just saying. — JasTonAChair, Aug 11 '15 at 10:59
I am using SaSS. Importing css file into sass file is not possible with @import(file_name.css). To achieve that I´ve included library sass-css-importer. — Sanja, Aug 13 '15 at 11:10

score 0 · Answer 1 · answered Jun 19 '19 at 15:43

in your file Html code

test with change style div: height: 80vh;

<div ng-controller="mapController">
   <div id="map" style="height: 80vh; border: 1px solid #AAA;"></div>
</div>

And check the initialization the component life cycle:

Angular 6 is ngOnInit.

Ionic is ionViewDidEnter.

The idea is that booklet loading is done after initialization of the component.

score 0 · Answer 2 · answered Jul 23 '21 at 11:25

0

This problem often occurs due to resizing of any parent container while the map is already initialized.

This my solution in Angular 12 link

answered Jul 23 '21 at 11:25

Jun

103
6

score 0 · Answer 3 · answered Mar 04 '22 at 15:46

0

If you are having this issue on Vue3 you need to import the CSS:

<script>
import "leaflet/dist/leaflet.css";

answered Mar 04 '22 at 15:46

Riza Khan

2,712
4
18
42

Leaflet breaks on load

3 Answers3