Cara Membuat Peta Dengan React Dan Leaflet

Diterbitkan: 2022-03-10
Ringkasan cepat Leaflet adalah alat yang sangat kuat, dan kita dapat membuat banyak jenis peta yang berbeda. Tutorial ini akan membantu Anda memahami cara membuat peta tingkat lanjut bersama dengan bantuan React dan Vanilla JS.

Memahami informasi dari file CSV atau JSON tidak hanya rumit, tetapi juga membosankan. Mewakili data yang sama dalam bentuk alat bantu visual lebih sederhana. Dalam artikel ini, kami akan merepresentasikan lokasi insiden kebakaran non-medis yang ditanggapi oleh Pemadam Kebakaran SF di peta.

Untuk tutorial ini, kita akan menggunakan alat-alat berikut:

  • selebaran
    Pustaka JavaScript untuk peta interaktif
  • Reaksi
    Pustaka JavaScript untuk membangun antarmuka pengguna
  • Bereaksi-Leaflet
    Komponen reaksi untuk peta Leaflet

Apa itu Leaflet?

Dengan sekitar 27 ribu bintang, Leaflet.js adalah salah satu perpustakaan JavaScript open-source terkemuka untuk peta interaktif ramah seluler. Ini mengambil keuntungan dari HTML5 dan CSS3 di browser modern dan juga dapat diakses di browser lama. Secara keseluruhan, ini mendukung semua platform desktop dan seluler utama.

Leaflet memiliki berat sekitar 38KB dan berfungsi sempurna untuk hal-hal dasar. Untuk ekstensi tambahan, dapat diperpanjang dengan sejumlah besar plugin.

Banyak surat kabar, termasuk NPR, Washington Post, Boston Globe, antara lain, dan organisasi lain menggunakan Leaflet untuk proyek data mendalam mereka.

The San Francisco Chronicle, misalnya, melakukan proyek yang disebut California Fire tracker — peta interaktif yang menyediakan informasi tentang kebakaran hutan yang membakar di California, menggunakan Leaflet. Mereka tidak hanya menunjukkan dengan tepat asal api, tetapi mereka juga menunjukkan kepada kita lintasannya.

Karena ini adalah tutorial pengantar, kami hanya akan menandai lokasi insiden kebakaran dan menampilkan beberapa detail tentangnya.

Sebelum masuk ke React, mari kita pahami dasar-dasar Leaflet. Untuk ini, kita akan membuat contoh sederhana di mana kita akan menyiapkan peta Leaflet, bekerja dengan marker, dan popup.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Pertama, mari buat file index.html dan app.js di folder /project kita dan tautkan yang terakhir ke file index.html kita.

Untuk mulai menggunakan Leaflet, kita perlu menautkan Leaflet CSS dan Leaflet JS di tag kepala kita. Satu hal yang perlu diingat adalah bahwa Leaflet CSS ada sebelum Leaflet JS. Itu saja untuk Leaflet.

Ada satu hal lagi yang perlu kita tambahkan ke file index.html — sebuah wadah yang akan menampung peta kita.

 <div></div>

Sebelum kita lupa, mari kita beri ketinggian pada div kita.

 #mapid { height: 1000px; }

Sekarang tiba bagian menyenangkan. Apakah Anda memutuskan untuk membuat file JavaScript baru atau melanjutkan tag skrip, pastikan <div id="mapid"> ditambahkan ke dom sebelum memanggil L.map('mapid') .

Anda mungkin bertanya "Tapi, mengapa?" Nah, itu karena akan memberi Anda kesalahan jika Anda mengikat peta ke wadah yang belum ada.

 Uncaught Error: Map container not found

Membuat Peta

Sekarang, ke bagian yang menyenangkan. Untuk menginisialisasi peta, kami meneruskan div kami ke L.map() dengan beberapa opsi.

 const myMap = L.map('mapid', { center: [37.7749, -122.4194], zoom: 13 })

Mari kita selangkah demi selangkah untuk memahami apa yang baru saja terjadi. Kami menggunakan kelas Peta dari Leaflet API untuk membuat peta di halaman. Kami meneruskan dua parameter ke kelas ini:

  1. Kami meneruskan variabel string yang mewakili ID DOM
  2. Objek literal opsional dengan opsi peta

Ada banyak opsi yang bisa kami berikan ke kelas kami, tetapi dua opsi utama adalah pusat dan zoom. Bagian tengah mendefinisikan pusat geografis awal peta sementara zoom menentukan tingkat zoom peta awal. Keduanya tidak ditentukan secara default.

Untuk pusat, kami melewati koordinat San Francisco. Ada banyak tempat di mana kita bisa melakukan geocoding maju dan mundur, tapi untuk pencarian dasar seperti ini, kita bisa google.

