Mapa UMP na Twojej stronie
Z UMP
(Różnice między wersjami)
(cd) |
(...) |
||
Linia 51: | Linia 51: | ||
* [img]<nowiki>http://adres/obrazka.png</nowiki>[/img] - obrazek | * [img]<nowiki>http://adres/obrazka.png</nowiki>[/img] - obrazek | ||
- | Przykład mapy z rozbudowanym opisem na stronie [http://mapa.umapa.pl/examples/ | + | Przykład mapy z rozbudowanym opisem na stronie [http://mapa.umapa.pl/examples/example3.html Przykład 3] |
== Skąd wziąć swoje współrzędne == | == Skąd wziąć swoje współrzędne == | ||
... | ... | ||
- | == Jak można zmienić | + | == Jak można zmienić kontrolki nawigacyjne == |
... | ... |
Wersja z dnia 11:00, 20 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:
- 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:
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
Skąd wziąć swoje współrzędne
...
Jak można zmienić kontrolki nawigacyjne
...