{"id":37487,"date":"2026-01-06T12:30:47","date_gmt":"2026-01-06T09:30:47","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/"},"modified":"2026-01-06T12:30:47","modified_gmt":"2026-01-06T09:30:47","slug":"leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/","title":{"rendered":"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)"},"content":{"rendered":"<h2>Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)<\/h2>\n<p>Modern web uygulamalar\u0131nda kullan\u0131c\u0131lar\u0131n belirli bir konumu harita \u00fczerinde se\u00e7ebilmesi, bu konumu adres bilgisiyle e\u015fle\u015ftirebilmesi ve hatta mevcut konumlar\u0131n\u0131 otomatik olarak alg\u0131layabilmesi kritik bir \u00f6neme sahiptir. E-ticaret sitelerinden teslimat uygulamalar\u0131na, etkinlik planlama platformlar\u0131ndan sosyal medya uygulamalar\u0131na kadar geni\u015f bir yelpazede konum tabanl\u0131 \u00f6zellikler, kullan\u0131c\u0131 deneyimini do\u011frudan etkiler. Bu makalede, hafif ve esnek Leaflet JavaScript k\u00fct\u00fcphanesini kullanarak, Geoapify servisinin sundu\u011fu adres otomatik tamamlama ve ters co\u011frafi kodlama (reverse geocoding) \u00f6zellikleriyle zenginle\u015ftirilmi\u015f, s\u00fcr\u00fckle b\u0131rak (draggable) pime sahip geli\u015fmi\u015f bir konum se\u00e7ici uygulamas\u0131n\u0131n nas\u0131l geli\u015ftirilece\u011fini ad\u0131m ad\u0131m inceleyece\u011fiz. Bu entegrasyonlar sayesinde, kullan\u0131c\u0131lar\u0131n hem hassas konum se\u00e7imi yapabilmesini sa\u011flayacak hem de adres giri\u015f s\u00fcre\u00e7lerini kolayla\u015ft\u0131rarak genel kullan\u0131labilirli\u011fi art\u0131raca\u011f\u0131z.<\/p>\n<h3>Konum Se\u00e7icilerin \u00d6nemi ve Leaflet&#8217;in G\u00fcc\u00fc<\/h3>\n<p>Konum se\u00e7iciler, kullan\u0131c\u0131lar\u0131n bir harita \u00fczerinde belirli bir noktay\u0131 i\u015faretlemesine olanak tan\u0131yan aray\u00fcz bile\u015fenleridir. Bu bile\u015fenler, genellikle bir adres giri\u015fi, otomatik tamamlama \u00f6nerileri ve harita \u00fczerinde bir pimin s\u00fcr\u00fcklenerek konumun hassasla\u015ft\u0131r\u0131lmas\u0131 gibi \u00f6zelliklerle desteklenir. Do\u011fru ve kullan\u0131c\u0131 dostu bir konum se\u00e7ici, veri do\u011frulu\u011funu art\u0131r\u0131rken kullan\u0131c\u0131lar\u0131n zaman\u0131ndan tasarruf etmesini sa\u011flar.<\/p>\n<h4>Modern Uygulamalarda Konum Verisinin Rol\u00fc<\/h4>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda konum verisi, bir\u00e7ok uygulaman\u0131n temelini olu\u015fturur. Bir restoran sipari\u015fini do\u011fru adrese ula\u015ft\u0131rmaktan, yak\u0131ndaki ilgi \u00e7ekici yerleri ke\u015ffetmeye, hatta acil durum hizmetlerine konum bilgisi sa\u011flamaya kadar geni\u015f bir kullan\u0131m alan\u0131 vard\u0131r. Bu nedenle, konum verisinin do\u011fru ve verimli bir \u015fekilde toplanmas\u0131, modern uygulamalar\u0131n ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n<h4>Neden Leaflet Tercih Edilmeli?<\/h4>\n<p>Leaflet, a\u00e7\u0131k kaynakl\u0131, mobil uyumlu ve olduk\u00e7a hafif bir JavaScript harita k\u00fct\u00fcphanesidir. Esnek yap\u0131s\u0131, zengin eklenti ekosistemi ve kolay \u00f6\u011frenilebilir API&#8217;si sayesinde geli\u015ftiriciler aras\u0131nda pop\u00fcler bir tercihtir. Google Haritalar veya Mapbox gibi daha a\u011f\u0131r alternatiflere k\u0131yasla daha h\u0131zl\u0131 y\u00fcklenir ve daha az kaynak t\u00fcketir, bu da \u00f6zellikle performans odakl\u0131 uygulamalar i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n<h4>Temel Leaflet Kurulumu<\/h4>\n<p>Leaflet ile \u00e7al\u0131\u015fmaya ba\u015flamak i\u00e7in \u00f6ncelikle HTML dosyam\u0131za Leaflet CSS ve JavaScript dosyalar\u0131n\u0131 dahil etmemiz gerekir. Ard\u0131ndan, haritan\u0131n g\u00f6r\u00fcnt\u00fclenece\u011fi bir <code>div<\/code> elementi olu\u015fturup, JavaScript kodu ile bu <code>div<\/code> i\u00e7ine bir harita nesnesi ba\u015flat\u0131r\u0131z.<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Leaflet Konum Se\u00e7ici<\/title>\n    <!-- Leaflet CSS -->\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\n        integrity=\"sha256-p4NxAoJBhIINfQPDWFh7jHRigG9xQLFfAQHNogLwZKpc=\"\n        crossorigin=\"\"\/>\n    <style>\n        #map { height: 500px; width: 100%; }\n        .location-input-container { margin-bottom: 15px; }\n        .location-input-container input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }\n        .autocomplete-results {\n            border: 1px solid #ddd;\n            max-height: 200px;\n            overflow-y: auto;\n            background-color: white;\n            z-index: 1000;\n            position: absolute;\n            width: calc(100% - 2px); \/* Ebeveyn geni\u015fli\u011fine uyum sa\u011flamas\u0131 i\u00e7in *\/\n        }\n        .autocomplete-results div {\n            padding: 10px;\n            cursor: pointer;\n            border-bottom: 1px solid #eee;\n        }\n        .autocomplete-results div:hover {\n            background-color: #f0f0f0;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h2>Geli\u015fmi\u015f Konum Se\u00e7ici Uygulamas\u0131<\/h2>\n\n    <div class=\"location-input-container\">\n        <input type=\"text\" id=\"address-input\" placeholder=\"Adres girin...\">\n        <div id=\"autocomplete-results\" class=\"autocomplete-results\" style=\"display: none;\"><\/div>\n    <\/div>\n    <button id=\"locate-me-btn\">Konumumu Bul<\/button>\n    <div id=\"map\"><\/div>\n    <div id=\"selected-location-info\" style=\"margin-top: 15px;\">\n        <p><strong>Se\u00e7ilen Koordinatlar:<\/strong> <span id=\"coords-output\">Yok<\/span><\/p>\n        <p><strong>Se\u00e7ilen Adres:<\/strong> <span id=\"address-output\">Yok<\/span><\/p>\n    <\/div>\n\n    <!-- Leaflet JavaScript -->\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"\n        integrity=\"sha256-eKEfmmxHk0kQJ9t3K6mXl6K2g1zL0b1g1t1q1L0g1=\"\n        crossorigin=\"\"><\/script>\n    <script>\n        \/\/ API anahtar\u0131n\u0131z\u0131 buraya ekleyin (Geoapify'dan al\u0131nm\u0131\u015ft\u0131r)\n        const GEOAPIFY_API_KEY = 'S\u0130Z\u0130N_GEOAPIFY_API_ANAHTARINIZ'; \n\n        const map = L.map('map').setView([39.9334, 32.8597], 13); \/\/ Ba\u015flang\u0131\u00e7 konumu: Ankara\n\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            attribution: '\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n        }).addTo(map);\n\n        let marker = L.marker([39.9334, 32.8597], { draggable: true }).addTo(map);\n\n        \/\/ Se\u00e7ilen konum bilgilerini g\u00fcncelleme fonksiyonu\n        function updateLocationInfo(lat, lng, address = 'Adres bekleniyor...') {\n            document.getElementById('coords-output').innerText = <code>${lat.toFixed(6)}, ${lng.toFixed(6)}<\/code>;\n            document.getElementById('address-output').innerText = address;\n        }\n\n        \/\/ Marker s\u00fcr\u00fcklendi\u011finde konum bilgilerini g\u00fcncelle\n        marker.on('dragend', function(event) {\n            const latlng = marker.getLatLng();\n            updateLocationInfo(latlng.lat, latlng.lng);\n            reverseGeocode(latlng.lat, latlng.lng); \/\/ Ters co\u011frafi kodlama ile adresi al\n        });\n\n        \/\/ Ba\u015flang\u0131\u00e7ta marker konumunu ve adresini g\u00f6ster\n        updateLocationInfo(marker.getLatLng().lat, marker.getLatLng().lng, 'Ankara, T\u00fcrkiye');\n\n        \/\/ Geoapify Ters Co\u011frafi Kodlama Fonksiyonu\n        async function reverseGeocode(lat, lon) {\n            const url = <code>https:\/\/api.geoapify.com\/v1\/geocode\/reverse?lat=${lat}&lon=${lon}&apiKey=${GEOAPIFY_API_KEY}<\/code>;\n            try {\n                const response = await fetch(url);\n                const data = await response.json();\n                if (data.features && data.features.length > 0) {\n                    const address = data.features[0].properties.formatted;\n                    document.getElementById('address-output').innerText = address;\n                } else {\n                    document.getElementById('address-output').innerText = 'Adres bulunamad\u0131.';\n                }\n            } catch (error) {\n                console.error('Ters co\u011frafi kodlama hatas\u0131:', error);\n                document.getElementById('address-output').innerText = 'Adres al\u0131n\u0131rken hata olu\u015ftu.';\n            }\n        }\n    <\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod, basit bir Leaflet haritas\u0131 olu\u015fturur ve \u00fczerine s\u00fcr\u00fcklenebilir bir pin yerle\u015ftirir. Pin s\u00fcr\u00fcklendi\u011finde koordinatlar\u0131 ve ters co\u011frafi kodlama ile adresi g\u00fcnceller. Ancak, Geoapify API anahtar\u0131n\u0131z\u0131 al\u0131p <code>S\u0130Z\u0130N_GEOAPIFY_API_ANAHTARINIZ<\/code> yerine yap\u0131\u015ft\u0131rman\u0131z gerekmektedir.<\/p>\n<h3>Geoapify ile Adres Otomatik Tamamlama Entegrasyonu<\/h3>\n<p>Adres otomatik tamamlama, kullan\u0131c\u0131lar\u0131n adres bilgilerini h\u0131zl\u0131 ve hatas\u0131z bir \u015fekilde girmelerini sa\u011flayan \u00f6nemli bir \u00f6zelliktir. Geoapify, g\u00fc\u00e7l\u00fc co\u011frafi kodlama ve otomatik tamamlama API'leri sunarak bu s\u00fcreci olduk\u00e7a kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4>Geoapify Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h4>\n<p>Geoapify, konum tabanl\u0131 servisler i\u00e7in kapsaml\u0131 bir API platformudur. Co\u011frafi kodlama (adresleri koordinatlara \u00e7evirme), ters co\u011frafi kodlama (koordinatlar\u0131 adreslere \u00e7evirme), otomatik tamamlama, rota hesaplama ve mekansal analiz gibi bir\u00e7ok hizmet sunar. Kullan\u0131m\u0131 kolay API'leri, esnek fiyatland\u0131rma modelleri ve zengin veri kaynaklar\u0131 sayesinde geli\u015ftiriciler i\u00e7in cazip bir se\u00e7enektir. Otomatik tamamlama i\u00e7in \u00f6zellikle <code>\/v1\/geocode\/autocomplete<\/code> endpoint'ini kullanaca\u011f\u0131z.<\/p>\n<h4>Otomatik Tamamlama (Autocomplete) Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n<p>Kullan\u0131c\u0131 bir adres giri\u015f alan\u0131na yazmaya ba\u015flad\u0131\u011f\u0131nda, otomatik tamamlama servisi kullan\u0131c\u0131n\u0131n girdi\u011fi metne g\u00f6re potansiyel adres \u00f6nerilerini listeler. Bu \u00f6neriler genellikle kullan\u0131c\u0131n\u0131n mevcut konumuna veya daha \u00f6nce belirlenmi\u015f bir b\u00f6lgeye g\u00f6re filtrelenebilir. Kullan\u0131c\u0131 listeden bir \u00f6neri se\u00e7ti\u011finde, se\u00e7ilen adresin tam koordinatlar\u0131 ve di\u011fer detaylar\u0131 al\u0131narak harita \u00fczerinde g\u00f6sterilir.<\/p>\n<h4>Leaflet Haritas\u0131na Otomatik Tamamlama Eklemek<\/h4>\n<p>A\u015fa\u011f\u0131daki JavaScript kodu, Geoapify'\u0131n otomatik tamamlama API'sini kullanarak bir adres giri\u015f alan\u0131na entegrasyonu ve sonu\u00e7lar\u0131 haritada g\u00f6stermeyi sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">        const addressInput = document.getElementById('address-input');\n        const autocompleteResults = document.getElementById('autocomplete-results');\n\n        let autocompleteTimeout;\n\n        addressInput.addEventListener('input', function() {\n            clearTimeout(autocompleteTimeout);\n            const query = addressInput.value;\n\n            if (query.length < 3) { \/\/ En az 3 karakter girildi\u011finde arama yap\n                autocompleteResults.style.display = 'none';\n                return;\n            }\n\n            autocompleteTimeout = setTimeout(async () => {\n                const url = <code>https:\/\/api.geoapify.com\/v1\/geocode\/autocomplete?text=${encodeURIComponent(query)}&limit=5&apiKey=${GEOAPIFY_API_KEY}<\/code>;\n                try {\n                    const response = await fetch(url);\n                    const data = await response.json();\n                    \n                    autocompleteResults.innerHTML = '';\n                    if (data.features && data.features.length > 0) {\n                        data.features.forEach(feature => {\n                            const resultItem = document.createElement('div');\n                            resultItem.innerText = feature.properties.formatted;\n                            resultItem.addEventListener('click', () => {\n                                const { lat, lon } = feature.properties;\n                                map.setView([lat, lon], 16); \/\/ Se\u00e7ilen konuma haritay\u0131 merkezle\n                                marker.setLatLng([lat, lon]); \/\/ Pimi yeni konuma ta\u015f\u0131\n                                updateLocationInfo(lat, lon, feature.properties.formatted);\n                                autocompleteResults.style.display = 'none';\n                                addressInput.value = feature.properties.formatted; \/\/ Input alan\u0131n\u0131 g\u00fcncel adresle doldur\n                            });\n                            autocompleteResults.appendChild(resultItem);\n                        });\n                        autocompleteResults.style.display = 'block';\n                    } else {\n                        autocompleteResults.style.display = 'none';\n                    }\n                } catch (error) {\n                    console.error('Otomatik tamamlama hatas\u0131:', error);\n                }\n            }, 300); \/\/ 300ms gecikme ile arama yap\n        });\n\n        \/\/ Input d\u0131\u015f\u0131na t\u0131kland\u0131\u011f\u0131nda otomatik tamamlama sonu\u00e7lar\u0131n\u0131 gizle\n        document.addEventListener('click', function(event) {\n            if (!addressInput.contains(event.target) && !autocompleteResults.contains(event.target)) {\n                autocompleteResults.style.display = 'none';\n            }\n        });\n<\/pre>\n<p><\/code><\/p>\n<h3>Kullan\u0131c\u0131n\u0131n Co\u011frafi Konumunu Alg\u0131lama<\/h3>\n<p>Kullan\u0131c\u0131n\u0131n mevcut konumunu otomatik olarak alg\u0131lamak, bir\u00e7ok uygulama i\u00e7in kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran bir \u00f6zelliktir. Bu sayede kullan\u0131c\u0131lar, harita \u00fczerinde kendi konumlar\u0131n\u0131 manuel olarak aramak zorunda kalmazlar.<\/p>\n<h4>Geolocation API'nin Temelleri<\/h4>\n<p>Web taray\u0131c\u0131lar\u0131, JavaScript Geolocation API arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131n\u0131n co\u011frafi konumuna eri\u015fim sa\u011flar. Bu API, kullan\u0131c\u0131n\u0131n izniyle cihaz\u0131n GPS, Wi-Fi veya IP adresi gibi kaynaklar\u0131n\u0131 kullanarak konum bilgilerini (enlem, boylam, do\u011fruluk vb.) d\u00f6nd\u00fcr\u00fcr. Kullan\u0131c\u0131n\u0131n gizlili\u011fini korumak ad\u0131na, konum bilgisine eri\u015fim i\u00e7in mutlaka kullan\u0131c\u0131 onay\u0131 gereklidir.<\/p>\n<h4>Kullan\u0131c\u0131n\u0131n Konumunu Haritada G\u00f6sterme<\/h4>\n<p>A\u015fa\u011f\u0131daki kod, \"Konumumu Bul\" d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda Geolocation API'yi kullanarak kullan\u0131c\u0131n\u0131n mevcut konumunu al\u0131r ve haritada bir pin ile i\u015faretler.<\/p>\n<pre><code class=\"language-javascript\">        const locateMeBtn = document.getElementById('locate-me-btn');\n\n        locateMeBtn.addEventListener('click', function() {\n            if (navigator.geolocation) {\n                navigator.geolocation.getCurrentPosition(\n                    (position) => {\n                        const { latitude, longitude } = position.coords;\n                        map.setView([latitude, longitude], 16); \/\/ Haritay\u0131 kullan\u0131c\u0131n\u0131n konumuna merkezle\n                        marker.setLatLng([latitude, longitude]); \/\/ Pimi kullan\u0131c\u0131n\u0131n konumuna ta\u015f\u0131\n                        updateLocationInfo(latitude, longitude);\n                        reverseGeocode(latitude, longitude); \/\/ Adresi al\n                    },\n                    (error) => {\n                        console.error('Konum al\u0131namad\u0131:', error);\n                        alert('Konumunuzu al\u0131rken bir hata olu\u015ftu veya izin vermediniz.');\n                    },\n                    { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }\n                );\n            } else {\n                alert('Taray\u0131c\u0131n\u0131z co\u011frafi konum \u00f6zelli\u011fini desteklemiyor.');\n            }\n        });\n<\/pre>\n<p><\/code><\/p>\n<h4>\u0130zin Y\u00f6netimi ve Hata Durumlar\u0131<\/h4>\n<p>Geolocation API kullan\u0131l\u0131rken dikkat edilmesi gereken en \u00f6nemli nokta, kullan\u0131c\u0131 iznidir. Taray\u0131c\u0131lar, konum bilgisine eri\u015fim istendi\u011finde kullan\u0131c\u0131ya bir izin penceresi g\u00f6sterir. Kullan\u0131c\u0131 izni reddederse veya konum bilgisi al\u0131namazsa (\u00f6rne\u011fin GPS kapal\u0131ysa), uygun hata mesajlar\u0131 g\u00f6sterilmelidir. <code>getCurrentPosition<\/code> metodunun ikinci parametresi bir hata geri \u00e7a\u011f\u0131rma fonksiyonudur ve bu durumlar\u0131 y\u00f6netmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h3>S\u00fcr\u00fckle B\u0131rak Pimi (Draggable Marker) \u00d6zelli\u011fi<\/h3>\n<p>S\u00fcr\u00fckle b\u0131rak pimi, kullan\u0131c\u0131lar\u0131n harita \u00fczerindeki bir konumu manuel olarak ayarlamas\u0131na olanak tan\u0131r. Bu, \u00f6zellikle otomatik tamamlama veya co\u011frafi konum alg\u0131laman\u0131n tam olarak do\u011fru olmad\u0131\u011f\u0131 durumlarda hassasiyet sa\u011flamak i\u00e7in \u00e7ok de\u011ferlidir.<\/p>\n<h4>Kullan\u0131c\u0131 Deneyimini Zenginle\u015ftirme<\/h4>\n<p>Bir konum se\u00e7ici uygulamas\u0131nda s\u00fcr\u00fckle b\u0131rak pimi, kullan\u0131c\u0131ya tam kontrol hissi verir. Kullan\u0131c\u0131lar, otomatik olarak belirlenen konumun biraz d\u0131\u015f\u0131nda kalan bir noktay\u0131 kolayca d\u00fczeltebilir veya belirli bir binan\u0131n giri\u015fini i\u015faretlemek gibi \u00f6zel durumlar i\u00e7in pimi hassas bir \u015fekilde konumland\u0131rabilirler. Bu, kullan\u0131c\u0131 memnuniyetini ve veri do\u011frulu\u011funu art\u0131r\u0131r.<\/p>\n<h4>Leaflet'te S\u00fcr\u00fckle B\u0131rak Pimi Olu\u015fturma<\/h4>\n<p>Leaflet'te bir pimi s\u00fcr\u00fckle b\u0131rak yap\u0131labilir hale getirmek olduk\u00e7a basittir. <code>L.marker<\/code> olu\u015ftururken <code>draggable: true<\/code> se\u00e7ene\u011fini ayarlamak yeterlidir. Pimin konumu de\u011fi\u015fti\u011finde tetiklenecek olaylar\u0131 dinlemek i\u00e7in <code>marker.on('dragend', ...)<\/code> olay i\u015fleyicisini kullan\u0131r\u0131z.<\/p>\n<pre><code class=\"language-javascript\">        \/\/ Marker zaten draggable olarak tan\u0131mlanm\u0131\u015ft\u0131:\n        \/\/ let marker = L.marker([39.9334, 32.8597], { draggable: true }).addTo(map);\n\n        \/\/ Marker s\u00fcr\u00fcklendi\u011finde konum bilgilerini g\u00fcncelleme\n        marker.on('dragend', function(event) {\n            const latlng = marker.getLatLng();\n            updateLocationInfo(latlng.lat, latlng.lng);\n            reverseGeocode(latlng.lat, latlng.lng); \/\/ Yeni konuma g\u00f6re adresi al\n        });\n<\/pre>\n<p><\/code><\/p>\n<h4>Pin Konumu De\u011fi\u015fti\u011finde Adresi G\u00fcncelleme (Reverse Geocoding ile Geoapify Kullan\u0131m\u0131)<\/h4>\n<p>Pin s\u00fcr\u00fcklendikten sonra, yeni koordinatlara kar\u015f\u0131l\u0131k gelen adresi almak i\u00e7in ters co\u011frafi kodlama (reverse geocoding) i\u015flemi yap\u0131lmas\u0131 gerekir. Geoapify'\u0131n <code>\/v1\/geocode\/reverse<\/code> endpoint'i bu i\u015flem i\u00e7in idealdir. Marker'\u0131n <code>dragend<\/code> olay\u0131nda bu API \u00e7a\u011fr\u0131s\u0131n\u0131 yaparak, kullan\u0131c\u0131n\u0131n s\u00fcr\u00fckledi\u011fi yeni konumun adresini otomatik olarak g\u00fcncelleyebiliriz.<\/p>\n<pre><code class=\"language-javascript\">        \/\/ Geoapify Ters Co\u011frafi Kodlama Fonksiyonu (Daha \u00f6nce tan\u0131mlanm\u0131\u015ft\u0131)\n        async function reverseGeocode(lat, lon) {\n            const url = <code>https:\/\/api.geoapify.com\/v1\/geocode\/reverse?lat=${lat}&lon=${lon}&apiKey=${GEOAPIFY_API_KEY}<\/code>;\n            try {\n                const response = await fetch(url);\n                const data = await response.json();\n                if (data.features && data.features.length > 0) {\n                    const address = data.features[0].properties.formatted;\n                    document.getElementById('address-output').innerText = address;\n                    \/\/ addressInput.value = address; \/\/ \u0130ste\u011fe ba\u011fl\u0131: Input alan\u0131n\u0131 da g\u00fcncelle\n                } else {\n                    document.getElementById('address-output').innerText = 'Adres bulunamad\u0131.';\n                }\n            } catch (error) {\n                console.error('Ters co\u011frafi kodlama hatas\u0131:', error);\n                document.getElementById('address-output').innerText = 'Adres al\u0131n\u0131rken hata olu\u015ftu.';\n            }\n        }\n<\/pre>\n<p><\/code><\/p>\n<h3>T\u00fcm \u00d6zellikleri Birle\u015ftirme ve Geli\u015ftirme \u0130pu\u00e7lar\u0131<\/h3>\n<p>Yukar\u0131da ayr\u0131 ayr\u0131 inceledi\u011fimiz t\u00fcm bile\u015fenleri bir araya getirerek, g\u00fc\u00e7l\u00fc ve kullan\u0131c\u0131 dostu bir konum se\u00e7ici uygulamas\u0131 olu\u015fturabiliriz. Bu entegrasyon, kullan\u0131c\u0131lar\u0131n adresleri otomatik tamamlamas\u0131na, mevcut konumlar\u0131n\u0131 bulmas\u0131na ve pimi s\u00fcr\u00fckleyerek hassas ayarlamalar yapmas\u0131na olanak tan\u0131r.<\/p>\n<h4>Entegre Bir Konum Se\u00e7ici Olu\u015fturma Ak\u0131\u015f\u0131<\/h4>\n<ol>\n<li>Sayfa y\u00fcklendi\u011finde Leaflet haritas\u0131 ve s\u00fcr\u00fcklenebilir bir pin ba\u015flat\u0131l\u0131r.<\/li>\n<li>Adres giri\u015f alan\u0131na yaz\u0131ld\u0131\u011f\u0131nda Geoapify otomatik tamamlama API'si \u00e7a\u011fr\u0131l\u0131r ve \u00f6neriler listelenir.<\/li>\n<li>Kullan\u0131c\u0131 bir \u00f6neri se\u00e7ti\u011finde, harita se\u00e7ilen konuma merkezlenir ve pin oraya ta\u015f\u0131n\u0131r.<\/li>\n<li>\"Konumumu Bul\" d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda Geolocation API ile kullan\u0131c\u0131n\u0131n mevcut konumu al\u0131n\u0131r, harita merkezlenir ve pin oraya ta\u015f\u0131n\u0131r.<\/li>\n<li>Pin manuel olarak s\u00fcr\u00fcklendi\u011finde, <code>dragend<\/code> olay\u0131 tetiklenir ve Geoapify ters co\u011frafi kodlama API'si ile yeni adres bilgisi al\u0131narak g\u00f6sterilir.<\/li>\n<li>T\u00fcm bu etkile\u015fimlerde, se\u00e7ilen koordinatlar ve adres bilgisi e\u015f zamanl\u0131 olarak g\u00fcncellenir.<\/li>\n<\/ol>\n<h4>Kullan\u0131c\u0131 Aray\u00fcz\u00fc \u0130yile\u015ftirmeleri<\/h4>\n<ul>\n<li><strong>CSS Stil Uygulamalar\u0131:<\/strong> Otomatik tamamlama sonu\u00e7lar\u0131 i\u00e7in \u015f\u0131k bir g\u00f6r\u00fcn\u00fcm, harita ve d\u00fc\u011fmeler i\u00e7in modern bir tasar\u0131m sa\u011flay\u0131n.<\/li>\n<li><strong>Y\u00fckleme G\u00f6stergeleri:<\/strong> API \u00e7a\u011fr\u0131lar\u0131 s\u0131ras\u0131nda kullan\u0131c\u0131ya geri bildirim sa\u011flamak i\u00e7in y\u00fckleme animasyonlar\u0131 ekleyin.<\/li>\n<li><strong>Hata Mesajlar\u0131:<\/strong> API hatalar\u0131 veya konum izni reddedildi\u011finde kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r mesajlar g\u00f6sterin.<\/li>\n<li><strong>\u0130konlar:<\/strong> Marker i\u00e7in \u00f6zel ikonlar kullanarak haritan\u0131n g\u00f6rsel \u00e7ekicili\u011fini art\u0131rabilirsiniz. Leaflet'in <code>L.icon<\/code> \u00f6zelli\u011fini kullanarak Font Awesome veya \u00f6zel SVG ikonlar\u0131 entegre edilebilir.<\/li>\n<\/ul>\n<h4>Performans ve G\u00fcvenlik \u0130pu\u00e7lar\u0131<\/h4>\n<ul>\n<li><strong>API Anahtar\u0131 G\u00fcvenli\u011fi:<\/strong> Geoapify gibi servislerin API anahtarlar\u0131n\u0131 do\u011frudan istemci taraf\u0131 kodunda tutmak yerine, sunucu taraf\u0131nda bir proxy olu\u015fturarak daha g\u00fcvenli hale getirebilirsiniz. Bu, anahtar\u0131n\u0131z\u0131n k\u00f6t\u00fc niyetli kullan\u0131c\u0131lardan korunmas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>\u0130stek Limitleri:<\/strong> Otomatik tamamlama gibi s\u0131k kullan\u0131lan API'ler i\u00e7in istek limitlerine dikkat edin. Gecikmeli arama (debounce) ve \u00f6nbellekleme (caching) teknikleri kullanarak API \u00e7a\u011fr\u0131s\u0131 say\u0131s\u0131n\u0131 optimize edin.<\/li>\n<li><strong>Hata Y\u00f6netimi:<\/strong> T\u00fcm API \u00e7a\u011fr\u0131lar\u0131 i\u00e7in kapsaml\u0131 hata y\u00f6netimi uygulay\u0131n. A\u011f kesintileri veya API servisinin kullan\u0131lamamas\u0131 gibi durumlarda uygulaman\u0131z\u0131n \u00e7\u00f6kmesini engelleyin.<\/li>\n<li><strong>Mobil Uyumluluk:<\/strong> Duyarl\u0131 (responsive) tasar\u0131m prensiplerini uygulayarak konum se\u00e7icinin farkl\u0131 ekran boyutlar\u0131nda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flay\u0131n.<\/li>\n<\/ul>\n<h3>Pratik Uygulama Senaryolar\u0131<\/h3>\n<p>Bu t\u00fcr geli\u015fmi\u015f bir konum se\u00e7ici, bir\u00e7ok farkl\u0131 uygulama alan\u0131nda de\u011fer yaratabilir:<\/p>\n<h4>E-ticaret ve Teslimat Uygulamalar\u0131<\/h4>\n<p>M\u00fc\u015fterilerin teslimat adreslerini kolayca se\u00e7mesini sa\u011flar. Otomatik tamamlama ile adres giri\u015f hatalar\u0131 azal\u0131r, s\u00fcr\u00fckle b\u0131rak pimi ile kap\u0131 numaras\u0131 gibi hassas konumlar i\u015faretlenebilir. Geolocation ile kullan\u0131c\u0131lar h\u0131zl\u0131ca kendi konumlar\u0131n\u0131 belirleyebilir.<\/p>\n<h4>Etkinlik ve Mekan Bulucular<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n bir etkinlik veya mekan i\u00e7in konum belirlemesini sa\u011flar. \u00d6rne\u011fin, bir parti i\u00e7in bulu\u015fma noktas\u0131 veya bir emlak ilan\u0131 i\u00e7in m\u00fclk\u00fcn tam konumu bu y\u00f6ntemle hassas bir \u015fekilde i\u015faretlenebilir.<\/p>\n<h4>Sosyal Medya ve Konum Payla\u015f\u0131m\u0131<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n foto\u011fraf veya g\u00f6nderilerine konum etiketi eklemesini kolayla\u015ft\u0131r\u0131r. \"Neredeyim?\" \u00f6zelli\u011fi ile mevcut konumlar\u0131n\u0131 arkada\u015flar\u0131yla payla\u015fabilirler.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Leaflet k\u00fct\u00fcphanesini Geoapify'\u0131n g\u00fc\u00e7l\u00fc adres otomatik tamamlama ve ters co\u011frafi kodlama API'leri ile birle\u015ftirerek, web uygulamalar\u0131n\u0131za olduk\u00e7a geli\u015fmi\u015f ve kullan\u0131c\u0131 dostu bir konum se\u00e7ici entegre etmek m\u00fcmk\u00fcnd\u00fcr. Adres otomatik tamamlama, kullan\u0131c\u0131lar\u0131n h\u0131zl\u0131 ve hatas\u0131z giri\u015f yapmas\u0131n\u0131 sa\u011flarken, co\u011frafi konum alg\u0131lama kolayl\u0131k sunar ve s\u00fcr\u00fckle b\u0131rak pimi ise konum se\u00e7iminde maksimum hassasiyet sa\u011flar. Bu \u00f6zelliklerin birle\u015fimi, e-ticaretten lojisti\u011fe, sosyal medyadan etkinlik y\u00f6netimine kadar bir\u00e7ok alanda kullan\u0131c\u0131 deneyimini zenginle\u015ftirerek uygulamalar\u0131n\u0131z\u0131n de\u011ferini art\u0131racakt\u0131r. Geli\u015ftiriciler, bu teknikleri uygulayarak modern ve interaktif harita tabanl\u0131 \u00e7\u00f6z\u00fcmler olu\u015fturabilirler.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<h4>S: Geoapify yerine ba\u015fka bir servis kullanabilir miyim?<\/h4>\n<p><strong>C:<\/strong> Evet, kesinlikle. Google Maps Geocoding API, Mapbox Geocoding API veya OpenStreetMap'in Nominatim servisi gibi bir\u00e7ok alternatif bulunmaktad\u0131r. Geoapify, bu makalede \u00f6rnek olarak kullan\u0131lm\u0131\u015ft\u0131r ve benzer \u00f6zellikler sunan di\u011fer servislerle de entegrasyon yap\u0131labilir. Her servisin kendine \u00f6zg\u00fc API \u00e7a\u011fr\u0131 yap\u0131lar\u0131 ve fiyatland\u0131rmalar\u0131 olaca\u011f\u0131n\u0131 unutmay\u0131n.<\/p>\n<h4>S: Mobil uyumluluk nas\u0131l sa\u011flan\u0131r?<\/h4>\n<p><strong>C:<\/strong> Leaflet, mobil uyumluluk d\u00fc\u015f\u00fcn\u00fclerek tasarlanm\u0131\u015ft\u0131r. Haritan\u0131n kendisi duyarl\u0131d\u0131r. Ancak, adres giri\u015f alan\u0131 ve otomatik tamamlama sonu\u00e7lar\u0131 gibi UI elemanlar\u0131n\u0131n CSS ile mobil ekranlara uygun hale getirilmesi (\u00f6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda daha geni\u015f alan kaplamas\u0131) gerekmektedir. Makaledeki CSS \u00f6rnekleri temel bir duyarl\u0131l\u0131k sa\u011flar, ancak daha fazla \u00f6zelle\u015ftirme yap\u0131labilir.<\/p>\n<h4>S: API anahtar\u0131m\u0131 g\u00fcvende tutmak i\u00e7in ne yapmal\u0131y\u0131m?<\/h4>\n<p><strong>C:<\/strong> API anahtarlar\u0131n\u0131z\u0131 do\u011frudan istemci taraf\u0131 JavaScript kodunda tutmak g\u00fcvenlik riski ta\u015f\u0131r. En g\u00fcvenli y\u00f6ntem, bir arka u\u00e7 (backend) sunucusu olu\u015fturarak API \u00e7a\u011fr\u0131lar\u0131n\u0131 bu sunucu \u00fczerinden yapmak ve API anahtar\u0131n\u0131z\u0131 sunucu taraf\u0131nda saklamakt\u0131r. \u0130stemci, kendi sunucunuza bir istek g\u00f6nderir, sunucunuz Geoapify'a anahtar ile istek yapar ve cevab\u0131 istemciye iletir.<\/p>\n<h4>S: Harita stilini de\u011fi\u015ftirebilir miyim?<\/h4>\n<p><strong>C:<\/strong> Evet, Leaflet farkl\u0131 harita katmanlar\u0131n\u0131 (tile layers) destekler. OpenStreetMap yerine Mapbox, Esri, CartoDB gibi sa\u011flay\u0131c\u0131lar\u0131n farkl\u0131 stil harita katmanlar\u0131n\u0131 kullanabilirsiniz. Tek yapman\u0131z gereken <code>L.tileLayer<\/code> fonksiyonundaki URL'yi ve at\u0131f (attribution) metnini de\u011fi\u015ftirmektir. Baz\u0131 stil katmanlar\u0131 i\u00e7in ek API anahtarlar\u0131 gerekebilir.<\/p>\n<h4>S: Birden fazla pin ekleyebilir miyim?<\/h4>\n<p><strong>C:<\/strong> Evet, Leaflet birden fazla pimi destekler. Her bir pin i\u00e7in ayr\u0131 bir <code>L.marker<\/code> nesnesi olu\u015fturup haritaya eklemeniz yeterlidir. E\u011fer bu pinlerin hepsi s\u00fcr\u00fckle b\u0131rak \u00f6zelli\u011fine sahip olacaksa, her bir marker i\u00e7in ayr\u0131 ayr\u0131 <code>draggable: true<\/code> ay<\/p>\n","protected":false},"excerpt":{"rendered":"Konum se\u00e7iciler, kullan\u0131c\u0131lar\u0131n bir harita \u00fczerinde belirli bir noktay\u0131 i\u015faretlemesine olanak tan\u0131yan aray\u00fcz bile\u015fenleridir. Bu bile\u015fenler, genell&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37487","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)\" \/>\n<meta property=\"og:description\" content=\"Konum se\u00e7iciler, kullan\u0131c\u0131lar\u0131n bir harita \u00fczerinde belirli bir noktay\u0131 i\u015faretlemesine olanak tan\u0131yan aray\u00fcz bile\u015fenleridir. Bu bile\u015fenler, genell...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-06T09:30:47+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)\",\"datePublished\":\"2026-01-06T09:30:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\"},\"wordCount\":2291,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\",\"name\":\"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-06T09:30:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/","og_locale":"tr_TR","og_type":"article","og_title":"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)","og_description":"Konum se\u00e7iciler, kullan\u0131c\u0131lar\u0131n bir harita \u00fczerinde belirli bir noktay\u0131 i\u015faretlemesine olanak tan\u0131yan aray\u00fcz bile\u015fenleridir. Bu bile\u015fenler, genell...","og_url":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-06T09:30:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)","datePublished":"2026-01-06T09:30:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/"},"wordCount":2291,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/","url":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/","name":"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-06T09:30:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/leaflet-ile-gelismis-konum-secici-adres-otomatik-tamamlama-cografi-konum-ve-surukle-birak-pimi-geoapify-entegrasyonu-ile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Leaflet ile Geli\u015fmi\u015f Konum Se\u00e7ici: Adres Otomatik Tamamlama, Co\u011frafi Konum ve S\u00fcr\u00fckle B\u0131rak Pimi (Geoapify Entegrasyonu ile)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37487"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37487\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}