API Fonksiyonları

Şehir haritası API'si JavaScript teknolojisini desteklemektedir. Kodunuzun script tarafında aşağıdakine benzer şekilde bir tanımlama yaparsanız API'deki tüm mevcut fonksiyonları kullanabilirsiniz. Hemen hemen tüm fonksiyonlar callback yapısını desteklemektedir.

İlerleyen süreçte API'nin geliştirme çalışmaları devam edecektir.

API Tanımlama
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	// harita yüklenmesi tamamlandıktan sonra çalışması istenilen fonksiyonlar
});

Harita Fonksiyonları

OnClick

OnClick fonksiyonu, tıklanan konumun lat, lon, pixel, zoom ve sol-sağ tıklama değerlerini döndürmek üzere tasarlanmıştır. Tıklama bilgisi için sol tıkta l, sağ tıkta ise r değeri döndürülür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Map.OnClick(function (lat, lon, zoom, clickDirection, pixelX, pixelY) {
		alert(lat + "," + lon + ", " + zoom + ", "+clickDirection + ", "+pixelX + ", "+pixelY);
	});
});
<html>
    <head>
        <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
        <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
    </head>
<body>

<div id="harita" style="width:100%; height:100%">
    <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
        <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
    </iframe>
</div>

<script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Map.OnClick(function (lat, lon, zoom ,clickDirection, pixelX, pixelY) {
		alert(lat + "," + lon + ", " + zoom + ", "+clickDirection+ ", "+pixelX + ", "+pixelY );
	});
});
</script>

</body>
</html>

UnClick

UnClick fonksiyonu, OnClick fonksiyonunu geçersiz hale getirmek üzere tasarlanmıştır, parametre almaz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Map.UnClick();
});
        
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Map.UnClick();
});	
        </script>

        </body>
</html>
        

GetLastClickedPoint

Son tıklanan noktanın lat, lon, pixel zoom ve sol-sağ tıklama değerlerini döndürmek üzere tasarlanmıştır. Tıklama bilgisi için sol tıkta l, sağ tıkta ise r değeri döndürülür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {
	ibbMAP.Map.GetLastClickedPoint(function (lat, lon, zoom, clickDirection, pixelX, pixelY) {
	if (arguments.lat && arguments.lon) {
	alert("lat:"+lat+" lon:"+lon+" zoom:"+ zoom +" clickDirection:"+ clickDirection + "pixelX:"+pixelX + "pixelY:"+pixelY);
	}
	else
		alert("Henüz tıklama yapılmadı !");
	});
});
<html>
            <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {
	ibbMAP.Map.GetLastClickedPoint(function (lat, lon, zoom, clickDirection, pixelX, pixelY) {
	if (arguments.lat && arguments.lon) {
	alert("lat:"+lat+" lon:"+lon+" zoom:"+ zoom +" clickDirection:"+ clickDirection + "pixelX:"+pixelX + "pixelY:"+pixelY);
	}
	else
		alert("Henüz tıklama yapılmadı !");
	});
});            
            </script>

            </body>
</html>

GetZoom

Şehir haritası 10 ila 20 arası farklı zoom seviyelerinde üretilmiştir. Hangi zoom seviyesinde olduğunuzu öğrenmek isterseniz aşağıdaki kod bloğundan faydalanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {
	ibbMAP.Map.GetZoom(function (zoom) { alert(zoom); }); 
});
        
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {
	ibbMAP.Map.GetZoom(function (zoom) { alert(zoom); }); 
});
        </script>

        </body>
</html>

SetZoom

Şehir haritası 10 ila 20 arası farklı zoom seviyelerinde üretilmiştir. Hangi zoom seviyesinde görünüm isterseniz bu fonksiyonu kullanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {
	ibbMAP.Map.SetZoom({zoom: 15}); 
});
        
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {
	ibbMAP.Map.SetZoom({zoom: 15}); 
});
        </script>

        </body>
</html>

GetCenter

Haritanın orta noktası koordinat bilgilerini döndürmek üzere tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {
	ibbMAP.Map.GetCenter(function (lat, lon) {
	   alert(lat + ", " + lon);
	}); 
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script>
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {              
	ibbMAP.Map.GetCenter(function (lat, lon) {
		alert(lat + ", " + lon);
	}); 
});
            </script>

            </body>
</html>

Goto

Enlem ve boylamı verilen konuma gitmek için tasarlanmıştır. zoom seviyesi verdiğiniz takdirde verilen koordinatlara belirtilen seviyeye yaklaşarak gider. effect parametresini true olarak verdiğiniz takdirde belirtilen konuma efektle gidilecektir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.Goto({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		zoom: 19,
		effect: true
	});
}); 
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.Goto({lat: 41.01371789571470, lon: 28.95547972584920, zoom: 19, effect: true});
});
        </script>

        </body>
</html>

FixCoordinate

Enlem ve boylamı verilen konumu harita üzerinde sabitlemek için kullanılır.zoom seviyesi atandığında belirtilen konumda kilitleme yapılır. minZoom ve maxZoom parametreleriyle harita üzerindeki yaklaşma ve uzaklaşma ölçekleri de belirlenebilir. Zoom seviyeleri boş geçildiğinde haritanın o andaki zoom seviyesi değer olarak alınır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
    ibbMAP.Map.FixCoordinate({
        lat: 41.01371789571470,
        lon: 28.95547972584920,        
        zoom: 20,
        maxZoom: 21,
        minZoom: 19
     });
}); 
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
   ibbMAP.Map.FixCoordinate({
        lat: 41.01371789571470,
        lon: 28.95547972584920,       
        zoom: 20,
        maxZoom: 21,
        minZoom: 19
     });
});
        </script>

        </body>
</html>

FixExtent

Harita extent koordinatları verilen konumu harita üzerinde sabitlemek için kullanılır.zoom seviyesi atandığında belirtilen konumda kilitleme yapılır. minZoom ve maxZoom parametreleriyle harita üzerindeki yaklaşma ve uzaklaşma ölçekleri de belirlenebilir. Zoom seviyeleri boş geçildiğinde haritanın o andaki zoom seviyesi değer olarak alınır. drag parametresi false olarak verildiğinde harita üzerinde sağa sola gidilemez.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
    ibbMAP.Map.FixExtent({
        minLat: 41.06084458,
        minLon: 28.87739182,
        maxLat: 41.00801397,
        maxLon: 28.96356583,
        drag: true,
        zoom: 15,
        maxZoom: 16,
        minZoom: 14
     });
}); 
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
    ibbMAP.Map.FixExtent({
        minLat: 41.06084458,
        minLon: 28.87739182,
        maxLat: 41.00801397,
        maxLon: 28.96356583,
        drag: true,
        zoom: 15,
        maxZoom: 16,
        minZoom: 14
     });
});
        </script>

        </body>
