Edycja mapy LeafLet

Communities Polska (Poland)
1

Mam problem, ponieważ chcę zrobić iż po kliknięciu na dany link na stronie (czy też po kliknięciu na marker), mapa zwiększa zoom na dane miejsce i ustawia się na środku tego miejsca (czyli to co się dzieje po dwukliku na mapę) i mam taką funkcję:

function zmiana()
{
document.getElementById("map").style.height="600px";
document.getElementById("map").style.width="80%";

document.getElementById('opisPunktu').innerHTML="text";
document.getElementById('opisPunktu').innerHTML="text";
}

I próbuję wklepać tutaj coś z tego: http://leaflet.cloudmade.com/reference.html#map-set-methods

ale nic nie działa, co robię źle?

2

Najpierw tworzysz sobie mapę w skrypcie JS:

var map = new L.Map(...);

Potem w kodzie skaczesz do miejsca:

<p onclick="map.setView(new L.LatLng(53.0250921, 18.6386737), 17)">skocz do miejsca</p>
3

tak na marginesie. na jakiej licencji jest ten framework ?

4

https://github.com/CloudMade/Leaflet/blob/master/LICENSE

5

Własnie o taką odpowiedź mi chodziło! Zapraszam na piwo :slight_smile:

Jeszcze tylko mnie trapi jedna sprawa… skoro ja już w deklaracji mam podane parametry markera:

var marker = new L.Marker(new L.LatLng(53.0691667, 19.4805556));
		map.addLayer(marker);
		marker.bindPopup("<button onclick='zmiana()' id='mapa' onclick='changeLink()'>Drugi</button><br />Warszawa").closePopup();

To w tym onclicku, jak się odwołać do konkretnych parametrów? latlng?

6

Nie jestem pewien, czy o to chodzi:


var coord = new L.LatLng(53.0691667, 19.4805556);
var marker = new L.Marker(coord);
		map.addLayer(marker);
		marker.bindPopup("<button onclick='zmiana()' id='mapa' onclick='changeLink()'>Drugi</button><br />Warszawa").closePopup();

BTW: 2x onclick to raczej nie najlepszy pomysł :). No i dorzucam suplement

Potem:

<p onclick="map.setView(coord, 17)">skocz do miejsca</p>
7

Wszystko działa, co do suplementu - wiem, na razie chcę zrobić byle działało, a później zrobię to jak być powinno :slight_smile:

Ale jest taka kwestia…

Kod wygląda tak:

function zmiana()
{
document.getElementById("map").style.height="600px";
document.getElementById("map").style.width="80%";


}

function changeLink()
{
	document.getElementById('opisPunktu').innerHTML="Rychlinskiego 2<br />Warszawa";
	document.getElementById('opisPunktu').innerHTML="Rychlinskiego 2s<br />Warszawa";
}

function skocz(){
	map.setView(coord, 17)
}		
		
		var coord = new L.LatLng(50.0691667, 19.4805556);
		var marker = new L.Marker(coord);
		map.addLayer(marker);
		marker.bindPopup("<button  id='mapa' onclick='changeLink();zmiana();skocz();'>Drugi</button><br />Warszawa").closePopup();

I teraz funkcja changeLink odpowiada za wyświetlenie się jakiegoś napisu na stronie po kliknięciu w button na danym markerze, jednak ten tekst będzie przy każdym markerze inny, tak więc już wiem że nie wrzucę tego do jeden funkcji co zmiana i skocz, ale jak rozwiązać ten problem, ponieważ zakładam że markerów będę miał ok. 3000. Tak więc czy po prostu robić to tak jak do tej pory mam czy w jakiś inny sposób?

8

W sumie nie wszystko działa, bo… jak mam 2 punkty zaznaczone i dwa linki “skocz do miejsca”, to za każdym razem przybliża w to samo miejsce, czyli do coordów z drugiego markera… Bo wartość zmiennej się nadpisuje, ale jak to obejść?

9

Czy wgl. idzie tak zrobić, żeby była jedna funkcja, ale przyjmowała parametry w zależności od markera?

10

Dodaj lokalizację jako argumenty funkcji przy tworzeniu markera.

11

Czy taki kod:

function dzialaj(kord,zblizenie){
	map.setView(kord,14);
	document.getElementById("map").style.height="600px";
	document.getElementById("map").style.width="80%";
	document.getElementById('opisPunktu').innerHTML=opis_dlugi;
}


		var coord = new L.LatLng(51.0691667, 19.4805556);
		var marker = new L.Marker(coord);
		map.addLayer(marker);
		marker.bindPopup("<input type='button' onclick='dzialaj(new L.LatLng(51.0691667, 19.4805556))' value='pierwszy' id='guzik_1'>").closePopup();

Jestem kodem poprawnym? Bo działa…