Wizytówki POI z własnego źródła

Definiowanie widoku z wizytówką POI

W tym artykule zostało opisane jak zdefiniować adres wizytówki POI z własnego źródła.

Aby osiągnąć ten efekt będziemy musieli wykonać następujące czynności:

Skonfigurować własne źródło POI,
Utworzyć stronę z wizytówkami POI,
Obsłużyć połączenie ze stroną wizytówki POI.

Własne źródło POI

Szczegółowy opis definiowania własnego źródła POI znajduje się w artykule Własne źródło POI. W przykładzie poniżej POI1 (w Gdańsku) ma ustawioną zmienną windowName na self, więc wizytówka otwiera się w aktualnym oknie.

Strona z wizytówką

Powinna to być standardowa strona html, która na podstawie identyfikatora POI, przekazanego w requeście, wyświetli wizytówkę.

http://moj.host.pl/wizytowka.php?poiId=123

Oprócz identyfikatora POI w requeście może się też znaleźć link powrotny do mapy.

Konfiguracja strony z wizytówką w API

Schemat konfiguracji:


var config = {
  "paths" : {
    "poiRect" : {
      //konfiguracja własnego źródła POI w osobnym artykule
    }
    "poiDetails" : {
      //nazwa włąsnej bazy POI
      "mojaBaza" : {
        "url" : "http://moj.host.pl/poiInfo.php",
        "paramNames" : {
          //nazwa parametru GET z identyfikatorem POI
          "id" : "poiId",
          //nazwa parametru GET z linkiem powrotnym do mapy
          "url" : "backUrl"
        }
      }
    }
  },
  "callBacks" : {
    //opis tworzenia linku do mapy znajduje się w osobnym artykule
    "getLink" : function (linkCreationParameters) {
      return document.location.href;
    }
  }
};

Przykładowy kod i efekt jego zastosowania:


<div id="map" style="width:800px; height:600px; "></div>
<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function() {
		var config = {
			"paths" : {
				"poiDetails" : {
					"skodaPOIs" : {
						"url" : "/poiInfo.mock.html",
						"paramNames" : {
							"id" : "poiId",
							"url" : "backUrl"
						}
					}
				},
				"poiRect" : {
					"docelu-mock" : {
						"url" : "/poiTile.mock.json",
						"paramNames" : {
							"layers_array" : "L[]",
							"lon1" : "x1",
							"lon2" : "x2",
							"lat1" : "y1",
							"lat2" : "y2"
						}
					}
				}
			},
			"callBacks" : {
				"getLink" : function (linkCreationParameters) {
					return document.location.href;
				}
			}
		};

		DoCelu.loadMap(document.getElementById('map'), config, function() {
			var myCategory = {
				"id" : DoCelu.getAvailableCategoryId(),
				"name" : "Wirtualna Polska",
				"iconUrl" : "http://i.wp.pl/a/i/mapyapi/wp_icon.gif",
				"defaultVisibility" : 1,
				"subcategories" : [],
				"layers" : [{
					"id" : 1,
					"poiBase" : "docelu-mock",
					"zoomFrom" : 0,
					"zoomTo" : 20,
					"iconUrl" : "http://i.wp.pl/a/i/mapyapi/wp_icon.gif",
					"isAggregate" : 0
				}]
			};
			DoCelu.addCategory(myCategory);
		});
	});
//]]>
</script>

Najedź wskaźnikiem myszy na POI i kliknij w link "więcej":

Ten dokument nie wyjaśnia wszystkich wątpliwości? Szczegółowa dokumentacja techniczna API DoCelu.pl

Sprawdź toczące się dyskusje na Forum API DoCelu.pl