Kilka miesięcy temu w artykule: ASP.NET Core – Google Maps API skupiliśmy się na zakładaniu konta deweloperskiego oraz omówieniu podstaw użycia API. Nauczyliśmy się jak oznaczać konkretną lokalizację na mapie oraz dodawać kilka markerów, aby zaznaczyć najciekawsze miejsca w danej lokalizacji.

W tej cześci pójdziemy nieco dalej. Nauczymy się wykrywać lokalizację naszego urządzania używając mechanizm geolokalizacji oraz przygotujemy statyczną mapę z oznaczeniem naszych obecnych współrzędnych geograficznych. W kolejnej części spróbujemy przygotować mechanizm śledzenia naszej lokalizacji a w ostatnim kroku narysujemy drogę, którą pokonaliśmy w trakcie spaceru.

W pierwszym kroku musimy tradycyjne już utworzyć nowy projekt z szablonu ASP.NET Core MVC. Warto od razu dodać nowy kontroler w obrębie którego będziemy realizować kolejne kroki:

Geolokalizacja pochodzi z API HTML 5. Nie musimy martwić się niczym dodatkowym. Zakładam, że żyjemy w świecie przeglądarek, które wspierają ten standard. Zarówno przeglądarka w naszym laptopie czy telefonie komórkowym będzie w stanie (po uzyskaniu odpowiednich uprawnień) uzyskać dostęp do naszej obecnej lokalizacji.

Kod pozwalający na pobranie naszej lokalizacji jest niezwykle prosty i bardzo czytelny:

function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else {
		x.innerHTML = "Geolokalizacja nie jest wpierana przez przeglądarkę!";
	}
}

function showPosition(position) {
	$("#coordinates").append("Szerokość geograficzna: " + position.coords.latitude +
		"<br>Długość geograficzna: " + position.coords.longitude);
}

@{
	ViewData["Title"] = "Moja obecna lokalizacja";
{

<h2>Moja obecna lokalizacja</h2>

<script src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		crossorigin="anonymous"></script>
<script type="text/javascript">

function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else {
		x.innerHTML = "Geolokalizacja nie jest wpierana przez przeglądarkę!";
	}
}

function showPosition(position) {
	$("#coordinates").append("Szerokość geograficzna: " + position.coords.latitude +
		"<br>Długość geograficzna: " + position.coords.longitude);
}

</script>

<p>Kliknij przycisk, aby pobrać swoją lokalizację!</p>
<button onclick="getLocation()">Lokalizacja</button>

<p id="coordinates">
</p>

Po kliknięciu przycisku ‘Lokalizacja’ zobaczycie prośbę przeglądarki o dostęp do geolokalizacji: Po wyrażeniu zgody zobaczycie Waszą obecną lokalizację: Jeżeli chcecie odszyfrować długość i szerokość geograficzą możecie skorzystać z poniższej witryny: https://www.gps-coordinates.net/
W moim przypadku lokalizacja, z uwagi na użycie VPN’a, wskazuje na Wielką Brytanię.

Pierwszy krok jest za nami. W drugim spróbujemy użyć kolejnego API, które pozwala nam wygenerowanie statycznego obrazka z zaznaczeniem naszej lokalizacji.

Korzystając z linka https://developers.google.com/ wspominanego w poprzednim artykule musimy dokonać aktywacji kolejnej usługi: Maps Static API Przechodzimy przez kolejne punkty:

1. Google API Console;
2. WŁĄCZ INTERFEJSY API I USŁUGI;
3. wyszukujemy i dokonujemy aktywacji: Google Maps Static API - warto od razu dokonać kopii klucza, którego będziemy używać do autoryzacji.

W pierwszym kroku dodajemy skrypt powiązany z naszą usługą – pamiętajcie, aby użyć swojego klucza:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=WPROWADZ_SWOJ_KLUCZ&callback=initMap">
</script>

<style>

#map {
	height: 400px;
	width: 100%;
}

</style>

<div id="map"></div>

function showPosition(position) {

	//Poniżej pobieramy współrzędne geograficznej lokalizacji w której się znajdujemy
	$("#coordinates").append("Szerokość geograficzna: " + position.coords.latitude +
		"<br>Długość geograficzna: " + position.coords.longitude);

	// Współrzędne geograficznej przygotowujemy w formacie akceptowalnym przez API
	var latlon = position.coords.latitude + "," + position.coords.longitude;

	// Tworzymy statyczny obrazek korzystając z Maps Static API dołączając zdefiniowaną lokalizację oraz...
	// kilka parametrów, tj. przybliżenie oraz nasz prywatny klucz
	var image_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + " &zoom=14&key=WPROWADZ_SWOJ_KLUCZ";

	// Wygenerowany powyżej adres wstrzykujemy do naszego kontenera odpowiedzialnego za wyświetlanie mapy
	document.getElementById("map").innerHTML = "<img src='" + image_url + "'>";

	// Definiujemy obiekt przechowujący nasze położenie...
	var centerLocation = { lat: position.coords.latitude, lng: position.coords.longitude };

	// Ustawiamy punkt centralny mapy na naszą obecną lokalizację
	var map = new google.maps.Map(
		document.getElementById('map'), { zoom: 14, center: centerLocation });

	// Oznaczamy nasz punkt za pomocą markera
	var marker = new google.maps.Marker({ position: centerLocation, map: map });
}

