Closed philippfrenzel closed 10 years ago
@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 © <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());
@philippfrenzel ONE BIG ADVICE!
Replace your TileLayer for the one I have gave you as example. You should not use OpenStreetMap tile layer servers!
@philippfrenzel I have seen your code... Just do the following:
$yourLeafLetInstance->appendJs("BlogMap40._onResize()")
If you have issues, try to place some setTimeout there
Thanks so much!
And I'll replace the tile layer!;) what do you think about mapbox?
@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.
Cool!
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