1. Kolejne etapy dostosowywania wyglądu i funkcjonalności mapy za pomocą biblioteki OpenLayers:
   • linkujemy bibliotekę OpenLayers.js do lokalnych zasobów na serwerze strony: <script src="oLayers/OpenLayers.js"></script>
   • deklarujemy i ustawiamy zmienne publiczne OpenLayers na poziomie skryptu: /* zmienne publiczne OpenLayers */
     var map = null;
     // współrzędne geograficzne środka mapy w układzie współrzędnych EPSG:900913
     // Używany m.in. przez OpenStreetMap, Google Maps, Bing Maps, Yahoo!Maps.
     var centerLat = 51.296518; var centerLon = 22.501935;
     // początkowe powiększenie mapy
     var zoomLevel = 14;
     // utwórz odwołania do klas przekształcających współrzędne pomiędzy systemami odniesienia
     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
     var epsg900913 = new OpenLayers.Projection("EPSG:900913");
     
   • ustawiamy przykładowe opcje tworzonej mapy:
     
     options: { units:'m',
     minResolution: 'auto',
     maxResolution: 'auto',
     więcej szczegółów odnośnie opcji dla instancji interaktywnych map znajduje się na: OpenLayers.Map
   • dodajemy do mapy kontrolki ułatwiające nawigację:
     1. Control.LayerSwitcher()() - niebieski przycisk (+) w prawym górnym rogu:
        var layerSwitcher = new OpenLayers.Control.LayerSwitcher(),
        • po kliknięciu rozwija (pokazuje) okno przełącznika warstw. Można programowo pokazać przełącznik warstw w postaci rozwiniętej. Aby umożliwić późniejsze odwołanie się do tej kontrolki, zastała ona przypisana do zmiennej obiektowej layerSwitcher,
     2. Control.Navigation() - umożliwia nawigację po mapie za pomocą myszy:
        controls: [
        new OpenLayers.Control.Navigation(),
        • Ruch myszy z wciśniętym lewym przyciskiem przesuwa mapę,
        • Ruch myszy z wciśniętym lewym przyciskiem (LPM) + wciśnięty klawisz Shift, powoduje zaznaczanie prostokątnego obszaru, który po puszczeniu przycisku myszy zostanie powiększony i wycentrowany,
        • Kółko myszy zmienia powiększenie (zoom) mapy,
        • Dwukrotne kliknięcie na obszarze mapy, zwiększa powiększenie (zoom) mapy i centruje ją względem punktu kliknięcia,
     3. Control.PanZoom() - elementy nawigacyjne w lewym górnym rogu, zamiennie z PanZoomBar():
        new OpenLayers.Control.PanZoom(),
        • przyciski (+ / -) po kliknięciu zmieniają powiększenie mapy,
        • przyciski strzałek po kliknięciu przesuwają mapę w określonym kierunku,
     4. Control.PanZoomBar() - elementy nawigacyjne w lewym górnym rogu oraz pionowy suwak powiększenia mapy, zamiennie z PanZoom():
        new OpenLayers.Control.PanZoomBar(),
        • przyciski (+ / -) po kliknięciu zmieniają powiększenie mapy,
        • przyciski strzałek po kliknięciu przesuwają mapę w określonym kierunku,
        • dodatkowo widoczny jest pionowy suwak zmiany powiększenia mapy,
     5. Control.KeyboardDefaults() - umożliwia  przewijanie i powiększanie mapy za pomocą klawiatury:
        new OpenLayers.Control.KeyboardDefaults(),
        • klawisze (+ / -) umożliwiają zmianę powiększenia,
        • klawisze (PageUp / PageDown) przesuwają mapę o ¾ w dół lub górę,
        • klawisze (Home / End) przesuwają mapę o ¾ w lewo lub prawo,
     6. Control.OverviewMap() - niebieski przycisk (+) w prawym dolnym rogu:
        new OpenLayers.Control.OverviewMap(),
        • po kliknięciu pokazuje mini-mapę umożliwiającą szybkie przesuwanie obszaru mapy,
     7. Control.ScaleLine() aktualna skala mapy, widoczna w lewym dolnym rogu:
        new OpenLayers.Control.ScaleLine(),
        • liniowy wskaźnik bieżącej skali mapy,
     8. Control.Permalink() - bezpośredni odnośnik (link) do mapy startowej w prawym dolnym rogu:
        new OpenLayers.Control.Permalink(),
        • po kliknięciu na „Permalink” następuje przeładowanie strony z parametrami startowymi,
     9. Control.MousePosition() aktualna pozycja kursora myszy, widoczna w prawym dolnym rogu:
        new OpenLayers.Control.MousePosition(),
        • współrzędne geograficzne punktu pod kursorem myszy w prawym dolnym rogu,
     10. Control.Attribution() - prawa autorskie OSM (link do licencji) widoczny w prawym dolnym rogu, nad kontrolką Permalink:
         new OpenLayers.Control.Attribution(),
         • po kliknięciu na link © „OpenStreetMap” wyświetlana jest strona „Prawa autorskie i licencja” Uwaga. Kontrolka Control.Attribution() nie działa z biblioteką v. 2.11.

Poniżej znajduje się pełny kod HTML strony wyświetlającej kontrolki OpenLayers, na której osadzona jest mapa OSM i UMP-pcPl.

	<!doctype html>
	<html lang="pl">
	<head>
	<meta charset="UTF-8">
	<title>Przykład 02_accdb. Kontrolki OpenLayers na mapie OSM i UMP-pcPl.</title>
	<!-- Adres do biblioteki OpenLayers.js (v. 2.11) na serwerze strony -->
	<script src="oLayers/OpenLayers.js"></script>
	<!-- styl elementów strony -->
	<style type="text/css">
	#container, #basicMap {
		width:800px; height:600px;
		border:1px solid #666;
	}
	#container{
		margin: 10px auto 0 auto;
		padding:10px; border-width:2px;
	}
	</style>

	<!-- skrypt wyświetlający mapę -->
	<script type="text/javascript">

	/* zmienne publiczne OpenLayers */
	var map = null;
	// współrzędne środka mapy w układzie odniesienia EPSG:900913, a właściwie (EPSG: 3857),
	// format używany m.in. przez OpenStreetMap, Google Maps, Bing Maps, Yahoo!Maps.
	var centerLat = 51.296518;	var centerLon = 22.501935;
	// początkowe powiększenie mapy
	var zoomLevel = 14;
	// utwórz odwołania do klas przekształcających współrzędne pomiędzy systemami odniesienia
	var epsg4326 = new OpenLayers.Projection("EPSG:4326");
	var epsg900913 = new OpenLayers.Projection("EPSG:900913");

	/* Funkcja init() wyświetla zdefiniowaną mapę OSM w bloku <div id = 'basicMap'>,
		wycentrowaną w/m punktu o współrzędnych geograficznych centerLat/centerLon
		i powiększeniu zoomLevel */
	function init() {
		// ustaw przykładowe opcje instancji mapy
		var options = {
					units:'m',
					minResolution: 'auto',
					maxResolution: 'auto',
				// utwórz kontrolki nawigacyjne, informacyjne i sterujące instancji mapy
				controls: [
					// zminimalizowane okno przełącznika warstw;
					// niebieski przycisk (+) w prawym górnym rogu
					layerSwitcher = new OpenLayers.Control.LayerSwitcher({'ascending':true}),
					// umożliwia nawigacje po mapie za pomocą myszy
					new OpenLayers.Control.Navigation(),
					// elementy nawigacyjne w lewym górnym rogu,
					// strzałki lewa, prawa, dół, góra, powiększenie '+/-'
					//new OpenLayers.Control.PanZoom(),
					// elementy nawigacyjne w lewym górnym rogu j.w. plus pionowy suwak zmiany powiększenia,
					new OpenLayers.Control.PanZoomBar(),
					// umożliwia przewijanie i powiększanie mapy za pomocą klawiatury
					new OpenLayers.Control.KeyboardDefaults(),
					// zminimalizowane okno mini-mapy, która umożliwia szybką nawigację;
					// niebieski przycisk (+) w dolnym prawym rogu
					new OpenLayers.Control.OverviewMap(),

					// Dodatkowe 2 przyciski pod PanZoomBar
					// Nieaktualne w wersji 2.4, usunięte w wersji 3.0.
					//new OpenLayers.Control.MouseToolbar(),

					// liniowy wskaźnik bieżącego powiększenia mapy; w lewym dolnym rogu mapy,
					new OpenLayers.Control.ScaleLine({geodesic: true}),
					// bezpośredni odnośnik do mapy startowej: link w prawym dolnym rogu
					new OpenLayers.Control.Permalink('permalink'),
					// aktualne współrzędne geograficzne punktu pod kursorem myszy;
					new OpenLayers.Control.MousePosition({displayProjection: epsg4326}),
					// dolny prawy róg - prawa autorskie OSM, (nie działa w ver. 2.11)
					new OpenLayers.Control.Attribution()
			]
		};

		// utwórz nowy obiekt typu Map w kontenerze HTML (tutaj <div id="basicMap">)
		map = new OpenLayers.Map("basicMap", options);
		// utwórz nową warstwę 'layerOSM' odwołującą się darmowej mapy OpenStreetMap
		var layerOSM = new OpenLayers.Layer.OSM("Mapa OSM");
		// dodaj utworzoną warstwę do obiektu map
		map.addLayer(layerOSM);

		// w podobny sposób możemy utworzyć nową warstwę odwołującą się darmowej mapy UMP-pcPL
		var layerUMP = new OpenLayers.Layer.OSM("Mapa UMP",
									"http://1.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png")
		// dodaj utworzoną warstwę do obiektu map
		map.addLayer(layerUMP);

		// konwertuj współrzędne środka z układu odniesienia EPSG:4326 na EPSG:900913,
		var point = new OpenLayers.LonLat(centerLon, centerLat);
		// wycentruj mapę w/m współrzędnych środka i powiększ do skali zoomLevel
		map.setCenter(point.transform(epsg4326,epsg900913), zoomLevel);
	}
	</script>

	</head><body>
	<div id="container">
		<!-- kontener na mapę -->
		<div id="basicMap"></div>
	</div>
	<!-- uruchom funkcję init() -->
	<script type="text/javascript">init();</script>
	</body></html>
	

Zobacz Demo - 01. Kontrolki OpenLayers osadzone na mapach OSM i UMP-pcPl na stronie WWW

W podobny sposób jak w przykładzie Mapa OSM na formularzu MS Accessmożemy zaimplementować powyższy kod, by wyświetlić darmowe mapy OpenStreetMap i UMP-pcPL wraz z kontrolkami OpenLayers w formularzu MS Access. Tak naprawdę, kod można zastosować prawie bez żadnych zmian. Poprawki mają charakter kosmetyczny i ograniczyły się do zmiany stylu elementu <html> i <body> oraz usunięcia zbędnego elementu <#container> i jego stylu.

Kod po modyfikacjach zapisujemy w folderze roboczym bazy MS Access jako plik 02_accOpenLayers.html. W bazie danych MS Access znajduje się ten sam formularz startowy, co w poprzednim przykładzie, zawierający osadzony formant Microsoft Web Browser. W kodzie VBA należy zmienić jedynie ścieżkę dostępu do pliku *.html na: sHtmlPath = CurrentProject.Path & "\02_accOpenLayers.html"

Poniższy kod umieszczamy w module klasy formularza startowego.

	Private Sub Form_Open(Cancel As Integer)
	Dim sHtmlPath As String
	 sHtmlPath = CurrentProject.Path & "\02_accOpenLayers.html"
	 ' załaduj dokument do formantu Web Browser klasy Shell.Explorer.2 o nazwie oMsWebBrowser
	 Call Me.oMsWebBrowser.Object.Navigate(sHtmlPath)
	End Sub

Po uruchomieniu formularza startowego możemy cieszyć się kontrolkami OpenLayers na darmowych mapach OpenStreetMap i UMP-pcPL osadzonych w formularzu MS Access.

Obraz.2   Kontrolki OpenLayers na mapach OSM i UMP-pcPl.

Jak widać na obrazku, mapa nie wygląda już tak ubogo. Możemy zmieniać powiększenie (Zoom) przyciskami +/- widocznymi na mapie, suwakiem pionowym lub za pomocą kółka myszy. Mapę możemy przesuwać we wszystkich kierunkach za pomocą myszki z wciśniętym lewym przyciskiem lub przycisków strzałek na mapie. W lewym dolnym rogu widoczny jest liniowy wskaźnik aktualnej skali mapy. W prawym górnym rogu znajduje się rozwinięte okno przełącznika warstw „Base Layer”, umożliwiające przełączanie się pomiędzy mapą OSM, a mapą UMP-pcPL. W prawym dolnym rogu znajduje się niebieski przycisk (+) rozwijający okno mini-mapy, umożliwiającej szybkie przesuwanie obszaru mapy. Pod przyciskiem znajduje się „Permalink” - bezpośredni odnośnik do mapy startowej. Na samym dole widoczne są współrzędne geograficzne punktu pod kursorem myszy.

Według mnie całość psuje kontrolka Control.Attribution() wyświetlająca link © OpenStreetMap contributors po kliknięciu na który wyświetlana jest strona „Prawa autorskie i licencja”. Wadą tej kontrolki jest przesłanianie części mapy (uniemożliwia odczytanie nazw obiektów na mapie oraz częściowe nakładanie się na kontrolkę Control.OverviewMap().
Moim zdaniem należy zrezygnować z kontrolki Control.Attribution(), a link do praw licencyjnych umieścić gdzieś pod (nad, bądź obok) wyświetlanej mapy. Także kontrolka Control.OverviewMap() nie jest zbyt przydatna i najprawdopodobniej z niej też zrezygnuję.

Do pobrania: „MS Access i kontrolki OpenLayers”   ()