środa,
Wyświetlanie mapy OpenStreetMap
Prezentujemy dwa sposoby umieszczania map OpenStreetMap na stronie internetowej.
Ramka <iframe>
Pierwszy sposób jest bardzo prosty. Po wejściu na stronę serwisu OpenStreetMap należy ustawić mapę tak, aby przedstawiała obszar, który ma zostać zaprezentowany. Korzystając z dostępnych na stronie narzędzi, można także dostosować dodatkowe opcje widoku. Następnie po wybraniu ikony „Udostępnianie” możliwe jest dodanie do mapy markera. Kod do umieszczenia na stronie udostępniony jest w zakładce „HTML”. Poniżej zamieszczono przykładowy kod i efekt jego działania.
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=21.288167238235477%2C53.86962290804487%2C21.306084394454956%2C53.87603696626183&layer=mapnik&marker=53.87283006011411%2C21.297125816345215&zoom=14"
style="border: 1px solid black">
</iframe>
<br/>
<small>
<a href="https://www.openstreetmap.org/?mlat=53.87283&mlon=21.29713#map=17/53.87283/21.29713">Wyświetl większą mapę</a>
</small>
Wyświetl większą mapę
Język JavaScript
Zdecydowanie więcej możliwości kontroli i dostosowania mapy do potrzeb daje wykorzystanie języka JavaScript. Dostępnych jest kilka bibliotek JS wspierających mechanizmy OpenStreetMap. W poniższym przykładzie wykorzystano OpenLayers. Aby ułatwić zrozumienie działania kodu, jest on bardzo prosty i wykorzystuje jedynie podstawowe możliwości biblioteki. Autorzy OpenLayers przygotowali obszerną dokumentację wraz z przykładami ilustrującymi bogate możliwości biblioteki.
Kod źródłowy przykładu
W wierszach 4 i 6 dołączono pliki wymagane do działania OpenLayers. Mapa będzie wyświetlana w elemencie o identyfikatorze „mapa” (10), w wierszu 5 zadeklarowano style CSS dla tego składnika. Skrypt zostaje uruchomiony po załadowaniu strony (12). W wierszu 14 wskazano miejsce przewidziane na mapę. Punkt znajdujący się na środku mapy określono za pomocą współrzędnych (17).
<!doctype html>
<html lang="pl">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css">
<style> #mapa {height: 400px;width: 100%;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<title>OpenLayers</title>
</head>
<body>
<div id="mapa"></div>
<script>
window.onload = function() {
var map = new ol.Map({
target: 'mapa',
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
view: new ol.View({
center: ol.proj.fromLonLat([21.304681,53.870439]),
zoom: 1
})
})
}
</script>
</body>
</html>
