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
Ponieważ API DoCelu.pl to aplikacja korzystająca z javascriptu i flasha, czyli wykonująca się po stronie klienta, a nie serwera, to pobieranie i odtwarzanie linków do strony nie jest sprawą tak trywialną jak standardowe skopiowanie URL'a z pasku adresu przeglądarki.
Po pierwsze musimy zrozumieć jak cały proces działa. Użytkownik korzystając z serwisu dokonuje różnych modyfikacji na mapie, jak na przykład wyszukiwanie POI, wyznaczanie trasy czy ustawianie mapy w określonym punkcie. Żeby pobrać link do strony użytkownik musi kliknąć w przycisk na mapie "link do strony". Wtedy API wywoła zdefiniowaną przez użytkownika funkcję callBack przyjmującą jeden parametr
var linkCreationParameters = {
"lon" : 19, //długość geograficzna środka mapy
"lat" : 54, //szerokość geograficzna środka mapy
"zoom" : 9, //poziom przyblizenia mapy
"traceRouteLayerVisible" : false, //czy widoczna jest wyznaczona trasa
"searchPoiLayerVisible" : false, //czy widoczne są wyszukane POI
"asUriParam" : false, //czy link powinien być zakodowany jako parametr url'a
"viewName" : "", //nazwa widoku
"selectedPublicPois" : [], //zaznaczone POI
"selectedPrivatePois" : [], //zaznaczone POI z notatnika
"makeTiny" : true //czy skracać link
};
Element asUriParam przyjmuje wartość true przy przekierowaniu na widok szczegółów POI, żeby zapisać w urlu link powrotu do widoku mapy.
Element viewName może przyjmować wartości print.html i embed.html przy zaawansowanej obsłudze drukowania i pobierania mapek.
Parametr makeTiny przyjmuje wartość true jeśli link ma być pokazany użytkownikowi. Jeśli dysponujemy odpowiednim mechanizmem tinyUrli, to możemy go zastosować
Przykład prostej implementacji funkcji pobierającej link:
function getLinkCallback(linkCreationParameter) {
var thisHref = document.location.href;
thisHref += (-1 == thisHref.indexOf('?')) ? '?' : '&';
thisHref += 'lon=' + linkCreationParameter.lon + '&';
thisHref += 'lat=' + linkCreationParameter.lat + '&';
thisHref += 'zoom=' + linkCreationParameter.zoom + '&';
return thisHref;
}
W konfiguracji mapy należy ustawić funkcję callBack i widoczność przycisku pobierania linka:
var config = {
"callBacks" : {
"getLink" : getLinkCallback
},
"features" : {
"copyLink" : true
}
};
Teraz musimy zdefiniować odtwarzanie stanu linka. Zdefiniujmy więc funkcję:
function recoverLink() {
var link = document.location.href.toString();
var lon;
var lat;
var zoom;
var lonSearch = link.match(/lon=(\d+\.?\d*)/);
if (jQuery.isObject(lonSearch) && jQuery.isDefined(lonSearch[1])) {
lon = jQuery.parseFloat(lonSearch[1]);
}
var latSearch = link.match(/lat=(\d+\.?\d*)/);
if (jQuery.isObject(latSearch) && jQuery.isDefined(latSearch[1])) {
lat = jQuery.parseFloat(latSearch[1]);
}
var zoomSearch = link.match(/zoom=(\d+)/);
if (jQuery.isObject(zoomSearch) && jQuery.isDefined(zoomSearch[1])) {
zoom = jQuery.parseInt(zoomSearch[1]);
}
if (null !== lon && null !== lat && null !== zoom) {
DoCelu.setMapView({
"lon" : lon,
"lat" : lat,
"zoom" : zoom
});
}
}
W tym momencie mamy już funkcję, która ustawi mapę w wybranym położeniu. Pozostaje nam uruchomić ją po załadowaniu mapy.
DoCelu.loadMap(document.getElementById('map'), config, recoverLink);
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() {
function getLinkCallback(linkCreationParameter) {
var thisHref = document.location.href;
thisHref += (-1 == thisHref.indexOf('?')) ? '?' : '&';
thisHref += 'lon=' + linkCreationParameter.lon + '&';
thisHref += 'lat=' + linkCreationParameter.lat + '&';
thisHref += 'zoom=' + linkCreationParameter.zoom + '&';
return thisHref;
}
var config = {
"callBacks" : {
"getLink" : getLinkCallback
},
"features" : {
"copyLink" : true
}
};
function recoverLink() {
var link = document.location.href.toString();
var lon;
var lat;
var zoom;
var lonSearch = link.match(/lon=(\d+\.?\d*)/);
if (jQuery.isObject(lonSearch) && jQuery.isDefined(lonSearch[1])) {
lon = jQuery.parseFloat(lonSearch[1]);
}
var latSearch = link.match(/lat=(\d+\.?\d*)/);
if (jQuery.isObject(latSearch) && jQuery.isDefined(latSearch[1])) {
lat = jQuery.parseFloat(latSearch[1]);
}
var zoomSearch = link.match(/zoom=(\d+)/);
if (jQuery.isObject(zoomSearch) && jQuery.isDefined(zoomSearch[1])) {
zoom = jQuery.parseInt(zoomSearch[1]);
}
if (null !== lon && null !== lat && null !== zoom) {
DoCelu.setMapView({
"lon" : lon,
"lat" : lat,
"zoom" : zoom
});
}
}
DoCelu.loadMap(document.getElementById('map'), config, recoverLink);
});
//]]>
</script>
Możliwe jest też wywołanie okna z linkiem do mapy z przycisku umieszczonego poza obszarem mapy:
<a href="javascript:DoCelu.link()">link do mapy</a>
Teraz przesuń mapę, zmień zoom, pobierz link i spróbuj wkleić go w pasek adresu przeglądarki.
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!
Źródło danych: 
Mapy: 
Integracja i technologia:
