Leaflet JS Nedir ? Neden Kullanılır? Angular İle Örnek Uygulama

Leaflet JS, haritalı web sayfası geliştirmek için kullanılan açık kaynak kodlu bir JavaScript kütüphanesidir. API, etkileşimli haritalar, işaretçiler, katmanlar, pop-up, çokgenler için kullanışlı çerçeveler sunar.

Leaflet JS, haritalı web sayfası geliştirmek için kullanılan açık kaynak kodlu bir JavaScript kütüphanesidir. API, etkileşimli haritalar, işaretçiler, katmanlar, pop-up, çokgenler için kullanışlı çerçeveler sunar.

OpenStreetMap ile Uyum

Leaflet, OpenStreetMap verileriyle sorunsuz bir şekilde çalışacak şekilde tasarlanmıştır. Bu nedenle, Google Haritalar gibi bir harita sağlayıcısına alternatif olarak kendi harita katmanlarınızı kullanmak, uygulamanız için özel veri setlerini görselleştirmek istiyorsanız, Leaflet kullanılabilir. Bu verileri elde etmek için, servis sağlayıcılarından (örneğin Mapbox, OpenStreetMap, ya da özel WMS / WMTS hizmetlerden) oluşturacağınız harita arka plan tabakasını (tile layer) Leaflet ile yapabilirsiniz.

Açık Kaynak Kodlu Oluşu

Leaflet JS, BSD benzeri lisans modelleriyle piyasaya sürülür. Bu, kaynak kodunun topluluk tarafından sürekli güncellendiği ve iyileştirildiği anlamına gelir. Kurumsal veya ticari projelerde bile lisans ücreti eklemeksizin kullanılabilmesi, geliştiriciler ve şirketler tarafından maliyet açısından büyük bir faktördür.

Hafif ve Mobil Uyumlu

Leaflet, 40–50 KB veya sıkıştırılmış / minified şekilde daha küçük bir indirme ile boyut açısından farklılık gösterir. Bu, cep telefonları ve daha az bant genişliği olan alt ortamlarda hız açısından avantaj anlamına gelir. Ayrıca dokunmatik olanakları, kullanıcıların yakınlaştırma, kaydırma ve daha fazlasını yapabileceği cep telefonu ve tabletlerde mükemmel şekilde çalıştırır.

Modüler ve Genişletilebilir Yapı

Leaflet JS, bir harita uygulaması için temel çekirdeği sağlar; ancak eklentilerle (eklentiler) işlevsellik açısından geniş bir şekilde genişletilebilir. Örneğin; Çizim kontrolleri aracılığıyla, kullanıcıların harita üzerinde serbestçe çokgen veya çizgi çizmelerine izin verilebilir. Isı haritası gibi veri görselleştirme teknikleri eklenebilir. Ayrıca 3B model veya Kapalı alan ( kapalı alan ) haritaları gibi daha spesifik kullanım durumları için birçok topluluk eklentisi de vardır.

Geniş Kullanıcı ve Topluluk Desteği

GitHub, Stack Overflow veya Leaflet resmi forumları gibi yerlerde soru sorduğunuzda, genellikle aktif bir topluluğun hızlı bir şekilde size yanıt vermesi de dahildir. Bu da yeni başlayanları öğrenme süreçlerini hızlandırabilir ve hataları gidermeyi kolaylaştırır.

Leaflet JS’nin Avantajları

Hafif ve Performanslı

Düşük dosya boyutu: Leaflet JS, ekstra bileşenler içermez ve sadece temel harita işlevselliğini sunar. Proje ihtiyaçlarına göre genişletmek için yetkili geliştiriciler istediği gibi ekleme yapabilir.

Yüksek performans: Mobil cihazlar dahil olmak üzere her tür platformda kullanmak üzere optimize edilmiştir.

Esnek ve özelleştirilebilir

Marker ve Katman yöntemi: Marker işaretçilerden karmaşık coğrafi şekillere kadar ne yaparsanız yapın, haritaya işaret etmede işleri hızlandıracak yöntemlere sahiptir.

Stil ve Tasarım: Harita üzerinde çalışmak için CSS veya JS kütüphanelerine yerleştirilen öğelerin ikona ve balona döşenen CSS dosyalarıyla işaretler ve şekillendirilen vektör şekiller.

Açık kaynak ve ücretsiz

Kurumsal kullanım altyapısı: Projeleri çok pahalı Google Haritalar API limitleriyle sınırlayan veya lisans projeleri olmayan ürünler bu kütüphaneye sahip olacaktır.

Sürekli bir gelişim süreci içerir: Açık kaynak kodumuz sayesinde sürekli hata onarımı ve yeni dağınık symantlarla gelen gelişmiş durum kodumuz sürümün sadece bir avantajı.

