Article cover

27.07.2022

27

Beğenme

405

Görüntülenme

React leaflet nedir 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.


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.

React
React Native

Yorumlar

Kullanıcı yorumlarını görüntüleyebilmek için kayıt olmalısınız!

Muhammed Ebrar Altunkaynak

Merhaba , Ben Ebrar 1 senedir React yazıyorum ve kendimi nodejs üzerine geliştiriyorum. www.ebrardev.com

Konum

Mersin, TR

Eğitim

Computer Engineering - Mersin University

İş Tecrübesi

BİLGİ İŞLEM -PART TIME - MERSİN ÜNİVERSİTESİ

Intern - GefeaSoft

© 2021 Patika Dev

facebook
twitter
instagram
youtube
linkedin