Mapa UMP na Twojej stronie

Z UMP

(Różnice między wersjami)
(Piszemy)
Aktualna wersja (13:59, 22 lis 2018) (edytuj) (anuluj zmianę)
 
(Nie pokazano 7 wersji pośrednich.)
Linia 1: Linia 1:
-
=== Wersja najprostsza ===
+
Mapę UMP - interaktywną i zawsze aktualną - możemy umieścić na swojej stronie, np. jeśli chcemy pokazać położenie jakiegoś obiektu na mapie.
 +
== Wersja najprostsza ==
* W części <head> strony dodać skrypty:
* W części <head> strony dodać skrypty:
<pre>
<pre>
Linia 6: Linia 7:
<script src="http://mapa.ump.waw.pl/ump-www/lib/map.js"></script>
<script src="http://mapa.ump.waw.pl/ump-www/lib/map.js"></script>
</pre>
</pre>
-
* W wybranym miejscu strony dodać div o id="map" i stylu wg. potrzeb:
+
* W wybranym miejscu strony dodać div o id="map" i stylu według potrzeb:
<pre>
<pre>
<div style="width:450px; height:350px; float:right" id="map">&lt;/div>
<div style="width:450px; height:350px; float:right" id="map">&lt;/div>
Linia 17: Linia 18:
Przykład takiej mapy na stronie [http://mapa.umapa.pl/examples/example1.html Przykład 1]
Przykład takiej mapy na stronie [http://mapa.umapa.pl/examples/example1.html Przykład 1]
-
=== Wersja z markerem ===
+
== Wersja z markerem ==
Aby mapka była bardziej użyteczna, trzeba jeszcze:
Aby mapka była bardziej użyteczna, trzeba jeszcze:
Linia 25: Linia 26:
Dodatkowe parametry podajemy do wywołania funkcji "initUMP" w następujący sposób:
Dodatkowe parametry podajemy do wywołania funkcji "initUMP" w następujący sposób:
<pre>
<pre>
-
initUMP('map', {
+
initUMP('', {
zoom:12,
zoom:12,
lat:52.24453, lon:21.00275,
lat:52.24453, lon:21.00275,
Linia 33: Linia 34:
</pre>
</pre>
gdzie
gdzie
-
* zoom - skala (powiększenie) mapy
+
;zoom : skala (powiększenie) mapy. Dopuszczalny zakres - od 0 (cały świat) do 18 (najbliższa okolica).
-
* lat, lon - współrzędne geograficzne środka mapy
+
;lat, lon : współrzędne geograficzne środka mapy (szerokość i długość w stopniach)
-
* mlat, mlon - współrzędne markera
+
;mlat, mlon : współrzędne markera
-
* mbody - opis markera, który pokazuje się w 'dymku' przy markerze
+
;mbody : opis markera, który pokazuje się w 'dymku' przy markerze
Przykład takiej mapy na stronie [http://mapa.umapa.pl/examples/example2.html Przykład 2]
Przykład takiej mapy na stronie [http://mapa.umapa.pl/examples/example2.html Przykład 2]
 +
 +
== Co można wpisać w 'dymek' ==
 +
Tekst w 'dymku' można sformatować przy pomocy tzw. BBCodes, np.
 +
 +
* [br] - znak nowej linii
 +
* [i]tresc[/i] - <i>pochylony tekst</i>
 +
* [b]tresc[/b] - <b>pogrubiony tekst</b>
 +
* [u]tresc[/u] - <u>podkreślony tekst</u>
 +
* [email]mail@test.pl[/email] - link maila
 +
* [url]<nowiki>http://www.ump.waw.pl</nowiki>[/url] - link http://www.ump.waw.pl
 +
* [img]<nowiki>http://adres/obrazka.png</nowiki>[/img] - obrazek
 +
 +
Przykład mapy z rozbudowanym opisem na stronie [http://mapa.umapa.pl/examples/example3.html Przykład 3]
 +
 +
== Jak można zmienić kontrolki nawigacyjne ==
 +
 +
Domyślnie dostępne są trzy metody nawigowania po mapce:
 +
 +
* Myszką bezpośrednio na mapce: przesuwanie przez przeciąganie, powiększanie przez dwuklik w wybranym miejscu mapy, powiększanie i pomniejszanie rolką myszki. Ten sposób jest zawsze dostępny.
 +
* Myszką przez klikanie na guziczkach sterujących: przesuwanie przez klikanie na strzałki, powiększanie/pomniejszanie przez klikanie na 'termometr'. Guziczki można zmienić na prostsze i zajmujące mniej miejsca przez dodanie parametrów:
 +
*; <nowiki>simpleZoom:true</nowiki> : bez 'termometru', tylko strzałki do przesuwania i skalowania
 +
*; <nowiki>simpliestZoom:true</nowiki> : tylko strzałki do skalowania
 +
*; <nowiki>disableControls:true</nowiki> : bez żadnych guziczków sterujących
 +
* Klawiaturą: przesuwanie klawiszami strzałek, powiększanie klawisz <b>+/=</b>, pomniejszanie klawisz <b>-</b> Można to wyłączyć przez podanie parametru
 +
*; <nowiki>disableKeyboard:true</nowiki>
 +
 +
Przykład mapy z usuniętymi elementami sterującymi i bez obsługi klawiaturą na stronie [http://mapa.umapa.pl/examples/example4.html Przykład 4]
 +
 +
== Skąd wziąć swoje współrzędne ==
 +
Jeżeli nie znamy współrzędnych miejsca, które chcemy pokazać na mapie, możemy odczytać te współrzędne z mapy UMP. W tym celu
 +
* Otwieramy mapę http://mapa.ump.waw.pl
 +
* Znajdujemy na mapie interesujące nas miejsce
 +
* Na górnym pasku klikamy 'Marker'
 +
* Klikamy myszką na mapie w interesującym nas miejscu
 +
* Odczytujemy współrzędne w rubryce 'Pozycja markera'

Aktualna wersja

Mapę UMP - interaktywną i zawsze aktualną - możemy umieścić na swojej stronie, np. jeśli chcemy pokazać położenie jakiegoś obiektu na mapie.

Spis treści

Wersja najprostsza

  • W części <head> strony dodać skrypty: 
 <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <script src="http://mapa.ump.waw.pl/ump-www/lib/layers.js"></script>
 <script src="http://mapa.ump.waw.pl/ump-www/lib/map.js"></script>
  • W wybranym miejscu strony dodać div o id="map" i stylu według potrzeb: 
 <div style="width:450px; height:350px; float:right" id="map"></div>
  • dodać do body w zdarzeniu onload wywołanie funkcji konfigurującej mapę: 
 <body onload="initUMP();">

Przykład takiej mapy na stronie Przykład 1

Wersja z markerem

Aby mapka była bardziej użyteczna, trzeba jeszcze:

  1. zadać współrzędne i skalę wyświetlanego obszaru
  2. postawić wskaźnik miejsca, o które nam chodzi.

Dodatkowe parametry podajemy do wywołania funkcji "initUMP" w następujący sposób: 

initUMP('', {
           zoom:12,
           lat:52.24453, lon:21.00275, 
           mlat:52.24999, mlon:20.98318, 
           mbody:'To jest nasze miejsce'
});"

gdzie

zoom 
skala (powiększenie) mapy. Dopuszczalny zakres - od 0 (cały świat) do 18 (najbliższa okolica).
lat, lon 
współrzędne geograficzne środka mapy (szerokość i długość w stopniach)
mlat, mlon 
współrzędne markera
mbody 
opis markera, który pokazuje się w 'dymku' przy markerze

Przykład takiej mapy na stronie Przykład 2

Co można wpisać w 'dymek'

Tekst w 'dymku' można sformatować przy pomocy tzw. BBCodes, np.

  • [br] - znak nowej linii
  • [i]tresc[/i] - pochylony tekst
  • [b]tresc[/b] - pogrubiony tekst
  • [u]tresc[/u] - podkreślony tekst
  • [email]mail@test.pl[/email] - link maila
  • [url]http://www.ump.waw.pl[/url] - link http://www.ump.waw.pl
  • [img]http://adres/obrazka.png[/img] - obrazek

Przykład mapy z rozbudowanym opisem na stronie Przykład 3

Jak można zmienić kontrolki nawigacyjne

Domyślnie dostępne są trzy metody nawigowania po mapce:

  • Myszką bezpośrednio na mapce: przesuwanie przez przeciąganie, powiększanie przez dwuklik w wybranym miejscu mapy, powiększanie i pomniejszanie rolką myszki. Ten sposób jest zawsze dostępny.
  • Myszką przez klikanie na guziczkach sterujących: przesuwanie przez klikanie na strzałki, powiększanie/pomniejszanie przez klikanie na 'termometr'. Guziczki można zmienić na prostsze i zajmujące mniej miejsca przez dodanie parametrów:
    simpleZoom:true 
    bez 'termometru', tylko strzałki do przesuwania i skalowania
    simpliestZoom:true 
    tylko strzałki do skalowania
    disableControls:true 
    bez żadnych guziczków sterujących
  • Klawiaturą: przesuwanie klawiszami strzałek, powiększanie klawisz +/=, pomniejszanie klawisz - Można to wyłączyć przez podanie parametru
    disableKeyboard:true

Przykład mapy z usuniętymi elementami sterującymi i bez obsługi klawiaturą na stronie Przykład 4

Skąd wziąć swoje współrzędne

Jeżeli nie znamy współrzędnych miejsca, które chcemy pokazać na mapie, możemy odczytać te współrzędne z mapy UMP. W tym celu

  • Otwieramy mapę http://mapa.ump.waw.pl
  • Znajdujemy na mapie interesujące nas miejsce
  • Na górnym pasku klikamy 'Marker'
  • Klikamy myszką na mapie w interesującym nas miejscu
  • Odczytujemy współrzędne w rubryce 'Pozycja markera'
Źródło: "http://ump.fuw.edu.pl/wiki/Mapa_UMP_na_Twojej_stronie"