</html>

FixRelease

FixRelease fonksiyonu, FixCoordinate ve FixExtent fonksiyonunlarını geçersiz hale getirmek üzere tasarlanmıştır, parametre almaz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	  ibbMAP.Map.FixRelease();
}); 
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	  ibbMAP.Map.FixRelease();
});
        </script>

        </body>
</html>

OnlyMap

Şehir haritasının tüm menülerini kapatarak sadece altlık haritasını görünür hale getirmek üzere tasarlanmış bir fonksiyondur. OnlyMap fonksiyonu yerine iframe içerisinde URL olarak http://sehirharitasi.ibb.gov.tr/#onlyMap 'i de kullanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.OnlyMap(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.OnlyMap(); 
}); 
        </script>

        </body>
</html>

Print

Print fonksiyonu ile şehir haritasını kolaylıkla yazdırabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.Print(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
 var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.Print(); 
});
        </script>

        </body>
</html>

Toolbar

Toolbar fonksiyonu, şehir haritasını ihtiyacınıza göre özelleştirebilmeniz için tasarlanmıştır. Network, panorama, layers, menu, rightMenu, search, language, traffic, mapSwitch, label, clear, coordinate, clear, measure, print, location, legend, zoomIn ve zoomOut paramatreleri ile şehir haritasında görüntülemek ya da kaldırmak istediğiniz alt menüleri belirtebilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.Toolbar({
		network: true,
		panorama: false,
		menu: true,
		layers: false,
		search: true,
		mapSwitch: true,
		traffic: true
	});     
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.Toolbar({
		network: true,
		panorama: false,
		menu: true,
		layers: false,
		search: true,
		mapSwitch: true,
		traffic: true
	});
});
        </script>

        </body>
</html>

ZoomIn

ZoomIn fonksiyonunu, şehir haritası üzerinde bir seviye yaklaşmak için kullanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.ZoomIn();     
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.ZoomIn();     
});
        </script>

        </body>
</html>

ZoomOut

ZoomOut fonksiyonunu, şehir haritası üzerinde bir seviye uzaklaşmak için kullanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.ZoomOut();
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Map.ZoomOut();
});
        </script>

        </body>
</html>

GetSize

GetSize fonksiyonu, harita boyutlarını pixel formatında döndürmek üzere tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	ibbMAP.Map.GetSize(function (en, boy) {                    
		alert("en:" + en + " boy:" + boy);
	});
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	ibbMAP.Map.GetSize(function (en, boy) {                    
		alert("en:" + en + " boy:" + boy);
	});
});
            </script>

            </body>
</html>

GetExtent

GetExtent fonksiyonu, harita extent koordinat bilgilerini döndürmek üzere tasarlanmıştır. Köşe koordinatlarının en küçük ve en büyük lon, lat bilgilerini döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	ibbMAP.Map.GetExtent(function (minLon, minLat, maxLon, maxLat) {                    
		alert("minLon:" + minLon + " minLat:" + minLat + " maxLon:" + maxLon + " maxLat:" + maxLat);
	});
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	ibbMAP.Map.GetExtent(function (minLon, minLat, maxLon, maxLat) {                    
		alert("minLon:" + minLon + " minLat:" + minLat + " maxLon:" + maxLon + " maxLat:" + maxLat);
	});
});
            </script>

            </body>
</html>

GotoExtent

GotoExtent fonksiyonu, harita üzerinde extent koordinatları verilen konuma gitmek üzere tasarlanmıştır. effect parametresini true olarak verdiğiniz takdirde belirtilen konuma efektle gidilecektir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	ibbMAP.Map.GotoExtent({
		minLat: 41.00801397,
		minLon: 28.87739182,  
		maxLat: 41.06084458,
		maxLon: 28.96356583,
		effect:true		
     });
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	ibbMAP.Map.GotoExtent({
		minLat: 41.00801397,
		minLon: 28.87739182,  
		maxLat: 41.06084458,
		maxLon: 28.96356583,
		effect:true		
     });
});
            </script>

            </body>
</html>

GetInformation

GetInformation fonksiyonu, harita koordinat bilgileri verilen konumdaki nesneyi harita üzerinde işaretlemek için kullanılır. title parametresi ile görüntülenecek mesaj parametresine başlık atayabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.GetInformation({
                 lon: 28.88254166,
                 lat: 41.03469355,
                 title:'Başlık'
        });
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	 ibbMAP.Map.GetInformation({
                lon: 28.88254166,
                lat: 41.03469355,
                title:'Başlık'
        });
});
            </script>

            </body>
</html>

GetLocation

GetLocation fonksiyonu, konumunuzu harita üzerinde görüntülemek için kullanılır. Parametre almaz. GetLocation fonksiyonunun çalışabilmesi için oluşturulan iframe üzerinden gerekli izinlerin verilmesi ayrıca şehir haritasının https olarak çağrılması gerekir. allow="geolocation *;" gibi. Lokasyon koordinatlarını callback yapısıyla almak mümkündür. Konum servisinin doğruluğu alınan internet bağlantısına göre değişebilmektedir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 	ibbMAP.Map.GetLocation(function (lon, lat) {
			console.info(lon+" "+lat);                   
		});
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="https://sehirharitasi.ibb.gov.tr/" allow="geolocation *;">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	ibbMAP.Map.GetLocation(function (lon, lat) {
        console.info(lon+" "+lat);                   
    });
});
            </script>

            </body>
</html>

AreaMeasure

AreaMeasure fonksiyonu, harita üzerinde alan ölçümü yapmak için kullanabilirsiniz. Parametre almaz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.AreaMeasure();
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	 ibbMAP.Map.AreaMeasure();
});
            </script>

            </body>
</html>

LineMeasure