Poniżej również cały kod widoku w celu łatwiejszej interpretacji:

@{
	ViewData["Title"] = "Moja obecna lokalizacja";
}

<h2>Moja obecna lokalizacja</h2>

<script src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		crossorigin="anonymous"></script>

<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=WPROWADZ_SWOJ_KLUCZ&callback=initMap">
</script>

<style>

	#map {
		height: 400px;
		width: 100%;
	}

</style>

<script type="text/javascript">

function getLocation() {

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else {
		x.innerHTML = "Geolokalizacja nie jest wpierana przez przeglądarkę!";
	}
}

function showPosition(position) {

	//Poniżej pobieramy współrzędne geograficznej lokalizacji w której się znajdujemy
	$("#coordinates").append("Szerokość geograficzna: " + position.coords.latitude +
		"<br>Długość geograficzna: " + position.coords.longitude);

	// Współrzędne geograficznej przygotowujemy w formacie akceptowalny przez API
	var latlon = position.coords.latitude + "," + position.coords.longitude;

	// Tworzymy statyczny obrazek korzystając z Maps Static API dołączając zdefiniowaną lokalizację oraz...
	// kilka parametrów, tj. przybliżenie oraz nasz prywatny klucz
	var image_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + " &zoom=14&key=WPROWADZ_SWOJ_KLUCZ";

	// wygenerowany powyżej adres wstrzykujemy do naszego kontenera odpowiedzialnego za wyświetlanie mapy
	document.getElementById("map").innerHTML = "<img src='" + image_url + "'>";

	// Definiujemy obiekt przechowujący nasze położenie...
	var centerLocation = { lat: position.coords.latitude, lng: position.coords.longitude };

	// Ustawiamy punkt centralny mapy na naszą obecną lokalizację
	var map = new google.maps.Map(
		document.getElementById('map'), { zoom: 14, center: centerLocation });

	// Oznaczamy nasz punkt za pomocą markera
	var marker = new google.maps.Marker({ position: centerLocation, map: map });
}

</script>

<p>Kliknij przycisk, aby pobrać swoją lokalizację!</p>
<button onclick="getLocation()">Lokalizacja</button>

<p id="coordinates">
</p>

<div id="map"></div>
			

Ten krok jest nieco trudniejszy w przetestowaniu ponieważ musicie przygotować widok a następnie cały projekt umieścić na jakimś tak, aby był dostępny z poziomu telefonu komórkowego, który możecie zabrać ze sobą na spacer czy przejażdzkę samochodem. Nikt raczej nie będzie robił podobnych testów spacerując ze swoim laptopem...

Pokaże jednak poszczególne kroki: zbierzemy kilka współrzędnych geograficznych a następnie naniesiemy je na mapę celem pokazania przebytej drogi. Zaczynajmy...

Jak pamiętacie w poprzednich krokach pobieraliśmy naszą obecną lokalizację – działo się to tylko jeden raz. Nic jednak nie stoi na przeszkodzie, żeby ta funkcja była wywoływana wielokrotnie w różnych odstępach czasu dopóki sami nie przerwiemy tej operacji (w domyśle – skończymy nasz test). Przygotujemy nowy widok: LiveGPSTracking, który będzie odpowiedzialny za wyżej wspomiane operacje:

@{
	ViewData["Title"] = "Live GPS Tracking";
}

<h2>Live GPS Tracking</h2>

<script src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		crossorigin="anonymous"></script>

<script type="text/javascript">

var timer;

function getLocation() {

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else {
		x.innerHTML = "Geolokalizacja nie jest wpierana przez przeglądarkę!";
	}

	// ustawiamy timer na 10 sekund - funkcja getLocation() będzie wywoływana co 10 sekund,
	// dzięki temu jesteśmy w stanie zebrać więcej niż jedną współrzędną geograficzną.
	timer = setTimeout(getLocation, 10000);
}

function showPosition(position) {

	//Poniżej pobieramy współrzędne geograficznej lokalizacji w której się znajdujemy
	$("#coordinates").append("Szerokość geograficzna: " + position.coords.latitude +
		"<br>Długość geograficzna: " + position.coords.longitude);
}

