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
Wygląd elementów na mapie definiowany jest poprzez element layout obiektu konfiguracyjnego. Domyślnie przyjmowane są następujące wartości:
var layout = {
Definiuje kolor jaki przyjmują "kafle na mapie" poza biegunami
"blankTile" : {
"color" : 0xCCCCCC
},
Definiuje wygląd linii obliczania odległości: kolor w RGB, poziom przezroczystości od 0 do 1, szerokość w pikselach
"distanceLineStyle" : {
"color" : 0xFF0000,
"alpha" : 1,
"thickness" : 3
},
Definiuje styl linii łączącej punkty trasy (startowy, końcowy i pośrednie) po wyznaczeniu przebiegu trasy: kolor w RGB, poziom przezroczystości od 0 do 1, szerokość w pikselach
"dumpRouteLineStyle" : {
"color" : 0x3F916C,
"alpha" : 0.6,
"thickness" : 3
},
Definiuje wygląd prostokąta oznaczającego obecny widok mapy na miniaturce: kolor w RGB, poziom przezroczystości od 0 do 1
"minimapRectangleLineStyle" : {
"color" : 0x147085,
"alpha" : 1
},
Definiuje wygląd wypełnienia prostokąta oznaczającego obecny widok mapy na miniaturce: kolor w RGB, poziom przezroczystości od 0 do 1
"minimapRectangleFillStyle" : {
"color" : 0x36A1B8,
"alpha" : 0.4
},
Definiuje wygląd obwódki zaznaczonego POI: kolor w RGB, poziom przezroczystości od 0 do 1, wielkość w pikselach rozmytej obwódki wokół POI.
"poiSelection" : {
"color" : 0xFF0000,
"alpha" : 1,
"blur" : 3
},
Definiuje wygląd obwódki layerka z opisem POI: kolor w RGB, poziom przezroczyśtości od 0 do 1
"poiDetailsBorder" : {
"color" : 0x1C5C69,
"alpha" : 0.5
},
Definiuje styl linii okręgu wyszukiwania w promieniu: kolor w RGB, poziom przezroczystości od 0 do 1, szerokość linii w pikselach
"radiusLineStyle" : {
"color" : 0x2EACC6,
"alpha" : 0.4,
"thickness" : 10
},
Definiuje styl wypełnienia okręgu wyszukiwania w promieniu: kolor w RGB, poziom przezroczyśtości od 0 do 1
"radiusFillStyle" : {
"color" : 0x2EACC6,
"alpha" : 0.04
},
Definiuje styl linii łączącej punkty trasy (startowy, końcowy i pośrednie) przed wyznaczeniem przebiegu trasy i w trakcie wyznaczania: kolor w RGB, poziom przezroczyśtości od 0 do 1, szerokość w pikselach
"routeLineStyle" : {
"color" : 0x00839D,
"alpha" : 0.75,
"thickness" : 4
}
}
var config = {
"layout" : layout
};
Konfigurację możemy podać przy wywołaniu funkcji loadMap, lub wywołując funkcję loadConfig. Prezentowany przykład wywoła metodę loadConfig i zmieni wygląd mapy z domyślnego na własny.
var current = 'org';
jQuery('#test').mousedown(function() {
var config = {
"layout" : null
};
if ("org" == current) {
config.layout = myLayout;
current = 'my';
} else {
config.layout = originalLayout;
current = 'org';
}
DoCelu.loadConfig(config);
});
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 myLayout = {
"blankTile" : {
"color" : 0xCCFFCC
},
"distanceLineStyle" : {
"color" : 0x0000FF,
"alpha" : 1,
"thickness" : 2
},
"dumpRouteLineStyle" : {
"color" : 0xBD3E22,
"alpha" : 0.6,
"thickness" : 3
},
"minimapRectangleLineStyle" : {
"color" : 0xFF0000,
"alpha" : 1
},
"minimapRectangleFillStyle" : {
"color" : 0xFFA000,
"alpha" : 0.4
},
"poiSelection" : {
"color" : 0x80F080,
"alpha" : 1,
"blur" : 3
},
"poiDetailsBorder" : {
"color" : 0xFF0000,
"alpha" : 0.5
},
"radiusLineStyle" : {
"color" : 0xFF0000,
"alpha" : 0.4,
"thickness" : 10
},
"radiusFillStyle" : {
"color" : 0x8A0000,
"alpha" : 0.04
},
"routeLineStyle" : {
"color" : 0x00FF00,
"alpha" : 0.75,
"thickness" : 4
}
};
var originalLayout = null;
var current = 'org';
DoCelu.loadMap(document.getElementById('map'), null, function() {
originalLayout = DoCelu.getConfig().layout;
});
jQuery('#test').mousedown(function() {
var config = {
"layout" : null
};
if ("org" == current) {
config.layout = myLayout;
current = 'my';
} else {
config.layout = originalLayout;
current = 'org';
}
DoCelu.loadConfig(config);
});
});
//]]>
</script>
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:
