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
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
W tym artykule zostało opisane jak wykorzystać API do wyświetlania na mapie własnych punktów.
Aby osiągnąć ten efekt będziemy musieli wykonać następujące czynności:
Strona WWW powinna zwracać dane o POI'ach w okeślonym formacie. W parametrach Requestu (GET) API będzie przekazywać informacje o krawędziach geograficznych obszaru i listę identyfikatorów warstw. Oprócz tego przekazany zostanie parametr callback.
Przykładowy Request będzie miał postać:
http://moj.host.pl/mojePoi.php?callback=jsonp1241687119955&L[]=1&x1=-180&x2=1620&y1=85.051&y2=-90
Odpowiedź strony WWW powinna mieć następującą postać:
//nazwa z parametru callback GETa
jsonp1241687119955({
//nazwa jaką nadaliśmy naszej bazie POI
"poiBase" : "mojaBaza",
//lista warstw o które pytaliśmy
"layers" : [
{
//identyfikator warstwy
"id" : 1,
//lista POI do wyświetlenia
"pois" : [
{ //dane POIa
},
{ //kolejny POI
}
]
},
{
//kolejna warstwa
}
]
});
Przykład POI:
{
//identyfikator bazy POI
"poiBase" : "docelu-mock",
"layers" : [{
//unikalny identyfikator warstwy
"id" : 1,
"pois" : [{
//opis POIa
"description" : "",
// jeśli istnieje to pole i jego wartość równa jest "self" to link "więcej"
// z layerka nie otwiera sie w nowym oknie
"windowName" : "self",
//identyfikator POIa - w przypadku modyfikacji lub usunięcia
"poiId" : 1004264,
//Nazwa POIa
"name" : "Biuro reklamy Wirtualna Polska SA z mojego źródła",
//id dostawcy
"vendorId" : 3,
//Identyfikator kategorii, do której należy POI
"categoryId" : 949,
"poiGeom" : {
//szer. geograficzna
"lat" : 52.23036,
//dł. geograficzna
"lon" : 20.9942
},
//nazwa miejscowości
"locality" : "Warszawa",
//nazwa ulicy
"road" : "Sienna",
//numer budynku
"roadNo" : 75,
//dane kontaktowe POIa
"contact" : "0 22 576 39 22",
//adres url
"www" : "www.reklama.wp.pl",
//identyfikator POI w bazie dostawcy
"vendorPoiId" : 61861789,
//status weryfikacji przez moderatora
"verifyStatus" : "",
//adres url ikonki
"iconUrl" : "http://i.wp.pl/a/i/mapyapi/wp_icon.gif",
//słowa kluczowe
"keywords" : "systemy telekomunikacyjne,reklama",
//kod pocztowy
"postCode" : "",
//branża
"branch" : "Reklama - agencje, doradztwo",
//czas pracy
"whMonFriFrom" : null,
//czas pracy
"whMonFriTo" : null,
//czas pracy
"whSatFrom" : null,
//czas pracy
"whSatTo" : null,
//czas pracy
"whSunFrom" : null,
//czas pracy
"whSunTo" : null,
//czy punkt akceptuje karty płatnicze
"cardAccept" : false,
//czy wyświetlać opinie
"showOpinions" : true,
//czy wizytówka ma być prezentowana na stronie PKT
"isVendorClient" : false,
//identyfikator bazy POI
"poiBase" : "docelu-mock",
//etykieta
"label" : "",
"vendorsInConflict" : null,
"conflictId" : null
}
]
}]
}
Przykład strony z odpowiedzią serwera WWW
W obiekcie konfiguracyjnym API musimy dopisać namiary na wcześniej utworzoną stronę:
var config = {
"paths" : {
"poiRect" : {
//nazwa jaką nadaliśmy naszej bazie POI
"mojaBaza" : {
//adres pod jakim dostępne są dane
"url" : "http://moj.host.pl/mojePoi.php",
"paramNames" : {
//nazwy, jakie przyjmą parametry Requestu
"layers_array" : "L[]",
"lon1" : "x1",
"lon2" : "x2",
"lat1" : "y1",
"lat2" : "y2"
}
}
}
}
};
Kolejnym etapem jest utworzenie warstwy i dodanie jej do już istniejącego drzewa (funkcja addLayer), lub utworzenie kategorii posiadającej warstwę. My utworzymy całą nową kategorię.
var myCategory = {
"id" : DoCelu.getAvailableCategoryId(),
//nazwa nowej kategorii
"name" : "Wirtualna Polska",
//domyślna ikona POI z kategorii
"iconUrl" : "http://i.wp.pl/a/i/mapyapi/wp_icon.gif",
//chcemy by nasza kategoria była domyślnie widoczna na mapie
"defaultVisibility" : 1,
"subcategories" : [],
"layers" : [{
//identyfikator, który będzie przekazany w requeście do strony WWW
"id" : 1,
//nazwa jaką nadaliśmy bazie POI
"poiBase" : "mojaBaza",
//zakres zoomów, na których POI z warstwy mają być widoczne
"zoomFrom" : 0,
"zoomTo" : 20,
//domyślna ikona POI z warstwy
"iconUrl" : "http://i.wp.pl/a/i/mapyapi/wp_icon.gif",
"isAggregate" : 0
}]
};
DoCelu.addCategory(myCategory);
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() {
jQuery("#wwwExample").mousedown(function() {
this.href += "&_key="+DoCelu.getKey();
return true;
});
var config = {
"paths" : {
"poiRect" : {
"docelu-mock" : {
"url" : "/poiTile.mock.json",
"paramNames" : {
"layers_array" : "L[]",
"lon1" : "x1",
"lon2" : "x2",
"lat1" : "y1",
"lat2" : "y2"
}
}
}
}
};
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>
Uzyskany efekt:
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
Ten materiał nie ma jeszcze żadnej opinii. Twoja może być pierwsza!