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 sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/#onlyMap 'i de kullanabilirsiniz.
var ibbMAP = new sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Map.OnlyMap();
});
</script>
</body>
</html>Print fonksiyonu ile şehir haritasını kolaylıkla yazdırabilirsiniz.
var ibbMAP = new sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="https://sehirharitasiapi.ibb.gov.tr/" allow="geolocation *;">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ 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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({ mapFrame: "mapFrame", apiKey: "..." }, function () {
ibbMAP.Map.Reset();
});
</script>
</body>
</html>KATMAN FONKSİYONLARI
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Layers.ShowTrafficLayer();
});
</script>
</body>
</html>HideTrafficLayer
Trafik durumu modülünü kapatmak için kullanabilirsiniz.
var ibbMAP = new sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Layers.HideTrafficLayer();
});
</script>
</body>
</html>İŞARETÇİ FONKSİYONLARI
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Marker.OnClick(function (id) {
alert(id);
});
});
</script>
</body>
</html>Çizim Fonksiyonu
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 Servisleri Fonksiyonları
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.InformationServices.InformationStoryIstanbul();
});
</script>
</body>
</html>Güzergah Analizi Fonksiyonları
Close
RouteAnalysis.Close fonksiyonu, şehir haritasında yapılmış güzergah belirleme işlemlerini kapatmak için kullanılır.
var ibbMAP = new sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.RouteAnalysis.HideTUBS();
});
</script>
</body>
</html>Arama Fonksiyonları
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Search.GetState(function (state) {
alert(state);
});
});
</script>
</body>
</html>Yakınımda Ara Fonksiyonları
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Nearby.GetState(function (state) {
alert(state);
});
});
</script>
</body>
</html>Panorama Fonksiyonları
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Panorama.UnPositionChanged();
});
</script>
</body>
</html>Dönüşüm Fonksiyonları
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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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 sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({mapFrame:"mapFrame",apiKey:"..."}, function(){
ibbMAP.Convert.ITRFtoWGS84(
{
lat: 412136.63089852757,
lon: 4542622.325257989
},
function (lat, lon) {
alert(lat + "," + lon);
});
});
</script>
</body>
</html>Hesaplama Fonksiyonları
WktExtent
WktExtent fonksiyonu, verilen WKT'nin extent bilgilerini callback yapısında döndürme üzere tasarlanmıştır.
var ibbMAP = new sehirharitasiapiAPI({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://sehirharitasiapi.ibb.gov.tr/api/map2.js"></script>
</head>
<body>
<div id="harita" style="width:100%; height:100%">
<iframe id="mapFrame" src="http://sehirharitasiapi.ibb.gov.tr/">
<p>Tarayıcınız iframe özelliklerini desteklemiyor !</p>
</iframe>
</div>
<script>
var ibbMAP = new sehirharitasiapiAPI({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>