map doesn't initialise correct

[philippfrenzel]

Hi, using the widget with only ONE MARKER, the map get's only rendered correct after a "small" resize of the browser in total. I don't know if I should add an additional init call so the maps are rendered correct without the resizing... You can see the effect here:

www.neighbordrop.com

[tonydspaniard]

@philippfrenzel are you rendering the map on a hidden layer? If so, please do this on the map show:

// I render a global variable 
$this->registerJs("var gmap;");

// on my map initialization I do this: geoMap is the ID of the map!!!
$tileLayer = new TileLayer([
    'map' => 'geoMap', // <----- ID OF MAP
    'urlTemplate' => 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
    'clientOptions' => [
        'attribution' => 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> ' .
            '<img src="http://developer.mapquest.com/content/osm/mq_logo.png">, ' .
            'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' .
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        'subdomains' => '1234'
    ]
]);

$leafLet = new LeafLet([
    'tileLayer' => $tileLayer,
    'center' => $center,
    'zoom' => 10,
]);

// append this JS 
$leafLet->appendJs("gmap = geoMap;");

Now you can access the map on your registered script. I had tabs and was a pain... until I've found the solution:

// On the tabs widget I did: 
'clientEvents' => [
        'show.bs.tab' => 'function(e){
            var $tab = $(e.target);
            if($tab.attr("href") == "#location") {
                gmap && gmap._onResize();
            }
        }'
    ]

But after you have access to the map through the variable gmap, you could at the end of your view:

$this->registerJs('gmap && gmap._onResize());

[tonydspaniard]

@philippfrenzel ONE BIG ADVICE!

Replace your TileLayer for the one I have gave you as example. You should not use OpenStreetMap tile layer servers!

[tonydspaniard]

@philippfrenzel I have seen your code... Just do the following:

$yourLeafLetInstance->appendJs("BlogMap40._onResize()")

If you have issues, try to place some setTimeout there

[philippfrenzel]

Thanks so much!

[philippfrenzel]

And I'll replace the tile layer!;) what do you think about mapbox?

[tonydspaniard]

@philippfrenzel is just another tile layer provider which allows you to use customized layers. At the moment, I am using mapquest the free version and if I require something better or more personalized then mapbox is quite cool.

[philippfrenzel]

Cool!