Witam wszystkich, pomóżcie znaleźć błąd. Zamieszczam tylko niezbędny kod do zademonstrowania problemu. Strona ma działać tak że jest kilka divów , włączanych klikiem w button za pomocą jquery.
Jeśli dla drugiego diva się da “display:none” (tak jak niżej) to ładuje się kawałek mapy i znacznik który ma się centrować jest w Szwecji 
A wystarczy w kodzie nie dawać display:none i wszystko chodzi. Czyli że włączenie “display” za pomocą jquery to nie to samo to klepnięte z palca ? 
Uprzedzając pytania: Strona musi być tak ułożona że divy są włączane za pomocą jquery i to nie będzie zmieniane.
<!DOCTYPE html>
<html>
<head>
<!--css mapy-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<!--js mapy-->
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<!-- biblioteki jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<meta charset="UTF-8">
<script>
$(document).ready(function(){
$('.S2_wlacz').click(function(){
$("#S1").hide();
$("#S2").show();
});
});
</script>
</head>
<body>
<button class="S2_wlacz">Pokaz mape</button>
<div id="kontener">
<div id="S1"><h1 align="center">Strona 1</h1></div>
<div id="S2" style="display:none" >
<h1>Strona 2</h1>
<div id="map" name="map" style="width:600px; height:600px;"></div>
</div>
</div>
<script>
var map = L.map('map').setView([51, 21],6);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
var marker = L.marker(map.getCenter(),{ draggable: false}).addTo(map);
map.on('drag', function(e) {
marker.setLatLng(map.getCenter());
});
map.on('zoomend', function(e) {
marker.setLatLng(map.getCenter());
});
</script>
</body>
</html>
Po
$("#S1").hide(); /// ? A to tu po co ? To w końcu pokazujemy czy chowamy ?
$("#S2").show();
Dodaj
map.invalidateSize(false); // albo true jeżeli chcemy animacje
Forum osm to nie support Leafleta ;), ale problem jest trywialny. Leaflet ignoruje height i width ustawiony w kontenerze “map” i sam próbuje zgadnąć jaki jest rozmiar tego kontenera. Jako że kontener ma ustawione display:none podczas startu Leafleta, leaflet zgaduje że kontener ma rozmiar 0px na 0px i tak stara się renderować.
Dodanie map.invalidateSize(true); w funkcji onclick przycisku wymusza ponowne przeliczenie rozmiaru kontenera przez lefleta bo de facto po wykonaniu $(“#S2”).show(); rozmiar i sposób wyświetlania kontenera się zmienił, ale leflet nie koniecznie o tym wie.
Oczywiście problem można rozwiązać na kilka innych sposobów ale to chyba już nie na tym forum 
A no i display:none to tylko zmiana sposobu wyświetlania elementu na stronie. Nie ma nic wspólnego z kliknięciem choć oczywiście zmiana może nastąpić w wyniku kliknięcia, ale wcale nie musi.
Bardzo dziękuję za wyczerpującą odpowiedź, wszystko działa !
A co do linijki:
$("#S1").hide(); /// ? A to tu po co ? To w końcu pokazujemy czy chowamy ?
to ja wysłałem tylko malutki kawałek spreparowanej strony na potrzeby tego pytania
i to hide jest do chowania innych divów których tu nie było.
Jeszcze raz wielkie dzięki.
Ale, skoro tu już jestem to może zapytam o coś jeszcze.
Mam też funkcje która powoduje że zjeżdżając myszą z mapy wyskakuje alert
żeby bardziej powiększyć mapę jeśli zoom jest za mały(w celu dokładniejszego określenia pozycji).
Ale chciałbym żeby to działało trochę inaczej, mianowicie żeby cały czas zoom był na bieżąco sprawdzany (map.on(‘zoomend’,…)
i dopóki internauta nie przekroczy jakiegoś stopnia przyzumowania to powinien gdzieś wyświetlać
komunikat np: “przybliż bardziej mapę”. Wszystko jest dla mnie w miarę zrozumiałe ale nie mam pojęcia jak na mapie
wyświetlić jakiś tekst, np przy krawędzi górnej.
map.on('mouseout', function(e) {
var geo=marker.getLatLng();
var geo_lat=geo.lat;
var geo_lat=geo_lat.toFixed(5);
var geo_lon=geo.lng;
var geo_lon=geo_lon.toFixed(5);
//console.log('geo_lon='+ geo_lon + 'geo_lat=' + geo_lat + 'zoom='+map.getZoom());
document.getElementById('geo_lon').value=geo_lon;
document.getElementById('geo_lat').value=geo_lat;
document.getElementById('zoom').value=map.getZoom();
console.log(map.getZoom());
if (map.getZoom()<=15){
alert('Przybliż maksymalnie mapę podając lokalizację');
}
});
var oKontrolka = L.Control.extend({
initialize: function (klasa, options) {
this.klasa = klasa;
L.Util.setOptions(this, options);
},
onAdd: function (map) {
// create the control container with a particular class name
var container = L.DomUtil.create('div', this.klasa);
// ... initialize other DOM elements, add listeners, etc.
container.style.padding="5px";
return container;
}
});
kontrolka = new oKontrolka("nowa-kontrolka", {position: "topright"})
map.addControl(kontrolka);
map.on('mouseout', function(e) {
var geo=marker.getLatLng();
var geo_lat=geo.lat;
var geo_lat=geo_lat.toFixed(5);
var geo_lon=geo.lng;
var geo_lon=geo_lon.toFixed(5);
//console.log('geo_lon='+ geo_lon + 'geo_lat=' + geo_lat + 'zoom='+map.getZoom());
document.getElementById('geo_lon').value=geo_lon;
document.getElementById('geo_lat').value=geo_lat;
document.getElementById('zoom').value=map.getZoom();
console.log(map.getZoom());
if (map.getZoom()<=15){
kontrolka.getContainer().style.backgroundColor = "white";
kontrolka.getContainer().innerHTML = '<span style="color:red; font-size: 20px;">Przybliż maksymalnie mapę podając lokalizację</span>';
//alert('Przybliż maksymalnie mapę podając lokalizację');
} else {
kontrolka.getContainer().style.backgroundColor = "";
kontrolka.getContainer().innerHTML = '';
}
});
W trochę “dziwny” sposób obsługujesz tą całą mapę, ale co mi tam
Konstruuję nowy typ obiektu “oKontrolka”. Jest to div, mający ustawiony padding na “5px”. Klasę ustawiłem na “nowa-kontrolka”, więc w arkuszach stylu można ustawić mu style odwołując się do .nowa-kontrolka i wcale nie trzeba to robić kodem js.
Z konstruktora oKontrolka tworzę obiekt kontrolka, dodaję go do mapy. Zauważ że ustawiłem opcję “position: topright” dzięki czemu pokaże się w prawym górnym rogu mapy.
Dalej masz już zmodyfikowaną funkcje którą wkleiłeś.
Do obiektu/diva dostaję się używając kontrolka.getContainer() a potem już zmieniam podobnie jak w jQuery. Dodałem warunek else czyszczący zawartość kontrolki.
PS. kod zerżnięty z dokumentacji leafleta
Panie Pawle, bardzo dziękuję za pomoc, wszystko działa !