Mobil uyumlu

Dokunmatik eşleme: Ekrana dokunma ve hareket şekli (dokunma olayları) ile zoom işlemi ve kaydırma (sürükleme) işleyen değerlendirici oluşturmak için yapılandırma gerçekleştirilebilir.

Duyarlı yüzey: Kütüphane, minimal genişlikte Responsive Anahtar biçimde otlanabilirsiniz.

Kullanımı Gidilebilecek Yerler

E-ticaret: Konaklamadan işyerlerine kira duraklarına kadar işyeri alanınıza gidin, en yakınındaki yerler için ulaşın.

Taşımacılık ve Yük: Canlı konum izleme veya başlangıç joystickleri geliştiren gelişmiş yazılım mühendislerinden harita modülleri.

Seyahat ve Turizm: Gezinme çevresindeki aktiflik gösterilen yerleri ve ülkenin yerel boş alan gezgini gösterin.

Belediye ve Kamu: Alt yapı üzerinden il ve ilçeler halkın kullanımı için halkların yararına kullanabilmek için birçok amaca uygundur.

Jeo analiz ve Araştırmalar: Sıcaklık haritasını ve harita tabakalarını coğrafi veriler ile yeniden biçimlendirmenize izin verin ve araştırmalarınıza başlayın..

Angular ile Leaflet JS Entegrasyonu

Angular, bileşen tabanlı yapısıyla projeleri daha sürdürülebilir hâle getirirken, Leaflet JS de harita özelliklerini entegre etmenizi kolaylaştırır. Angular’da Leaflet’i kullanmak için aşağıdaki temel adımları takip edin.

Proje Kurulumu:

ng new leaflet-angular-example
cd leaflet-angular-example

Leaflet ve Tip Paketlerinin Kurulumu:

npm install leaflet
npm install - save @types/leaflet

Stil Dosyalarının Eklenmesi:

Leaflet haritalarının doğru görüntülenmesi için angular.json dosyasında, “styles” bölümüne Leaflet CSS dosyasını ekliyoruz.

"styles": [
"node_modules/leaflet/dist/leaflet.css",
"src/styles.css"
]

Bileşen (Component) Oluşturma:

Harita bileşenini oluşturmak için LeafletMapComponent adında bir bileşen açalım.

ng generate component leaflet-map

Basit Bir Örnek Uygulama

Aşağıdaki örnekte, harita bileşeninde Leaflet’i nasıl başlatabileceğimizi ve bir marker (işaretçi) ekleyebileceğimizi göreceğiz.

leaflet-map.component.html

<div id="map" style="height: 400px;"></div>

leaflet-map.component.ts

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-leaflet-map',
templateUrl: './leaflet-map.component.html',
styleUrls: ['./leaflet-map.component.css']
})
export class LeafletMapComponent implements OnInit {
ngOnInit(): void {
// Haritayı başlatma
const map = L.map('map').setView([41.015137, 28.979530], 10); // İstanbul konumu
// OpenStreetMap katmanı ekleme
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
// İşaretçi (marker) ekleme
const marker = L.marker([41.015137, 28.979530]).addTo(map);
marker.bindPopup('İstanbul').openPopup();
}
}

Bileşeni Modüle Tanıtma

app.module.ts dosyasında `LeafletMapComponent`’i `declarations` dizisi içine ekleyin. Eğer yeni bir modül oluşturmadıysanız, büyük ihtimalle `AppModule` içinde kullanacaksınız.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LeafletMapComponent } from './leaflet-map/leaflet-map.component'; // ← Leaflet bileşeni
@NgModule({
 declarations: [
 AppComponent,
 LeafletMapComponent // ← Buraya ekliyoruz
 ],
 imports: [
 BrowserModule
 // Diğer importlarınız…
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Bu sayede, `LeafletMapComponent` uygulama genelinde tanınır hâle gelir.

AppComponent Şablonunda (HTML) Kullanma

<h1>Angular Leaflet Örneği</h1>
<! - Leaflet harita bileşenini çağırdığımız yer →
<app-leaflet-map></app-leaflet-map>

Projeyi Çalıştırma

ng serve

Bu kodu çalıştırdığınızda, 400 piksel yüksekliğinde bir harita bileşeni ve üzerinde bir marker göreceksiniz. Ayrıca, marker’a tıklandığında İstanbul ile ilgili bilgi balonu (pop-up) açılacaktır.

Kaynak Kodu / GitHub Linki

Daha detaylı projeyi incelemek veya kodları klonlamak isterseniz GitHub Repo Adresim üzerinden erişim sağlayabilirsiniz. Yukarıdaki adımların uygulandığı bir örnek Angular Projesi mevcuttur.