Biasanya, nilai zoom akan tergantung pada apa yang ingin Anda tampilkan. Apakah Anda ingin menunjukkan kota atau negara bagian? Negara atau benua? Silakan dan bermain-main dengan nilai zoom untuk mendapatkan ide yang lebih baik. Untuk contoh ini, kami memilih 13 karena ini menunjukkan seluruh kota.

Cara lain untuk menginisialisasi peta adalah dengan menggunakan setView(). Dibutuhkan dalam array koordinat dan bilangan bulat untuk tingkat zoom.

 const myMap = L.map('map').setView([37.7749, -122.4194], 13);

Secara default, semua interaksi mouse dan sentuh pada peta diaktifkan, dan memiliki kontrol zoom dan atribusi.

Membuat Lapisan

Selanjutnya, kita akan menambahkan lapisan ubin ke peta kita; dalam kasus kami, ini adalah lapisan ubin Mapbox Streets. Kita dapat menambahkan berbagai jenis lapisan ubin dengan membuat instance kelas TileLayer.

Untuk membuat lapisan petak, kita perlu mengatur templat URL untuk gambar petak, teks atribusi, dan tingkat zoom maksimum lapisan. Template URL adalah yang memberi kita akses ke lapisan ubin yang diinginkan dari penyedia layanan. Karena kita menggunakan API Ubin Statis Mapbox, kita perlu meminta token akses.

 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', accessToken: 'your.mapbox.access.token' }).addTo(mymap);

Pada titik ini, jika kita membuka index.html di browser, kita seharusnya dapat melihat peta San Francisco. Ayo pasang pin di peta.

Spidol Dan Lingkaran

Kami memiliki peta dan lapisannya, tetapi itu tidak mengarahkan kami ke sesuatu yang spesifik. Untuk menunjuk ke lokasi tertentu di peta, Leaflet memberi kita penanda.

Untuk menyematkan lokasi, kami membuat instance penanda menggunakan kelas Marker, meneruskan koordinat, dan menambahkannya ke peta. Di sini kita menggunakan koordinat Twin Peaks di kota.

 const marker = L.marker([37.7544, -122.4477]).addTo(mymap);

Demikian pula, kita dapat mengikat lingkaran ke peta menggunakan kelas Circle . Kami memberikan beberapa opsi opsional, seperti radius, warna, dan sebagainya. Untuk penanda circle , kita lewat di koordinat Titik Mercusuar Bonita.

 const circle = L.circle([37.8157, -122.5295], { color: 'gold', fillColor: '#f03', fillOpacity: 0.5, radius: 200 }).addTo(mymap);

Muncul tiba-tiba

Ini semua bagus, tetapi bagaimana jika kita ingin menyampaikan beberapa informasi lebih lanjut tentang lokasi. Kami melakukan ini menggunakan popup.

 circle.bindPopup("I am pointing to Point Bonita Lighthouse"); marker.bindPopup("I am pointing to Twin Peaks");

Metode bindPopup mengambil konten HTML tertentu dan menambahkannya ke penanda, sehingga munculan muncul saat Anda mengklik penanda.

Bereaksi-Leaflet

Sekarang kita tahu cara membuat peta, dan menambahkan penanda menggunakan JavaScript Leaflet dan vanilla. Mari kita lihat bagaimana kita dapat mencapai hasil yang sama dengan React. Kami tidak akan membuat aplikasi yang sama melainkan membuat aplikasi lanjutan.

Tugas pertama bagi kami adalah mendapatkan token akses dari portal San Francisco Open Data. Ini adalah portal online tempat kami dapat menemukan ratusan kumpulan data dari Kota dan Kabupaten San Francisco. Saya memutuskan untuk menggunakan sumber daya ini, tetapi ada banyak sumber daya lain di luar sana yang dapat kita gunakan sebagai gantinya.

Akses Kunci API

  1. Buat akun dan masuk ke portal.
  2. Klik tautan kelola di kanan bawah.
  3. Klik Buat Kunci API Baru dan beri nama.
  4. Salin ID Kunci dan Rahasia Kunci Anda. Anda akan membutuhkan ini untuk mengakses data.

Untuk ini, kita akan menggunakan React-Leaflet – komponen reaksi untuk peta Leaflet. Mari buat aplikasi reaksi.

 npx create-react-app react-fire-incidents cd react-fire-incidents

Kemudian mari kita instal react-leaflet , dan Leaflet dengan menjalankan perintah berikut di terminal kita:

 npm install react-leaflet leaflet

aplikasi.js

Mari buat folder /components di dalam src . Di dalam komponen, mari buat file bernama Map.js . Di sinilah Peta kita akan hidup. Sekarang mari edit App.js dengan menghapus kode yang tidak perlu dan mengimpor modul dari react-leaflet axios yang baru dibuat.

 import React, { Component, Fragment } from 'react'; import axios from 'axios'; import Map from './components/Map'

Di kelas Aplikasi kami, kami akan mendefinisikan sebuah larik dalam status kami yang disebut insiden — ketika halaman dimuat, kami akan mendorong data kami ke dalam larik ini.

 class App extends Component { state = { incidents: [], } render() { return ( <div> </div> ); } } export default App;