LineMeasure fonksiyonu, harita üzerinde mesafe ölçümü yapmak için kullanabilirsiniz. Parametre almaz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.LineMeasure();
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	 ibbMAP.Map.LineMeasure();
});
            </script>

            </body>
</html>

Clear

Clear fonksiyonu, harita üzerinde temizleme işlemleri için kullanılır. Parametre almaz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.Clear();
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	 ibbMAP.Map.Clear();
});
            </script>

            </body>
</html>

Language

Language fonksiyonu ile haritanın dil ayarlarını Türkçe-İngilizce arasında eğiştirebilirsiniz. Language parametresine değer atanmadığı takdirde dil Türkçe ise İngilizce, İngilizce ise Türkçe olacaktır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.Language({
                 language:"TR"
        });
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP.Map.Language({
                 language:"TR"
        });
});
            </script>

            </body>
</html>

GetLanguage

GetLanguage fonksiyonu, haritanın mevcut dil seçimini callback yapısıyla döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.GetLanguage(function (dil) {                    
		alert("dil:" +dil);
	});
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	 ibbMAP.Map.GetLanguage(function (dil) {                    
		alert("dil:" +dil);
	});
});
            </script>

            </body>
</html>

Reset

Reset fonksiyonu, açık modülleri kapatır, haritayı başlangıç konumuna döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function () {   
	 ibbMAP.Map.Reset();
});
<html>
                <head>
                    <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                    <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
                </head>
            <body>

            <div id="harita" style="width:100%; height:100%">
                <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                    <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
                </iframe>
            </div>

            <script> 
var ibbMAP = new SehirHaritasiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {                 
	 ibbMAP.Map.Reset();
});
            </script>

            </body>
</html>

Add

Elinizde mevcut olan WMS ve REST harita servislerini şehir haritası üzerinde görüntüleyebilmeniz için hazırlanmıştır. Katman tipi belirtmeniz zorunludur. Katman tipi için ayrıntılı bilgiye Referans sayfasınan erişebilirsiniz. Opacity ve visibility değerleriyle katman görünürlük ayarlarını değiştirebilirsiniz. Katmanın alt katman olduğunu belirtmek için layers parametresini, WMS katmanlarda katmanın cache'ten getirilmesini engellemek içinse nocache parametresini kullanabilirisiniz. legend nesnesindeki tr ya da en parametreleriyle harita diline özel olarak png veya jpg uzantılı resimlerinizi lejant olarak ekleyebilirsiniz. legend nesnesindeki url parametresiyle de lejant üzerinde yönlendirme linki ekleyebilirsiniz. layerDefinitions parametresi ile de Rest katmanlar için sorgulama işlemleri gerçekleştirebilirsiniz. isBaseLayer parametresi ile eklenecek katmanın altlık katman olarak ekleneceğini belitrebilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){          
	ibbMAP.Layers.Add({
		name: 'ÖRNEK',
		url: 'http://SUNUCU/arcgis/rest/services/KATMAN/MapServer/export?',
		type: ibbMAP.layerTypes.Rest,
		opacity: 0.5,
		visibility: true,
		legend: { tr: ".../legend.jpg" ,url:"https://gosterileceklink.com"},		
        layers: 'show:1',                
        layerDefinitions: "1:YAPIM_ISININ_DURUMU=\'Devam Ediyor\'"
	});  
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){               
	ibbMAP.Layers.Add({name:'ÖRNEK', url:http://SUNUCU/arcgis/rest/services/KATMAN/MapServer/export?',
	type:ibbMAP.layerTypes.Rest, opacity:0.5,visibility:true,
	legend: { tr: ".../legend.jpg" ,url:"https://gosterileceklink.com"},	
    layers: 'show:1',                
    layerDefinitions: "1:YAPIM_ISININ_DURUMU=\'Devam Ediyor\'"
	});
});
        </script>

        </body>
</html>

Remove

Layers.Add metodu ile eklediğiniz katmanı kaldırabilmeniz için tasarlanmıştır. Verilen isimdeki katmanı kaldırır. İsim verilmesi zorunludur.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){       
	ibbMAP.Layers.Remove({
		name: 'Otopark'
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){      
	ibbMAP.Layers.Remove({
		name:'Otopark'
	}); 
});
        </script>

        </body>
</html>

GetOpacity

İsmi verilen katmanın saydamlık değerini döndürmek için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.GetOpacity({name: ibbMAP.layers.Harita}, function(opacity) {
		alert(opacity);
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
 var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.GetOpacity({name: ibbMAP.layers.Harita},function(opacity) {
		alert(opacity);
	}); 
});
        </script>

        </body>
</html>

SetOpacity

Verilen katmanın saydamlık değerini değiştirmek için kullanılır. Opacity değeri, 0-1 arasında seçilebilir. Opacity değeri, varsayılan olarak 1'dir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.SetOpacity({
		name: ibbMAP.layers.Harita,
		opacity: 0.5
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.SetOpacity({
		name: ibbMAP.layers.Harita,
		opacity: 0.5
	}); 
});
        </script>

        </body>
</html>

ShowToolbox

Katman yöneticisi ile katmanları kolay bir şekilde editör yapısında görüntüleyebilir, açıp kapatabilir ya da saydamlık değerlerini ayarlayabilirsiniz. Varsayılan olarak şehir haritasındaki mevcut tüm katmanlar görüntülenecektir. Ancak hiddenLayers parametresiyle istediğiniz katmanları katman yöneticisinde gizleyebilirsiniz. Referanslar sayfasından hideLayer parametresi ile ilgili ayrıntılı bilgiye erişebilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){       
	 ibbMAP.Layers.ShowToolbox({hiddenLayers: ibbMAP.layers._2015+ "," +ibbMAP.layers.Havza});         
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){       
ibbMAP.Layers.ShowToolbox({hiddenLayers: ibbMAP.layers._2015+ "," +ibbMAP.layers.Havza});         
});
        </script>

        </body>
</html>

GetActiveLayers

Şehir Haritasında mevcut olan tüm katmanların isimlerini listelemek için tasarlanmıştır. Şu an için şehir haritasında 1946'dan 2014'e hava fotoğrafları; trafik, solar harita, İski havzaları gibi çeşitli katmanlar mevcuttur. ibbMAP.layers.All diyerek de şehir haritasındaki mevcut tüm katmanları kullanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.GetActiveLayers(function (layers) {
		alert(layers);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.GetActiveLayers(function (layers) {
		alert(layers);
	});
});
        </script>

        </body>