// Aby timer nie działał w nieskończoność musimy być w stanie go zastopować
// używamy do tego funkcji języka JS clearInterval();
function StopTimer() {
	clearInterval(timer);
}

</script>

<p>Kliknij przycisk, aby pobrać swoją lokalizację!</p>
<button onclick="getLocation()">Lokalizacja</button>

<p>Kliknij przycisk, aby zakończyć!</p>
<button onclick="StopTimer()">Zakończ</button>
			

Ja takie dane "zebrałem" dzięki czemu jesteśmy w stanie przejść do kolejnego kroku – jak wykorzystać współrzędne geograficzne, żeby "narysować" trasę, którą przeszliśmy/przejechaliśmy?

Aby implementacje uczynić jak naczytelniejszą przygotujemy nowy widok: DrawRoute, który będzie odpowiedzialny jedynie za narysowanie drogi na podstawie zebranych współrzędnych geograficznych.

Szkielet naszego widoku (jeszcze bez implementacji):

@{
	ViewData["Title"] = "Wizualizacja podróży";
}

<h2>Wizualizacja podróży</h2>

<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=WPROWADZ_SWOJ_KLUCZ&callback=initMap">
</script>

<script type="text/javascript">

	function initMap() {

	}

</script>

<style>

	/* Zawsze ustawiaj wysokość mapy w sposób jawny, aby określić (tym samym) rozmiar kontenera div */
	#map {
		height: 100%;
		width: 100%;
	}

</style>

<div id="map"></div>

@{
	ViewData["Title"] = "Wizualizacja podróży";
}

<h2>Wizualizacja podróży</h2>

<script type="text/javascript">

function initMap() {

	// tworzymy instancję nowej mapy z odpowiednim powiększeniem, punktem centralnym i typem mapy:
	// typy map: roadmap, satellite, hybrid oraz terrain
	// punkty startowe to pierwszy element kolekcji
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 16,
		center: { lat: 54.51817, lng: 18.55947 },
		mapTypeId: 'terrain'
	});

	// tutaj definiujemy nasze współrzędne geograficzne. Nic nie stoi na przeszkodzie, żeby z danych pobranych
	// przez mechanizm geolokalizacji przygotować kolekcję i wykorzystać ją w kolejnych krokach
	// Niestety, chodzenie z laptopem nie jest najlepszym pomysłem!
	var walkCoordinates = [
		{ lat: 54.51805, lng: 18.55947 },
		{ lat: 54.51819, lng: 18.55561 },
		{ lat: 54.51807, lng: 18.55196 },
		{ lat: 54.51772, lng: 18.55058 },
		{ lat: 54.51448, lng: 18.55046 },
		{ lat: 54.51458, lng: 18.5487 },
		{ lat: 54.51623, lng: 18.54906 },
		{ lat: 54.51831, lng: 18.54833 },
		{ lat: 54.51843, lng: 18.54761 },
		{ lat: 54.51856, lng: 18.54547 },
		{ lat: 54.51922, lng: 18.54565 },
		{ lat: 54.51942, lng: 18.54732 },
		{ lat: 54.5193, lng: 18.54934 },
		{ lat: 54.51924, lng: 18.55187 },
		{ lat: 54.51927, lng: 18.55466 },
		{ lat: 54.51912, lng: 18.55752 },
		{ lat: 54.51903, lng: 18.55952 }
	];

	// tworzymy konfigurację rysowanej ścieżki spaceru
	// będzie czerwona o grubości 2 pikseli
	var walkPath = new google.maps.Polyline({
		path: walkCoordinates,
		geodesic: true,
		strokeColor: '#FF0000',
		strokeOpacity: 1.0,
		strokeWeight: 2
	});

	// Inicjalizacja mapy ze wszystkimi wymaganymi parametrami (zdefiniowanymi powyżej)
	walkPath.setMap(map);
}

</script>

<style>

	/* Zawsze ustawiaj wysokość mapy w sposób jawny, aby określić (tym samym) rozmiar kontenera div */
	#map {
		height: 100%;
		width: 100%;
		position: static !important;
	}

</style>

<div id="map"></div>

<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=WPROWADZ_SWOJ_KLUCZ&callback=initMap">
</script>

Mam nadzieję, że udało mi się przedstawić w przejrzysty sposób możliwości użycia Google Maps API. Jest to rozszerzenie poprzeniego artykułu dostępnego pod adresem: ASP.NET Core – Google Maps API

Przeszliśmy od podstawowej funkcjonalności pozwalającej na pobranie lokalizacji naszego urządzania, wygenerowaliśmy statyczny obrazek zawierający nasze współrzędne geograficzne. W kolejnej części skorzystaliśmy z funkcjonalności języka JavaScript rejestrując zmiany położenia naszego urządzenia. Efektem powyżej implementacji jest narysowanie ścieżki naszego spaceru: