Mapa UMP na Twojej stronie

Z UMP

(Różnice między wersjami)
(Nowa strona: === Wersja najprostsza === * W części <head> strony dodanie skryptów: <pre> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script src="http://mapa.ump.waw.pl/...)
(Piszemy)
Linia 1: Linia 1:
=== Wersja najprostsza ===
=== Wersja najprostsza ===
-
* W części <head> strony dodanie skryptów:
+
* W części <head> strony dodać skrypty:
<pre>
<pre>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
Linia 14: Linia 14:
<body onload="initUMP();">
<body onload="initUMP();">
</pre>
</pre>
 +
 +
Przykład takiej mapy na stronie [http://mapa.umapa.pl/examples/example1.html Przykład 1]
 +
 +
=== Wersja z markerem ===
 +
 +
Aby mapka była bardziej użyteczna, trzeba jeszcze:
 +
# zadać współrzędne i skalę wyświetlanego obszaru
 +
# postawić wskaźnik miejsca, o które nam chodzi.
 +
 +
Dodatkowe parametry podajemy do wywołania funkcji "initUMP" w następujący sposób:
 +
<pre>
 +
initUMP('map', {
 +
zoom:12,
 +
lat:52.24453, lon:21.00275,
 +
mlat:52.24999, mlon:20.98318,
 +
mbody:'To jest nasze miejsce'
 +
});"
 +
</pre>
 +
gdzie
 +
* zoom - skala (powiększenie) mapy
 +
* 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 [http://mapa.umapa.pl/examples/example2.html Przykład 2]

Wersja z dnia 13:21, 15 lis 2018

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 wg. 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('map', {
           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
  • 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

Źródło: "http://ump.fuw.edu.pl/wiki/Mapa_UMP_na_Twojej_stronie"