Mapa UMP na Twojej stronie

Z UMP

(Różnice między wersjami)
(Piszemy...)
d (...)
Linia 6: Linia 6:
<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>

Wersja z dnia 11:52, 16 lis 2018

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
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'

...

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