Rozszerzanie mapy

API DoCelu.pl udostępnia prosty interfejs do rozszerzania mapy na obszar schowanego przyległego boksu html'owego. W celu uwidocznienia na mapie konkretnych przycisków należy ustawić w konfiguracji mapy:


var shiftHtmlBoxes = {
  "left" : false,
  "right" : true,
  "top" : false,
  "bottom" : false
};

Mapę umieścimy z lewej strony, a box który będziemy ukrywać z prawej. Za rozmieszczenie w naszym przypadku odpowiada arkusz stylów css, a html wygląda następująco


<div class="map" id="map" style="width:330px;height:420px;">
<!-- tu bedzie mapa -->
</div>
<div class="map_dsc" id="map_dsc">
<p>W tym miejscu znajduje sie element html'owy, który zakryjemy mapa.</p>
</div>

Poprzez odpowiednie ustawienie powyższych wartości możemy uwidocznić od 1 do 4 przycisków rozszerzania mapy. My wybraliśmy jeden przycisk z prawej strony mapy. Teraz należy oprogramować zdarzenie rozszerzenia mapy. W tym celu zdefiniujemy funkcję callBack przyjmującą jeden argument typu String spośród: ["left", "right", "top", "bottom"]


function shiftHtmlBoxCallBack(position) {
  if ("left" == position) {
    //ukryj box htmlowy z lewej strony i rozszerz mape
    //ale my uwidocznilismy tylko przelącznik z prawej strony
    //i nie chcemy nic tu robić
  } else if ("right" == position) {
    var isVisible = jQuery('#map_dsc:visible').length;
    if (isVisible) {
      //ukrywamy html i rozszerzamy mape
      jQuery('#map_dsc').hide();
      DoCelu.setWidth('100%');
    } else {
      //pokazujemy html i zwijamy mape
      DoCelu.setWidth('330px');
      jQuery('#map_dsc').show();
    }
  }
};

Teraz pozostaje nam załadować mapę z odpowiednią konfiguracją


var config = {
  "callBacks" : {
    "shiftHtmlBox" : shiftHtmlBoxCallBack
  },
  "features" : {
    "shiftHtmlBoxes" : shiftHtmlBoxes
  }
};

DoCelu.loadMap(document.getElementById('map'), 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 shiftHtmlBoxes = {
		"left" : false,
		"right" : true,
		"top" : false,
		"bottom" : false
	  };

	  function shiftHtmlBoxCallBack(position) {
		if ("left" == position) {
		  //ukryj box htmlowy z lewej strony i rozszerz mape
		  //ale my uwidocznilismy tylko przelącznik z prawej strony
		  //i nie chcemy nic tu robić
		} else if ("right" == position) {
		  var isVisible = jQuery('#map_dsc:visible').length;
		  if (isVisible) {
			//ukrywamy html i rozszerzamy mape
			jQuery('#map_dsc').hide();
			DoCelu.setWidth('100%');
		  } else {
			//pokazujemy html i zwijamy mape
			DoCelu.setWidth('330px');
			jQuery('#map_dsc').show();
		  }
		}
	  };

	  var config = {
		"callBacks" : {
		  "shiftHtmlBox" : shiftHtmlBoxCallBack
		},
		"features" : {
		  "shiftHtmlBoxes" : shiftHtmlBoxes
		}
	  };

	  DoCelu.loadMap(document.getElementById('map'), config);
	});
//]]>
</script>

W tym miejscu znajduje się element html'owy, który zakryjemy mapą.

Przetestuj funkcjonalność klikając w guzik rozszerzania mapy

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