Selanjutnya, kita akan membuat permintaan GET saat komponen di-mount. Kami memiliki token aplikasi, tetapi kami masih membutuhkan titik akhir. Di mana kita menemukan titik akhir?

Mari menuju ke portal dan klik Browse Data. Di bilah pencarian, mari kita cari insiden kebakaran. Hasil pertama yang muncul adalah apa yang kita cari. Setelah kita mengklik link, kita bisa mendapatkan URL dengan mengklik tombol API di kanan atas.

Kami akan meneruskan titik akhir ke permintaan GET kami, dan memberikan batas dan token aplikasi kami sebagai parameter. Data asli memiliki ribuan catatan, tetapi demi menjaga hal-hal sederhana, kami telah membatasi hingga 500. Kami memperbarui susunan insiden kami dengan hasil kami.

Setelah kami mendapatkan data, kami memperbarui status kami.

 async componentDidMount() { const res = await axios.get('https://data.sfgov.org/resource/wr8u-xric.json', { params: { "$limit": 500, "$$app_token": YOUR_APP_TOKEN } }) const incidents = res.data; this.setState({incidents: incidents }); };

Seperti inilah tampilan App.js kita.

 class App extends Component { state = { incidents: [], } async componentDidMount() { const res = await axios.get('https://data.sfgov.org/resource/wr8u-xric.json', { params: { "$limit": 500, "$$app_token": YOUR_APP_TOKEN } }) const incidents = res.data; this.setState({incidents: incidents }); }; render() { return ( <Map incidents={this.state.incidents}/> ); } } export default App;

peta.js

Karena kita sudah tahu cara membuat peta Leaflet, bagian ini akan relatif mudah. Kami akan mengimpor komponen Map , TileLayer , Marker , Popup dari react-leaflet .

 import React, { Component } from 'react' import { Map, TileLayer, Marker, Popup } from 'react-leaflet'

Jika kita ingat dari contoh sebelumnya, kita membutuhkan koordinat dan tingkat zoom untuk menginisialisasi peta. Di kelas Map kami, kami mendefinisikannya dalam status kami menggunakan variabel lat , lng dan zoom .

 export default class Map extends Component { state = { lat: 37.7749, lng: -122.4194, zoom: 13, } render() { return ( <div></div> ) } }

Kemudian kami akan memeriksa apakah susunan insiden kami kosong. Jika kosong, kami akan mengembalikan pesan yang mengatakan "Data Sedang Memuat"; jika tidak, kami akan mengembalikan peta.

Dalam komponen Map react-leaflet kami, kami akan melewati koordinat tengah dan tingkat zoom bersama dengan beberapa gaya. Dalam komponen TileLayer kami, kami akan meneruskan atribusi dan URL yang mirip dengan contoh kami sebelumnya.

 render() { return ( this.props.incidents ? <Map center={[this.state.lat, this.state.lng]} zoom={this.state.zoom} style={{ width: '100%', height: '900px'}} > <TileLayer attribution='&copy <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> </Map> : 'Data is loading...' ) } }

Selanjutnya, kita mengulang props.incident kita dan meneruskan koordinat setiap insiden ke komponen Marker. Karena React memperingatkan kita untuk memberikan kunci ke setiap item dalam array, kita juga akan memberikan kunci ke Marker.

Di dalam komponen Marker , kami memasukkan komponen Popup . Saya telah menambahkan beberapa informasi tentang insiden di dalam popup.

 <Map center={[this.state.lat, this.state.lng]} zoom={this.state.zoom} style={{ width: '100%', height: '900px'}}> <TileLayer attribution='&copy <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> { this.props.incidents.map(incident => { const point = [incident['point']['coordinates'][1], incident['point']['coordinates'][0]] return ( <Marker position={point} key={incident['incident_number']} > <Popup> <span>ADDRESS: {incident['address']}, {incident['city']} - {incident['zip_code']}</span> <br/> <span>BATTALION: {incident['battalion']}</span><br/> </Popup> </Marker> ) }) } </Map>

Dan ini dia. Jika kami menjalankan aplikasi kami, dan jika semuanya berjalan dengan baik, kami akan dapat melihat peta San Francisco dengan 500 penanda yang mengarahkan kami ke lokasi insiden kebakaran. Jika kita mengklik salah satu penanda tersebut, sebuah popup akan muncul dengan informasi lebih lanjut tentang insiden tersebut.

Membungkus

Meskipun kami membahas banyak hal, ini hanya dasar-dasarnya. Leaflet adalah alat yang sangat kuat, dan kita dapat membuat banyak jenis peta yang berbeda. Jika Anda ingin bermain-main, coba tambahkan lapisan lain atau ikon khusus. Atau mungkin Anda ingin membuat Peta Choropleth interaktif.