Angular ve Leaflet kullanarak etkile\u015fimli haritalar olu\u015fturma serimizin \u00fc\u00e7\u00fcnc\u00fc b\u00f6l\u00fcm\u00fcne ho\u015f geldiniz. \u00d6nceki b\u00f6l\u00fcmlerde, Angular uygulamalar\u0131m\u0131za temel bir Leaflet haritas\u0131n\u0131 nas\u0131l entegre edece\u011fimizi, harita katmanlar\u0131n\u0131 (tile layers) nas\u0131l y\u00f6netece\u011fimizi ve i\u015faret\u00e7ileri (markers) nas\u0131l ekleyece\u011fimizi \u00f6\u011frendik. Bu temel bilgilerin \u00fczerine in\u015fa ederek, bu b\u00f6l\u00fcmde haritalar\u0131m\u0131z\u0131 kullan\u0131c\u0131larla daha etkile\u015fimli hale getiren \u00f6nemli bir bile\u015fen olan “popup”lar\u0131 ele alaca\u011f\u0131z.<\/p>\n
Popuplar, harita \u00fczerindeki belirli bir noktaya veya \u00f6zelli\u011fe t\u0131kland\u0131\u011f\u0131nda ortaya \u00e7\u0131kan k\u00fc\u00e7\u00fck bilgi pencereleridir. Bir i\u015faret\u00e7inin, bir poligonun veya herhangi bir co\u011frafi \u00f6zelli\u011fin detaylar\u0131n\u0131, a\u00e7\u0131klamalar\u0131n\u0131 veya ilgili di\u011fer verileri g\u00f6stermek i\u00e7in kullan\u0131l\u0131rlar. Ancak, Leaflet’in varsay\u0131lan popuplar\u0131 genellikle basit metin veya statik HTML i\u00e7eri\u011fi kabul eder. Angular gibi modern bir \u00e7er\u00e7eveyle \u00e7al\u0131\u015f\u0131rken, bu popuplar\u0131n i\u00e7ine dinamik Angular bile\u015fenleri veya \u015fablonlar\u0131 yerle\u015ftirmek isteyebiliriz. Bu sayede, popuplar\u0131m\u0131z sadece bilgi g\u00f6stermekle kalmayacak, ayn\u0131 zamanda Angular’\u0131n t\u00fcm g\u00fcc\u00fcyle etkile\u015fimli formlar, d\u00fc\u011fmeler veya karma\u015f\u0131k veri g\u00f6rselle\u015ftirmeleri i\u00e7erebilecektir.<\/p>\n
\u0130\u015fte bu noktada “Popup Servisi” devreye giriyor. Bu makalede, Leaflet popuplar\u0131n\u0131 Angular bile\u015fenleriyle entegre etmek i\u00e7in g\u00fc\u00e7l\u00fc ve yeniden kullan\u0131labilir bir servis yap\u0131s\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu servis, Angular bile\u015fenlerinin veya \u015fablonlar\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc (olu\u015fturma, veri aktar\u0131m\u0131, yok etme) Leaflet popup’lar\u0131 i\u00e7inde y\u00f6netmemizi sa\u011flayacak, b\u00f6ylece temiz ve s\u00fcrd\u00fcr\u00fclebilir bir kod taban\u0131 elde edece\u011fiz.<\/p>\n
Popup’lar (a\u00e7\u0131l\u0131r pencereler), harita \u00fczerindeki belirli bir co\u011frafi \u00f6zelli\u011fe (bir i\u015faret\u00e7i, bir \u00e7izgi, bir alan vb.) ba\u011fl\u0131 olarak bilgi g\u00f6steren k\u00fc\u00e7\u00fck, ge\u00e7ici kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011feleridir. Genellikle kullan\u0131c\u0131 bir harita \u00f6zelli\u011fine t\u0131klad\u0131\u011f\u0131nda veya \u00fczerine geldi\u011finde g\u00f6r\u00fcn\u00fcrler ve ilgili \u00f6zelli\u011fin detaylar\u0131n\u0131 sunarlar.<\/p>\n
Neden \u00d6nemlidirler?<\/strong><\/p>\n 1. Ba\u011flamsal Bilgi:<\/strong> Kullan\u0131c\u0131ya, bakt\u0131\u011f\u0131 belirli bir nokta veya alan hakk\u0131nda an\u0131nda, ba\u011flamsal bilgi sa\u011flarlar. \u00d6rne\u011fin, bir \u015fehir i\u015faret\u00e7isine t\u0131kland\u0131\u011f\u0131nda \u015fehrin n\u00fcfusunu, \u00f6nemli yerlerini veya k\u0131sa bir tarihini g\u00f6sterebilir. Yayg\u0131n Kullan\u0131m Alanlar\u0131:<\/strong><\/p>\n * \u0130\u015faret\u00e7i Detaylar\u0131:<\/strong> Bir restoran\u0131n, ma\u011fazan\u0131n veya tarihi bir yerin ad\u0131n\u0131, adresini, \u00e7al\u0131\u015fma saatlerini ve derecelendirmesini g\u00f6sterme. Leaflet, popuplar\u0131 y\u00f6netmek i\u00e7in basit ve etkili bir API sunar. Temel olarak, bir popup’\u0131 bir i\u015faret\u00e7iye veya ba\u015fka bir katmana ba\u011flayabilir ve i\u00e7ine metin veya HTML i\u00e7eri\u011fi yerle\u015ftirebilirsiniz.<\/p>\n En yayg\u0131n kullan\u0131m senaryosu, bir i\u015faret\u00e7iye popup ba\u011flamakt\u0131r.<\/p>\n Popuplar sadece i\u015faret\u00e7ilerle s\u0131n\u0131rl\u0131 de\u011fildir. Poligonlar, \u00e7oklu \u00e7izgiler (polylines) ve daireler (circles) gibi di\u011fer Leaflet katmanlar\u0131na da ba\u011flanabilirler.<\/p>\n GeoJSON Katmanlar\u0131 ve Popuplar:<\/strong><\/p>\n GeoJSON katmanlar\u0131 genellikle birden fazla \u00f6zelli\u011fi i\u00e7erir. Her bir \u00f6zelli\u011fe ayr\u0131 ayr\u0131 popup ba\u011flamak yerine, Bu temel kullan\u0131mlar, Leaflet’in popuplarla ne kadar esnek oldu\u011funu g\u00f6sterir. Ancak, Angular bile\u015fenlerinin dinamik g\u00fcc\u00fcn\u00fc bu popuplara ta\u015f\u0131mak i\u00e7in daha geli\u015fmi\u015f bir yakla\u015f\u0131ma ihtiyac\u0131m\u0131z var.<\/p>\n Leaflet’in Leaflet popup’\u0131na do\u011frudan bir Angular bile\u015feninin HTML’ini string olarak vermek, bile\u015fenin Angular taraf\u0131ndan y\u00f6netilen ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc, veri ba\u011flamas\u0131n\u0131 veya olay dinleyicilerini kaybetmesine neden olur. Yani, popup’\u0131n i\u00e7indeki bir d\u00fc\u011fmeye t\u0131klamak veya bir input alan\u0131na veri girmek gibi Angular’\u0131n y\u00f6netti\u011fi etkile\u015fimler \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n Kar\u015f\u0131la\u015f\u0131lan Zorluklar:<\/strong><\/p>\n 1. Angular Ya\u015fam D\u00f6ng\u00fcs\u00fc Y\u00f6netimi:<\/strong> Bir Angular bile\u015feni, Bu sorunlar\u0131 \u00e7\u00f6zmek ve Angular’\u0131n t\u00fcm g\u00fcc\u00fcn\u00fc Leaflet popuplar\u0131na ta\u015f\u0131mak i\u00e7in bir “Popup Servisi”ne ihtiyac\u0131m\u0131z var. Bu servis, Angular bile\u015fenlerini veya \u015fablonlar\u0131n\u0131 dinamik olarak olu\u015fturacak, onlar\u0131 Leaflet popup’\u0131n\u0131n i\u00e7ine yerle\u015ftirecek ve popup kapand\u0131\u011f\u0131nda bile\u015fenin do\u011fru \u015fekilde temizlenmesini sa\u011flayacakt\u0131r.<\/p>\n Servisin Temel G\u00f6revleri:<\/strong><\/p>\n * Dinamik Bile\u015fen Olu\u015fturma:<\/strong> Verilen bir Angular bile\u015fen tipinden (\u00f6rne\u011fin Bu servisi olu\u015fturarak, harita bile\u015fenimiz i\u00e7inde temiz ve Angular’a \u00f6zg\u00fc bir \u015fekilde popuplar\u0131m\u0131z\u0131 y\u00f6netebilece\u011fiz.<\/p>\n Angular’da dinamik olarak bile\u015fen olu\u015fturmak ve bunlar\u0131 DOM’a eklemek i\u00e7in baz\u0131 Angular \u00e7ekirdek API’lerini kullanmam\u0131z gerekir. Bu API’ler genellikle bir servis i\u00e7inde sarmalanarak yeniden kullan\u0131labilir hale getirilir.<\/p>\n Kullan\u0131lacak Angular API’leri:<\/strong><\/p>\n 1. Servis Yap\u0131s\u0131:<\/strong><\/p>\n * Her iki metot da \u015fu parametreleri alacakt\u0131r: Servis ayr\u0131ca, popup kapand\u0131\u011f\u0131nda dinamik olarak olu\u015fturulan Angular bile\u015fenlerinin veya \u015fablon g\u00f6r\u00fcn\u00fcmlerinin Angular’\u0131n \u015eimdi bu tasar\u0131m\u0131 ad\u0131m ad\u0131m kodlayarak hayata ge\u00e7irelim.<\/p>\n Bu b\u00f6l\u00fcmde, Popup Servisimizi olu\u015fturaca\u011f\u0131z, bir \u00f6rnek popup bile\u015feni tan\u0131mlayaca\u011f\u0131z ve ard\u0131ndan bu servisi harita bile\u015fenimizde nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 g\u00f6sterece\u011fiz.<\/p>\n \u00d6nemli Not:<\/strong> Angular 9 ve \u00fczeri versiyonlarda, Ivy derleyicisi sayesinde \u015eimdi, popup servisi arac\u0131l\u0131\u011f\u0131yla Leaflet popup’\u0131n\u0131n i\u00e7inde g\u00f6r\u00fcnt\u00fclenecek basit bir Angular bile\u015feni olu\u015ftural\u0131m.<\/p>\n {{ description }}<\/p>\n
\n2. Etkile\u015fim:<\/strong> Popuplar sadece bilgi g\u00f6stermekle kalmaz, ayn\u0131 zamanda etkile\u015fimli \u00f6\u011feler (d\u00fc\u011fmeler, ba\u011flant\u0131lar, formlar) i\u00e7erebilir. Bu sayede kullan\u0131c\u0131lar popup \u00fczerinden do\u011frudan eylemler ger\u00e7ekle\u015ftirebilirler.
\n3. Kullan\u0131c\u0131 Deneyimi:<\/strong> Harita \u00fczerinde \u00e7ok fazla bilgi g\u00f6stermek yerine, bilgiyi ihtiya\u00e7 duyuldu\u011funda sunarak haritan\u0131n daha temiz ve anla\u015f\u0131l\u0131r kalmas\u0131n\u0131 sa\u011flarlar. Bu, daha iyi bir kullan\u0131c\u0131 deneyimi sunar.
\n4. Veri Zenginle\u015ftirme:<\/strong> Harita \u00fczerindeki basit bir i\u015faret\u00e7inin ard\u0131nda yatan zengin verileri kullan\u0131c\u0131ya sunman\u0131n etkili bir yoludur.<\/p>\n
\n* Co\u011frafi B\u00f6lge Bilgisi:<\/strong> Bir \u00fclkeye veya eyalete t\u0131kland\u0131\u011f\u0131nda n\u00fcfusu, ba\u015fkenti veya ekonomik verileri g\u00f6sterme.
\n* Rota Bilgisi:<\/strong> Bir rotan\u0131n belirli bir noktas\u0131 hakk\u0131nda tahmini var\u0131\u015f s\u00fcresi veya trafik durumu gibi bilgiler sunma.
\n* Sens\u00f6r Verileri:<\/strong> Hava durumu istasyonlar\u0131 veya IoT cihazlar\u0131ndan gelen anl\u0131k verileri g\u00f6rselle\u015ftirme.<\/p>\nLeaflet’te Temel Popup Kullan\u0131m\u0131<\/h3>\n
\u0130\u015faret\u00e7iye Popup Ba\u011flama<\/h4>\n
import * as L from 'leaflet';\n\n\/\/ Harita olu\u015fturma (\u00f6nceki b\u00f6l\u00fcmlerden)\nconst map = L.map('map').setView([39.9334, 32.8597], 10);\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n\n\/\/ Bir i\u015faret\u00e7i olu\u015fturma\nconst marker = L.marker([39.9334, 32.8597]).addTo(map);\n\n\/\/ \u0130\u015faret\u00e7iye basit bir popup ba\u011flama\nmarker.bindPopup(\"Merhaba!<\/b>
Bu bir Leaflet popup'\u0131d\u0131r.<\/i>\").openPopup();\n\/\/ openPopup() \u00e7a\u011fr\u0131s\u0131, harita y\u00fcklendi\u011finde popup'\u0131n otomatik olarak a\u00e7\u0131lmas\u0131n\u0131 sa\u011flar.\n\/\/ Genellikle bu, kullan\u0131c\u0131n\u0131n i\u015faret\u00e7iye t\u0131klamas\u0131yla tetiklenir, bu durumda openPopup() \u00e7a\u011fr\u0131s\u0131na gerek kalmaz.<\/code><\/pre>\nbindPopup()<\/code> metodu, bir popup’\u0131 bir katmana (marker, circle, polygon vb.) ba\u011flar. Kullan\u0131c\u0131 katmana t\u0131klad\u0131\u011f\u0131nda popup otomatik olarak a\u00e7\u0131l\u0131r. openPopup()<\/code> metodu ise popup’\u0131 programatik olarak a\u00e7ar.<\/p>\nPopup Se\u00e7enekleri<\/h4>\n
bindPopup()<\/code> ve L.popup()<\/code> metodlar\u0131, popup’\u0131n davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirmek i\u00e7in bir dizi se\u00e7enek al\u0131r:<\/p>\nconst customPopup = L.popup({\n maxWidth: 300, \/\/ Popup'\u0131n maksimum geni\u015fli\u011fi\n minWidth: 100, \/\/ Popup'\u0131n minimum geni\u015fli\u011fi\n autoClose: true, \/\/ Haritan\u0131n ba\u015fka bir yerine t\u0131kland\u0131\u011f\u0131nda popup'\u0131n otomatik kapanmas\u0131\n closeButton: true, \/\/ Popup'ta bir kapatma d\u00fc\u011fmesi g\u00f6sterilmesi\n closeOnClick: true, \/\/ Haritan\u0131n ba\u015fka bir yerine t\u0131kland\u0131\u011f\u0131nda popup'\u0131n kapanmas\u0131 (autoClose ile benzer)\n className: 'my-custom-popup' \/\/ Popup'a \u00f6zel bir CSS s\u0131n\u0131f\u0131 ekleme\n})\n.setLatLng([39.95, 32.90]) \/\/ Popup'\u0131n a\u00e7\u0131laca\u011f\u0131 koordinatlar\n.setContent(\"\u00d6zel Popup<\/b>
\u00c7e\u015fitli se\u00e7eneklerle.<\/i>\");\n\n\/\/ Popup'\u0131 haritaya ekleme (bir i\u015faret\u00e7iye ba\u011fl\u0131 de\u011filse)\n\/\/ customPopup.openOn(map); \/\/ Bu, popup'\u0131 do\u011frudan harita \u00fczerinde a\u00e7ar.\n\n\/\/ Bir i\u015faret\u00e7iye ba\u011flamak i\u00e7in:\nconst markerWithOptions = L.marker([39.95, 32.90]).addTo(map);\nmarkerWithOptions.bindPopup(customPopup); \/\/ \u00d6nceden olu\u015fturulmu\u015f bir popup nesnesini ba\u011flama<\/code><\/pre>\nsetLatLng()<\/code> ve setContent()<\/code> metodlar\u0131, bir popup nesnesi olu\u015fturulduktan sonra i\u00e7eri\u011fini ve konumunu dinamik olarak ayarlamak i\u00e7in kullan\u0131l\u0131r. openOn(map)<\/code> ise popup’\u0131 do\u011frudan harita \u00fczerinde a\u00e7ar ve kapatma olaylar\u0131n\u0131 harita ile ili\u015fkilendirir.<\/p>\nDi\u011fer Katmanlarda Popup Kullan\u0131m\u0131<\/h4>\n
\/\/ Bir daireye popup ba\u011flama\nconst circle = L.circle([39.92, 32.80], {\n color: 'red',\n fillColor: '#f03',\n fillOpacity: 0.5,\n radius: 500\n}).addTo(map);\n\ncircle.bindPopup(\"Bu bir daire! Yar\u0131\u00e7ap\u0131 500 metre.\");\n\n\/\/ Bir poligona popup ba\u011flama\nconst polygon = L.polygon([\n [39.94, 32.82],\n [39.96, 32.85],\n [39.94, 32.88]\n], {\n color: 'blue',\n fillColor: '#00f',\n fillOpacity: 0.3\n}).addTo(map);\n\npolygon.bindPopup(\"Bu bir poligon! Ankara'n\u0131n bir b\u00f6lgesi.\");<\/code><\/pre>\nonEachFeature<\/code> se\u00e7ene\u011fini kullanarak her bir GeoJSON \u00f6zelli\u011fine dinamik olarak popup ba\u011flayabiliriz:<\/p>\nconst geojsonFeature = {\n \"type\": \"Feature\",\n \"properties\": {\n \"name\": \"Ku\u011fulu Park\",\n \"amenity\": \"Park\",\n \"popupContent\": \"Ankara'n\u0131n simgelerinden Ku\u011fulu Park.\"\n },\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [32.8656, 39.9079] \/\/ Leaflet'te LatLng bekler, GeoJSON'da LngLat\n }\n};\n\nL.geoJSON(geojsonFeature, {\n onEachFeature: function (feature, layer) {\n if (feature.properties && feature.properties.popupContent) {\n layer.bindPopup(feature.properties.popupContent);\n }\n }\n}).addTo(map);<\/code><\/pre>\nAngular Entegrasyon Zorluklar\u0131 ve Neden Bir Servis \u0130htiyac\u0131<\/h3>\n
bindPopup()<\/code> veya setContent()<\/code> metodlar\u0131, genellikle d\u00fcz metin (string) veya ham HTML (string) bekler. Angular uygulamas\u0131nda, kullan\u0131c\u0131 aray\u00fcz\u00fcm\u00fcz\u00fc bile\u015fenler (components) ve \u015fablonlar (templates) arac\u0131l\u0131\u011f\u0131yla olu\u015ftururuz. Bu bile\u015fenler, kendi ya\u015fam d\u00f6ng\u00fcleri, veri ba\u011flama mekanizmalar\u0131, olay dinleyicileri ve ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu gibi Angular \u00f6zelliklerine sahiptir.<\/p>\nngOnInit<\/code>, ngOnDestroy<\/code> gibi ya\u015fam d\u00f6ng\u00fcs\u00fc hook’lar\u0131na sahiptir. Leaflet popup’\u0131na yerle\u015ftirilen bir bile\u015fenin bu hook’lar\u0131 do\u011fru \u015fekilde tetiklenmezse, bellek s\u0131z\u0131nt\u0131lar\u0131 veya beklenmedik davran\u0131\u015flar ortaya \u00e7\u0131kabilir.
\n2. Veri Ba\u011flama ve Olay Y\u00f6netimi:<\/strong> [(ngModel)]<\/code>, (click)<\/code>, @Input<\/code>, @Output<\/code> gibi Angular’\u0131n temel \u00f6zellikleri, bile\u015fen Leaflet taraf\u0131ndan y\u00f6netildi\u011finde \u00e7al\u0131\u015fmaz.
\n3. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu:<\/strong> Popup i\u00e7indeki bir bile\u015fenin ba\u015fka servisleri kullanmas\u0131 gerekti\u011finde, Angular’\u0131n ba\u011f\u0131ml\u0131l\u0131k enjeksiyon mekanizmas\u0131 do\u011fal olarak devreye giremez.
\n4. Yeniden Kullan\u0131labilirlik:<\/strong> Her popup i\u00e7in manuel olarak DOM manip\u00fclasyonu yapmak veya bile\u015fenleri el ile olu\u015fturmak, kod tekrar\u0131na ve bak\u0131m zorlu\u011funa yol a\u00e7ar.<\/p>\nMarkerPopupComponent<\/code>) dinamik olarak bir \u00f6rnek olu\u015fturmak.
\n* DOM Ekleme:<\/strong> Olu\u015fturulan bile\u015fenin DOM elementini Leaflet popup’\u0131n\u0131n i\u00e7eri\u011fi olarak sa\u011flamak.
\n* Veri Aktar\u0131m\u0131:<\/strong> Popup bile\u015fenine d\u0131\u015far\u0131dan veri (@Input<\/code> ile) aktarmak.
\n* Ya\u015fam D\u00f6ng\u00fcs\u00fc Y\u00f6netimi:<\/strong> Bile\u015feni Angular uygulama ba\u011flam\u0131na ekleyerek ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ba\u015flatmak ve popup kapand\u0131\u011f\u0131nda bile\u015feni do\u011fru \u015fekilde yok etmek.
\n* \u015eablon Entegrasyonu:<\/strong> Sadece bile\u015fenler de\u011fil, ayn\u0131 zamanda ng-template<\/code> ile tan\u0131mlanm\u0131\u015f Angular \u015fablonlar\u0131n\u0131 da popuplara yerle\u015ftirebilmek.<\/p>\nPopup Servisini Tasarlamak<\/h3>\n
ComponentFactoryResolver<\/code>:<\/strong> Bir Angular bile\u015feninin Type<\/code>‘\u0131ndan (\u00f6rne\u011fin MarkerPopupComponent<\/code>) bir ComponentFactory<\/code> olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Bu fabrika, daha sonra bile\u015fenin \u00f6rneklerini olu\u015fturabilir.
\n2. ApplicationRef<\/code>:<\/strong> Bir Angular uygulamas\u0131n\u0131n ana \u00f6rne\u011fidir. Dinamik olarak olu\u015fturulan bile\u015fenlerin host view’lerini Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama (change detection) d\u00f6ng\u00fcs\u00fcne ve ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimine dahil etmek i\u00e7in kullan\u0131l\u0131r. attachView()<\/code> ve detachView()<\/code> metodlar\u0131 bu ama\u00e7la kullan\u0131l\u0131r.
\n3. Injector<\/code>:<\/strong> Ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu i\u00e7in kullan\u0131l\u0131r. Dinamik olarak olu\u015fturulan bile\u015fenlerin kendi ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 \u00e7\u00f6zebilmesi i\u00e7in bir injector sa\u011flamak \u00f6nemlidir.
\n4. EmbeddedViewRef<\/code> \/ TemplateRef<\/code>:<\/strong> E\u011fer bir bile\u015fen yerine bir ng-template<\/code> i\u00e7eri\u011fini popup’a yerle\u015ftirmek istersek, TemplateRef<\/code>‘i kullanarak bir EmbeddedViewRef<\/code> olu\u015fturabiliriz.<\/p>\nMapPopupService<\/code> ad\u0131nda bir servis olu\u015fturaca\u011f\u0131z. Bu servis, iki ana metot i\u00e7erecek:<\/p>\nopenComponentPopup()<\/code>: Bir Angular bile\u015fenini Leaflet popup’\u0131 olarak a\u00e7mak i\u00e7in.
\n* openTemplatePopup()<\/code>: Bir Angular \u015fablonunu (ng-template<\/code>) Leaflet popup’\u0131 olarak a\u00e7mak i\u00e7in.<\/p>\n
\n* map: L.Map<\/code>: Popup’\u0131n hangi harita \u00fczerinde a\u00e7\u0131laca\u011f\u0131n\u0131 belirten Leaflet harita nesnesi.
\n* latlng: L.LatLngExpression<\/code>: Popup’\u0131n a\u00e7\u0131laca\u011f\u0131 co\u011frafi koordinatlar.
\n* componentType: TypetemplateRef: TemplateRef
\n* data?: any<\/code> veya context?: any<\/code>: Popup bile\u015fenine (@Input<\/code> ile) veya \u015fablonuna (let-<\/code> s\u00f6zdizimi ile) aktar\u0131lacak veriler.
\n* options?: L.PopupOptions<\/code>: Leaflet popup’\u0131n\u0131n \u00f6zelle\u015ftirme se\u00e7enekleri (maxWidth, className vb.).<\/p>\nApplicationRef<\/code>‘inden ayr\u0131lmas\u0131n\u0131 ve yok edilmesini sa\u011flayarak bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nleyecektir. Bu, L.popup<\/code> nesnesinin remove<\/code> olay\u0131n\u0131 dinleyerek ger\u00e7ekle\u015ftirilecektir.<\/p>\nAd\u0131m Ad\u0131m Uygulama<\/h3>\n
1. Popup Servisini Olu\u015fturma (
map-popup.service.ts<\/code>)<\/h4>\n\/\/ src\/app\/services\/map-popup.service.ts\nimport {\n Injectable,\n ComponentFactoryResolver,\n ApplicationRef,\n Injector,\n Type,\n EmbeddedViewRef,\n TemplateRef,\n ComponentRef\n} from '@angular\/core';\nimport * as L from 'leaflet';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class MapPopupService {\n constructor(\n private componentFactoryResolver: ComponentFactoryResolver,\n private appRef: ApplicationRef,\n private injector: Injector\n ) {}\n\n \/<\/em>\n * Bir Angular bile\u015fenini Leaflet popup'\u0131 olarak a\u00e7ar.\n * @param map Popup'\u0131n a\u00e7\u0131laca\u011f\u0131 Leaflet harita nesnesi.\n * @param latlng Popup'\u0131n a\u00e7\u0131laca\u011f\u0131 koordinatlar.\n * @param componentType Popup i\u00e7eri\u011fi olacak Angular bile\u015feninin tipi.\n * @param data Bile\u015fene aktar\u0131lacak @Input verileri.\n * @param options Leaflet popup se\u00e7enekleri.\n * @returns A\u00e7\u0131lan Leaflet Popup nesnesi.\n *\/\n openComponentPopup(\n map: L.Map,\n latlng: L.LatLngExpression,\n componentType: TypeentryComponents<\/code> dizisine bile\u015fenleri eklemeye genellikle gerek kalmaz. Ancak eski versiyonlar veya baz\u0131 \u00f6zel durumlarda, dinamik olarak olu\u015fturulan bile\u015fenlerin (bu \u00f6rnekte MarkerPopupComponent<\/code>) Angular mod\u00fcl\u00fcn\u00fcn @NgModule<\/code> dekorat\u00f6r\u00fcndeki entryComponents<\/code> dizisine eklenmesi gerekebilir.<\/p>\n2. \u00d6rnek Bir Popup Bile\u015feni Olu\u015fturma (
marker-popup.component.ts<\/code>)<\/h4>\n\/\/ src\/app\/components\/marker-popup\/marker-popup.component.ts\nimport { Component, Input, Output, EventEmitter } from '@angular\/core';\n\n@Component({\n selector: 'app-marker-popup',\n template: \n {{ title }}<\/h3>\n