React Leaflet nasıl kullanılır ?

React Leaflet nedir ne için kullanılır ? Avantajlar…

Bu yazımda Leaflet ile nasıl map yapıldığından bahsedeceğim.React ile leaflet haritaları kullanmak isteyenler için umarım güzel bir yazı olur.

Neden Leaflet ?

Arayüzlerde kullandığımız haritalar her zaman kullanıcının dikkatini çeker ve daha önemli hissettirir. Kullanıcı için estetik bir görüntü oluşturabiliyor.

Önceden ücretsiz API_KEY veren Google Maps ,son zamanlarda kart bilgilerinin girilmesini zorunlu hale getirince geliştiricileri diğer alternatiflere itiyor. Bu alternatiflerden biri olan Leaflet, React ile uyumlu olması ve kullanım için bir bilgi istememesi geliştiricilerin ilgisini çekiyor.

Kurulum:

React uygulamamızı kurduktan sonra Terminale sırasıyla:

npm install react react-dom leaflet

npm install react-leaflet

yazıp kurulumları yapıyoruz. Son olarak gerekli bileşenleri import ettikten sonra haritamızı oluşturmaya başlayabilirsiniz.

import { MapContainer, TileLayer, Marker, Popup } from ‘react-leaflet’;

Leaflet resmi sayfasından kalan adımları takip ederek haritanızı oluşturabilirsiniz. Haritanıza markerlar ve popuplar ekleyebilirsiniz. Latlong sitesinden bakmak istediğiniz şehrin koordinatlarına ulaşabilirsiniz.

Gerekli adımları uyguladıktan sonra hala sıkıntı yaşıyorsanız şu adımları gerçekleştirin.

1)Projenizden node_modules dosyasını silin

2)npm cache clean - -force komutunu uygulayın

3)npm install yapıp projenizi tekrar çalıştırın.

Projemin kaynak kodu için: https://github.com/ebraraltunkaynak/react-leaflet

Okuduğunuz için teşekkür ederim, geri dönüşleriniz benim için önemlidir.