</html>

GetBaseLayer

Aktif olarak kullanılan katmanların isimlerini göstermek üzere tasarlanmıştır. .

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Layers.GetBaseLayer(function (layer) {
		alert(layer);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Layers.GetBaseLayer(function (layer) {
		alert(layer);
	});
});
        </script>

        </body>
</html>

SetBaseLayer

Parametre olarak aldığı katman değerini uygulamada altlık olarak kullanabilmeniz için tasarlanmıştır. Kullanabileceğiniz katmanları GetActiveLayers metoduyla listeleyebilirsiniz. ibbMap.layers üst başlığındaki parametreleri de kullanabilirsiniz. ibbMAP.layers için ayrıntılı bilgiye Referans sayfasından erişebilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.SetBaseLayer({
		name: "2013"
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Layers.SetBaseLayer({
		name: "2013"
	}); 
});
        </script>

        </body>
</html>

ShowTrafficLayer

Anlık trafik durumunu güncel olarak harita üzerinde görüntüleyebilmeniz için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){     
	ibbMAP.Layers.ShowTrafficLayer(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){     
	ibbMAP.Layers.ShowTrafficLayer();
});
        </script>

        </body>
</html>

HideTrafficLayer

Trafik durumu modülünü kapatmak için kullanabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){     
	ibbMAP.Layers.HideTrafficLayer(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){     
	ibbMAP.Layers.HideTrafficLayer();
});
        </script>

        </body>
</html>

Add

Harita üzerinde işaretçi ekleme işlemi için kullanılır. Parametreleri ve kullanımı şu şekildedir: Marker.Add(lat, lon, anchorX, anchorY, zoom, effect, content, iconUrl, imageX, imageY, toolbar, draggable, showPopover, title, gotoPosition, tag callback)

  • lat ve lon parametreleri işaretçinin konumunu belirlemek için kullanılır.
  • anchorX ve anchorY parametreleri işaretçinin konumunu daha belirgin şekilde ayarlayabilmeniz içindir. Ayrıntılı bilgiye Referans sayfasındaki API değişkenleri kısmından erişebilirsiniz.
  • zoom parametresi, işaretçiyi ekledikten sonra ilgili konuma istediğiniz seviyede yaklaşmanız için kullanılır. Boş bıraktığınız takdirde seviye değişmeden işaretçi eklenecektir.
  • content parametresi ile işaretçinin mesaj baloncuğunda istediğiniz içeriği görüntüleyebilirsiniz.
  • effect parametresini true olarak verdiğiniz takdirde ilgili konuma efektle gidilecektir.
  • İkon boyutunu ayarlamak için imageX ve imageY parametrelerinden birini kullanmanız gerekmektedir. İkon boyutu ya imageX ya da imageY bazında otomatik olarak ayarlanacaktır.
  • iconUrl parametresi işaretçi ikonu url'sini ayarlamak için kullanılırken ikon boyutunu ayarlamak için imageX ve imageY parametrelerini kullanmanız gerekmektedir. Şehir haritasında kullanılan ikonları kullanmak isterseniz ayrıntılı bilgiye referans sayfasındaki API değişkenleri kısmından erişebilirsiniz.
  • toolbar parametresini true olarak verdiğinizde toolbar görünür halde gelir. Toolbardaki ikonlar yardımıyla yol tarifi alma ve panoramik görüntü kullanma gibi işlemleri gerçekleştirebilirsiniz.
  • draggable parametresi ise işaretçinin sürüklenebilir olması için kullanılmaktadır.
  • showPopover parametresini true olarak verdiğinizde işaretçinin mesaj penceresi eklendiği anda görünür olmaktadır. false verildiğinde ise mesaj penceresinin görünür olması için işaretçinin tıklanması gerekmektedir.
  • title parametresinde verdiğiniz değer ise mesaj penceresine başlık olarak atanacaktır. Değer atanmadığında varsayılan olarak mesaj penceresi başlığında "Nokta" yazacaktır.
  • gotoPosition parametresi ile işaretçiyi ekledikten sonra işaretçi konumuna gidebilirsiniz.
  • tag parametresi ile dışarıdan id ataması yapabilirsiniz.
  • opacity ile marker ikonunun parlaklık değerini ayarlayabilirsiniz.
  • closeotherpopups parametresine true değerini set ettiğinizde marker tıklandığında diğer markerların bilgi penceresi kapanacaktır.
  • cluster parametresi true olarak set edildiğinde true olarak set edilen markerlar kümelenmi,ş olarak görünürler.
  • callback işaretçiyi ekledikten sonra ID bilgisini geri döndürür.
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
ibbMAP.Marker.Add({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		effect: true,
		iconUrl: ibbMAP.icons.Info,
		zoom: 18,
		gotoPosition: true,
		draggable: true,
		showPopover: true,
		content: 'İBB Binası',
		title: 'Bilgi',
		anchorX: ibbMAP.anchors.Left,
		anchorY: ibbMAP.anchors.Top,
		opacity:0.4
	},
	function(id){
		alert(id);
	});        
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.Add({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		effect: true,
		iconUrl: ibbMAP.icons.Info,
		zoom: 18,
		gotoPosition: true,
		draggable: true,
		showPopover: true,
		content: 'İBB Binası',
		title: 'Bilgi',
		anchorX: ibbMAP.anchors.Left,
		anchorY: ibbMAP.anchors.Top,
		opacity:0.4
	},
	function(id){
		alert(id);
	}); 	
});
        </script>

        </body>
</html>

Cluster

Harita üzerinde işaretçileri toplu olarak kümelenmiş şekilde ekleme işlemi için kullanılır. Markers parametresine aşağıdaki örnekte görüleceği gibi basit bir Json dizesi eklemek gerekir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
			ibbMAP.Marker.Cluster({
				markers:[{
						"content": "içerik 1",
						"lat": "40.99984330713740",
						"lon": "28.95547920644820",
						"title": "Başlık 1",
						"toolbar": true
					},
					{
						"content": "içerik 2",
						"lat": "40.94884330713740",
						"lon": "28.95747920644820",
						"title": "Başlık 2",
						"toolbar": true
					},
					{
						"content": "içerik 3",
						"lat": "41.09984330713740",
						"lon": "28.85547920644820",
						"title": "Başlık 3",
						"toolbar": true
					}
					,{
						"content": "içerik 4",
						"lat": "41.02984330713740",
						"lon": "28.65547920644820",
						"title": "Başlık 4",
						"toolbar": true
					}
					,{
						"content": "içerik 5",
						"lat": "41.09974330713740",
						"lon": "28.85577920644820",
						"title": "Başlık 5",
						"toolbar": true
					}] 
			});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.Cluster({
				markers:[{
						"content": "içerik 1",
						"lat": "40.99984330713740",
						"lon": "28.95547920644820",
						"title": "Başlık 1",
						"toolbar": true
					},
					{
						"content": "içerik 2",
						"lat": "40.94884330713740",
						"lon": "28.95747920644820",
						"title": "Başlık 2",
						"toolbar": true
					},
					{
						"content": "içerik 3",
						"lat": "41.09984330713740",
						"lon": "28.85547920644820",
						"title": "Başlık 3",
						"toolbar": true
					}
					,{
						"content": "içerik 4",
						"lat": "41.02984330713740",
						"lon": "28.65547920644820",
						"title": "Başlık 4",
						"toolbar": true
					}
					,{
						"content": "içerik 5",
						"lat": "41.09974330713740",
						"lon": "28.85577920644820",
						"title": "Başlık 5",
						"toolbar": true
					}] 
			});
});
        </script>

        </body>
</html>

Remove

Eklediğiniz isaretcileri kaldırmak için kullanılır, eğer işaretçi id si verilir o işaretçi haritadan kaldırır herhangi bir parametre verilmez ise tüm işaretçileri haritadan kaldırır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.Remove({id:'markerID'}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.Remove({id:markerID});
});
        </script>

        </body>
</html>

OnDrag

İşaretçi konumu değiştiğinde aktif olur. Callback yapısıyla işaretçinin id, lat ve lon değerlerini döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.OnDrag(function (id, lat, lon) { 
		alert(id + "," + lat + ", " + lon);
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.OnDrag(function (id, lat, lon) {
		alert(id + "," + lat + ", " + lon);
	}); 
});
        </script>

        </body>
</html>

OnClick

İşaretçi tıklandığında aktif olur. Callback yapısıyla işaretçinin id değerini döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.OnClick(function (id) { 
		alert(id);
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){   
	ibbMAP.Marker.OnClick(function (id) {
		alert(id);
	}); 
});
        </script>

        </body>
</html>

Edit

Editörde sunulan metodlardandır. Yapılan çizimleri düzenleyebilmeniz için eklenmiştir. Bu metodu çalıştırabilmeniz için önce Draw.Select metodu ile düzenlenecek çizimi seçmeniz gerekmektedir. Callback yapısıyla yapılan çizimin wkt'sini döndürebilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Edit( function(wkt){	alert(wkt);});     
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Edit(function(wkt){	alert(wkt);});     
});
        </script>

        </body>
</html>

Finish

Çizim işlemlerini bitirmek için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Finish();
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Finish(); 
}); 
        </script>

        </body>
</html>

OnClick

Çizim tıklandığında aktif olur.ID ve varsa tag değerlerini döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.OnClick(function (id) { 
		alert(id);
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.OnClick(function (id) { 
		alert(id);
	}); 
});
        </script>

        </body>
</html>

OnDrag

Çizim sürüklendiğinde aktif olur.ID, lat, lon ve yeni WKT değerlerini döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.OnDrag(function (id, lat, lon, wkt) { 
		alert(id + "," + lat + ", " + lon + ", " + wkt);
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.OnDrag(function (id, lat, lon, wkt) { 
		alert(id + "," + lat + ", " + lon + ", " + wkt);
	}); 
});
        </script>

        </body>
</html>

Remove

ID verildiği takdirde belirtilen çizim yoksa tüm çizimleri kaldırır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Remove();     
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Remove();       
});
        </script>

        </body>
</html>

RemoveSelected

Editörde sunulan metodlardandır. Yapılan çizimleri tek tek silebilmeniz için eklenmiştir. Bu metodu çalıştırabilmeniz için önce Draw.Select metodu ile silinecek çizimi seçmeniz gerekmektedir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.RemoveSelected();   
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.RemoveSelected(); 
});
        </script>

        </body>
</html>

Select

Editörde sunulan metodlardandır. Yapılan çizimleri seçebilme imkanı sağlar. Çizimleri düzenleme ya da silme işlemi yapabilmeniz için önce seçim yapmanız gerekmektedir. Seçilen çizimin id'si döndürülür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Select(function (id) { alert(id); });
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){                 				  
	ibbMAP.Draw.Select();     				  
});
        </script>

        </body>
</html>

ShowToolbox

Çizim ile ilgili tüm işlemlerinizi editör üzerinden gerçekleştirebilirsiniz. Tür seçimine göre çizim yapabilir, seçili çizimlerinizi düzenleyebilir, silebilir ya da çizim işlemlerini kapatabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){     
	ibbMAP.Draw.ShowToolbox(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){     
	ibbMAP.Draw.ShowToolbox(); 
}); 
        </script>

        </body>
</html>

Start

Verilen parametrelere göre çizim fonksiyonunu hazır hale getirmek için kullanılır. Seçebileceğiniz türler point, polygon, circle ve linestring'dir. type parametresi ile ilgili ayrıntılı bilgiye Referans sayfasından erişebilirsiniz. drawingStyle, cursorStyle ve style nesneleriyle çizime stil atayabilirsiniz. drawingStyle parametresi çizim anındaki stili, cursorStyle imleç stilini, style is çizimin nihai stilini belirlemek için kullanılır. Çizim parametreleri ile ilgili ayrıntılı bilgiye referans sayfasından erişebilirsiniz. Callback yapısıyla çizim wkt'sini ve id'sini döndürebilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Start(
		{
			style:
			{	fillColor: '#FFFFFF',
				strokeColor: '#EC0C0C',
				strokeOpacity: 0.2,
				fillOpacity: 1,
				strokeWidth: 3,
				strokeDashStyle: '1'
			},
			drawingStyle:{
				strokeColor: '#FFFFCC',
				strokeOpacity: 0.8,
				fillColor: '#FFCC99',
				fillOpacity: 0.7,
				strokeWidth: 8,
				strokeDashStyle: '9 10'
			},
			cursorStyle:
			{
				strokeColor: '#99ccff',
				strokeOpacity: 0.5,
				fillColor: '#fefefe',
				fillOpacity: 0.1,
				strokeWidth: 4,
				strokeDashStyle:'8 0',
				radius: 3
			},
			type: ibbMAP.geomTypes.Polygon,
			draggable: true
		}, 
		function(wkt, id){
			alert(wkt + "," + id );
		});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.Start(
		{
			style:
			{	fillColor: '#FFFFFF',
				strokeColor: '#EC0C0C',
				strokeOpacity: 0.2,
				fillOpacity: 1,
				strokeWidth: 3,
				strokeDashStyle: '1'
			},
			drawingStyle:{
				strokeColor: '#FFFFCC',
				strokeOpacity: 0.8,
				fillColor: '#FFCC99',
				fillOpacity: 0.7,
				strokeWidth: 8,
				strokeDashStyle: '9 10'
			},
			cursorStyle:
			{
				strokeColor: '#99ccff',
				strokeOpacity: 0.5,
				fillColor: '#fefefe',
				fillOpacity: 0.1,
				strokeWidth: 4,
				strokeDashStyle:'8 0',
				radius: 3
			},
			type: ibbMAP.geomTypes.Polygon,
			draggable: true
		}, 
		function(wkt, id, style){
			alert(wkt + "," + id);
		});
});
        </script>

        </body>
</html>

WKT

Wkt formatında aldığı geometrik datayı harita üzerinde çizmek için tasarlanmıştır. wkt, effect, tag, zoom ve style parametrelerini alabilir. zoom parametresini true verdiğinizde harita üzerinde ilgili konuma yaklaşılacaktır. effect parametresini true olarak verdiğiniz takdirde belirtilen konuma efektle gidilecektir. tag parametresi ile dışarıdan id ataması yapabilirsiniz. style parametresi ile ilgili ayrıntılı açıklamaya referans safasından erişebilirsiniz. Callback yapısıyla id'sini ve varsa tag parametresini alabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.WKT(
		{
			style:
			{
				strokeColor: '#FFFFFF',
				strokeOpacity: 1,
				fillColor: '#0080FF',
				fillOpacity: 0.7,
				strokeWidth: 4,
				strokeDashStyle: '8 10'
			},
			wkt: "POLYGON ((29.145469344 40.85195596, 29.145536353 40.851863473, 29.145564568 40.851812375, 29.145855754 40.851924604, 29.145748349 40.852081624, 29.145469344 40.85195596))",
			tag: "cizim",
			zoom: true,
			effect:true
		},
		function(id, tag){
			alert("id:" + id + ", tag:" + tag);
		});
	});     
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.WKT(
		{
			style:
			{
				strokeColor: '#FFFFFF',
				strokeOpacity: 1,
				fillColor: '#0080FF',
				fillOpacity: 0.7,
				strokeWidth: 4,
				strokeDashStyle: '8 10'
			},
			wkt:"POLYGON ((29.145469344 40.85195596, 29.145536353 40.851863473, 29.145564568 40.851812375, 29.145855754 40.851924604, 29.145748349 40.852081624, 29.145469344 40.85195596))",
            tag: "cizim",
			zoom: true,
			effect:true
		},
		function(id, tag){
			alert("id:" + id + ", tag:" + tag);
		});
	});     
 
        </script>
        </body>
</html>

SetStyle

Id'si verilen çizimin stilini değiştirmek için kullanılır.Çizimi id'sini Wkt fonksiyonunu kullanırken callback yapısıyla alabilirsiniz

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.SetStyle(
		{id:'...',
			style:
			{
				strokeColor: '#AAA',
				strokeOpacity: 0.3,
				fillColor: '#0180AF',
				fillOpacity: 1,
				strokeWidth: 10,
				strokeDashStyle: '5 10'
			}
		});
	});     
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Draw.SetStyle(
		{id:'...',
			style:
			{
				strokeColor: '#AAA',
				strokeOpacity: 0.3,
				fillColor: '#0180AF',
				fillOpacity: 1,
				strokeWidth: 10,
				strokeDashStyle: '5 10'
			}
		});
	});     
 
        </script>
        </body>
</html>

Bilgi fonksiyonlarının yapısı ve kullanımı birbirine benzerdir. district parametresine verdiğiniz ilçe adına göre istediğiniz ilçedeki kayıtları getirmeniz mümkündür. district parametresi boş kaldığında ya da geçersiz bir metin girildiğinde İstanbul genelindeki tüm bilgiler gelecektir.

Contact

İstanbul genelindeki İBB'ye ait iletişim noktalarını görüntüleyebilmeniz için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.Contact({
		district: ""
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.Contact({
		district: ""
	}); 
});
        </script>

        </body>
</html>

Pharmacy

Pharmacy fonksiyonu, İstanbul genelindeki nöbetçi eczaneleri görüntüleyebilmeniz için tasarlanmıştır. Nöbetçi eczane verileri İstanbul Eczacılar Odası tarafından sağlanmaktadır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."},function(){  
	ibbMAP.InformationServices.Pharmacy({
		district: "Fatih"
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."},function(){  
	ibbMAP.InformationServices.Pharmacy({
		district: "Fatih"
	});
});
        </script>

        </body>
</html>

Social

İstanbul genelindeki İBB'ye ait sosyal tesisleri görüntüleyebilmeniz için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.InformationServices.Social({
		district: ""
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.Social({
		district: ""
	});
});
        </script>

        </body>
</html>

Sports

İstanbul genelindeki spor tesislerini görüntüleyebilmeniz için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.InformationServices.Sports();
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.InformationServices.Sports();
});
        </script>

        </body>
</html>

Bazaar

İstanbul genelindeki İBB'ye ait pazar yerleri noktalarını ve harita katmanını görüntüleyebilmeniz için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.Bazaar({
		district: ""
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.Bazaar({
		district: ""
	}); 
});
        </script>

        </body>
</html>

StoryIstanbul

İstanbul hikayeleri modülünün kullanımı için hazırlanmıştır. Language parametresiyle İngilizce de seçilebilir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.InformationStoryIstanbul({
		language: "EN"
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.InformationStoryIstanbul({
		language: "EN"
	}); 
});
        </script>

        </body>
</html>

StoryIstanbulOnClose

İstanbul hikayeleri modülü kapandığında aktif olan eventtır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
		ibbMAP.InformationServices.StoryIstanbulOnClose(function(){alert("kapandı");});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
		ibbMAP.InformationServices.StoryIstanbulOnClose(function(){alert("kapandı");});
});
        </script>

        </body>
</html>

Close

Bilgi servisi modülünün kapanması için tasarlanmıştır. Parametre almaz

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.Close();
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.InformationServices.InformationStoryIstanbul(); 
});
        </script>

        </body>
</html>

Close

RouteAnalysis.Close fonksiyonu, şehir haritasında yapılmış güzergah belirleme işlemlerini kapatmak için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.RouteAnalysis.Close(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.RouteAnalysis.Close(); 
});
        </script>

        </body>
</html>

Drive

Başlangıç, ara nokta ve bitiş koordinatları verilen iki nokta için yol tarifi üretmek üzere tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.Drive({
		start:
		{
			lat: 41.014017435981,
			lon: 28.945408741105
		},
		waystation:"lat: 41.01591536,lon: 28.96442413&lat:41.11790056,lon:29.03926849&lat:41.08478566,lon:29.07978058",

		finish:
		{
			lat: 41.039437311878,
			lon: 29.085595529838
		}
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.Drive({
		start:
		{
			lat: 41.014017435981,
			lon: 28.945408741105
		},
		finish:
		{
			lat: 41.039437311878,
			lon: 29.085595529838
		}
	});
});
        </script>

        </body>
</html>

GetState

RouteAnalysis.GetState fonksiyonu, şehir haritasında güzergah analizi menüsünün görünürlüğünü döndürür. Dönen değer, yol tarif modülünün değerine göre false, YolTarifi ya da TUBS olabilir

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.RouteAnalysis.GetState(function (state) {
		alert(state);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.RouteAnalysis.GetState(function (state) {
		alert(state);
	});
});
        </script>

        </body>
</html>

TUBS(Toplu Ulaşım Bilgi sistemi)

YolTarifi metoduna benzer çalışır. Başlangıç ve bitiş koordinatları verilen noktalar arası toplu taşıma güzergahı oluşturur. TUBS metodunda varış tarih ve zamanını belirtebilir, tercih edilecek araçları seçebilirsiniz. TUBS'da seçebileceğiniz araçlar SUBWAY(metro), METROBUS(metrobüs), TRAM(tramvay), RAIL(marmaray), FERRY(vapur) , MINIBUS(minibüs), FUNICULAR(füniküler), SHARETAXI(dolmuş), GONDOLA(teleferik), WALK(yürüyüş) ve BUS(otobüs)'tır. noparameter değerini true verirseniz ayar yapacağınız kısım kapalı olacaktır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.TUBS({
		start:
		{
			lat: 41.01662773,
			lon: 28.91846180
		},
		finish:
		{
			lat: 41.00781966,
			lon: 28.93090725
		},
		type: "BUS,SUBWAY,WALK",
		time: "20:00",
		date: "2016-06-24"
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.TUBS({
		start:
		{
			lat: 41.01662773,
			lon: 28.91846180
		},
		finish:
		{
			lat: 41.00781966,
			lon: 28.93090725
		},
		type: "BUS,SUBWAY,WALK",
		time: "20:00",
		date: "2016-06-24"
	}); 
});
        </script>

        </body>
</html>

HideDrive

Güzergah analizi yapılırken yol tarifi modlünü gizlemek için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.HideDrive(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.HideDrive(); 
});
        </script>

        </body>
</html>

HideTUBS

Güzergah analizi yapılırken TUBS modlünü gizlemek için tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.HideTUBS(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.RouteAnalysis.HideTUBS(); 
});
        </script>

        </body>
</html>

Open

Search.Open fonksiyonu, şehir haritası arama fonksiyonunu aktifleştirmek için kullanılır. query parametresiyle verdiğiniz değeri şehir haritasında aratabilirsiniz. query parametresiyle herhangi bir metin aratabileceğiniz gibi belirlenen formatta WGS84 ya da ITRF96 koordinat da aratabilirsiniz.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Search.Open({
		query: "Fatih"
	}); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Search.Open({
		query: "Fatih"
	}); 
});
        </script>

        </body>
</html>

Close

Search.Close fonksiyonu, şehir haritasında yapılmış arama işlemlerini kapatmak için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Search.Close();
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Search.Close();
});
        </script>

        </body>
</html>

GetState

Search.GetState fonksiyonu, şehir haritasının arama menüsününün görünürlüğünü döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Search.GetState(function (state) {
		alert(state);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Search.GetState(function (state) {
		alert(state);
	});
});
        </script>

        </body>
</html>

Open

Nearby.Open fonksiyonu, koordinatı verilen nokta için yakında arama işlemi yapılması için hazırlanmıştır. distance parametresiyle kaç metreye kadar arama yapabileceğinizi belirtebilirsiniz. Değer vermediğiniz takdirde varsayılan olarak 150 metreye kadar arama yapılacaktır. type parametresiyle seçim yapabileceğiniz kategoriler İBADETHANE,EĞİTİM,SAĞLIK,KAMU,ECZANE,TARİHİ ESER,BANKA ve DİĞER" dir. type parametresinde değer vermediğiniz takdirde var olan tüm kategoriler için arama yapılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Nearby.Open({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		type: "eğitim,kamu",
		distance: 300
	});  
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Nearby.Open({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		type: "eğitim,kamu",
		distance: 300
	});  
});
        </script>

        </body>
</html>

Close

Nearby.Close fonksiyonu, şehir haritasında yapılmış yakınımda ara işlemlerini kapatmak için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Nearby.Close();
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Nearby.Close();
});
        </script>

        </body>
</html>

GetState

Nearby.GetState fonksiyonu, şehir haritasında yakınımda arama işlemi menüsünün görünürlüğünü döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Nearby.GetState(function (state) {
		alert(state);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Nearby.GetState(function (state) {
		alert(state);
	});
});
        </script>

        </body>
</html>

Open

Koordinatları ve açısı verilen konumun panoramik sokak görüntülerini harita üzerinde göstermek için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){    
	ibbMAP.Panorama.Open({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		angle: 10
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){    
	ibbMAP.Panorama.Open({
		lat: 41.01371789571470,
		lon: 28.95547972584920,
		angle: 10
	});
});
        </script>

        </body>
</html>

Close

Panorama.Close fonksiyonu, açık olan panorama penceresini kapatmak için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.Close(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.Close(); 
});
        </script>

        </body>
</html>

GetState

Panorama.GetState fonksiyonu, panorama modülünün görünürlüğünü döndürür. Dönen değer, panorama modülünün değerine göre false, 2013 ya da 2018 olabilir

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.GetState(function (state) {
		alert(state);
	});    				  
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.GetState(function (state) {
		alert(state);
	});    				  
});
        </script>

        </body>
</html>

GetAngle

Callback yapısıyla panoramik görüntünün o andaki açısını döndürmek üzere tasarlanmıştır. Panoramik görüntü modülü kapalı olduğunda 0 değerini döndürecektir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.GetAngle(function (angle) {
		alert(angle);
	});    				  
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.GetAngle(function (angle) {
		alert(angle);
	});    				  
});
        </script>

        </body>
</html>

SetAngle

Panoramik görüntünün açısını belirleyeceğiniz bir değerle değiştirmek için kullanılır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.SetAngle({
		angle: 300
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.SetAngle({
		angle: 300
	});
});
        </script>

        </body>
</html>

OnAngleChanged

Callback yapısıyla kullanabileceğiniz fonksiyon, panoramik görüntü açısı değiştikçe yeni açıyı döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Panorama.Open({
		lat: 41.01371789571470,
		lon: 28.95547972584920
	});
	ibbMAP.Panorama.OnAngleChanged(function(angle){
		alert(angle);
	});       
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){    
	ibbMAP.Panorama.Open({
			lat: 41.01371789571470,
			lon: 28.95547972584920
		});
	ibbMAP.Panorama.OnAngleChanged(function (angle) {alert(angle);});
});
        </script>

        </body>
</html>

UnAngleChanged

Panorama.UnAngleChanged fonksiyonu, Panorama.OnAngleChanged fonksiyonunu geçersiz hale getirir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.UnAngleChanged(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.UnAngleChanged(); 
});
        </script>

        </body>
</html>

OnPositionChanged

Callback yapısıyla kullanabileceğiniz fonksiyon, panoramik görüntü konumu değiştikçe yeni konum lat ve lon değerini döndürür.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Panorama.OnPositionChanged(function (lat, lon) {
		alert("lat:" + lat + " lon:" + lon);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){                  
	ibbMAP.Panorama.OnPositionChanged(function (lat, lon) {
		alert("lat:" + lat + " lon:" + lon);
	});
});
        </script>

        </body>
</html>

UnPositionChanged

Panorama.UnPositionChanged fonksiyonu, Panorama.OnPositionChanged fonksiyonunu geçersiz hale getirir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){           
	ibbMAP.Panorama.UnPositionChanged(); 
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Panorama.UnPositionChanged(); 
});
        </script>

        </body>
</html>

WGS84toITRF

WGS84toITRF fonksiyonu, WGS84 koordinat sisteminde verilen koordinatların ITRF koordinat sistemindeki karşılıklarını üretmek üzere tasarlanmıştır. Aşağıdaki kod bloğu WGS84 koordinat sisteminde verilen koordinat çiftinin Itrf koordinat sistemindeki karşılığını döndürmektedir.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Convert.WGS84toITRF(
	{
		lat: 41.01371789571470,
		lon: 28.95547972584920
	},
	function (lat, lon) {
		alert(lat + "," + lon);
	});          			  
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
	ibbMAP.Convert.WGS84toITRF(
	{
		lat: 41.01371789571470,
		lon: 28.95547972584920
	},
	function (lat, lon) {
		alert(lat + "," + lon);
	});          			  
});
        </script>

        </body>
</html>

ITRFtoWGS84

ITRFtoWGS84 fonksiyonu, ITRF koordinat sisteminde verilen koordinatların WGS84 koordinat sistemindeki karşılıklarını üretmek üzere tasarlanmıştır. Aşağıdaki kod bloğu ITRF koordinat sisteminde verilen koordinat çiftinin WGS84 koordinat sistemindeki karşılığını döndürmektedir.

vvar ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Convert.ITRFtoWGS84(
	{
		lat: 412136.63089852757,
		lon: 4542622.325257989
	},
	function (lat, lon) {
		alert(lat + "," + lon);
	});
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
	ibbMAP.Convert.ITRFtoWGS84(
	{
		lat: 412136.63089852757,
		lon: 4542622.325257989
	},
	function (lat, lon) {
		alert(lat + "," + lon);
	});
});
        </script>

        </body>
</html>

WktExtent

WktExtent fonksiyonu, verilen WKT'nin extent bilgilerini callback yapısında döndürme üzere tasarlanmıştır.

var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
ibbMAP.Calculate.WktExtent({
    wkt: "POLYGON ((29.145469344 40.85195596, 29.145536353 40.851863473, 29.145564568 40.851812375, 29.145855754 40.851924604, 29.145748349 40.852081624, 29.145469344 40.85195596))"},
function (minLon, minLat, maxLon, maxLat) {
alert("minLon:" + minLon + " minLat:" + minLat + " maxLon:" + maxLon + " maxLat:" + maxLat);
   });        			  
});
<html>
            <head>
                <style type="text/css"> html, body, #mapFrame { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
                <script src="http://sehirharitasi.ibb.gov.tr/api/map2.js"></script>
            </head>
        <body>

        <div id="harita" style="width:100%; height:100%">
            <iframe id="mapFrame" src="http://sehirharitasi.ibb.gov.tr/">
                <p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
            </iframe>
        </div>

        <script>
var ibbMAP = new SehirHaritasiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){ 
ibbMAP.Calculate.WktExtent({
    wkt: "POLYGON ((29.145469344 40.85195596, 29.145536353 40.851863473, 29.145564568 40.851812375, 29.145855754 40.851924604, 29.145748349 40.852081624, 29.145469344 40.85195596))" }, 
function (minLon, minLat, maxLon, maxLat) {
alert("minLon:" + minLon + " minLat:" + minLat + " maxLon:" + maxLon + " maxLat:" + maxLat);
    });         			  
});
        </script>

        </body>
</html>