Dokumen ini menjelaskan alasan dan cara menerapkan Gaya visual berbasis data untuk Batas Google menggunakan Maps JavaScript API, yang berguna untuk berbagai kasus penggunaan di seluruh industri dan segmen.
Animasi jumlah taksi di New York City berdasarkan batas kode pos (simulasi, time lapse):
Gaya visual berbasis data adalah kemampuan Google Maps Platform yang memungkinkan Anda menggunakan poligon batas administratif Google, menerapkan gaya visual ke poligon tersebut untuk ditampilkan di peta, dan menggabungkan data Anda sendiri untuk membuat peta lengkap yang disesuaikan yang dapat digunakan untuk analisis visual dan meningkatkan pemahaman data. Dokumen ini akan membahas beberapa kasus penggunaan yang menjelaskan alasan dan cara Anda dapat memvisualisasikan data dengan Gaya visual berbasis data di peta hampir secara real-time dengan mengintegrasikan feed data dinamis.
Gaya visual berbasis data memungkinkan Anda membuat peta yang menampilkan distribusi geografis data, menyesuaikan gaya poligon secara dinamis, dan berinteraksi dengan data melalui peristiwa klik. Fitur-fitur ini dapat digunakan untuk membuat peta yang informatif dan menarik untuk berbagai kasus penggunaan dan industri.
Berikut beberapa contoh kasus penggunaan yang dapat berlaku untuk peta yang menampilkan pembaruan data dinamis tentang Gaya visual berbasis data:
- Transportasi online: Update real-time dapat digunakan untuk mengidentifikasi area dengan permintaan yang tinggi, yang dalam hal ini beberapa penyedia mungkin memiliki harga lonjakan.
- Transportasi: Update real-time dapat digunakan untuk mengidentifikasi area kemacetan, yang akan membantu menentukan rute alternatif terbaik.
- Pemilu: Pada malam pemilu, data polling data real-time dapat digunakan untuk memvisualisasikan hasil yang sedang terjadi.
- Keselamatan pekerja: Pembaruan real-time dapat digunakan untuk melacak peristiwa yang terjadi secara real time, mengidentifikasi area berisiko tinggi, dan memberikan kesadaran situasional kepada responden di lapangan.
- Cuaca: Pembaruan real-time dapat digunakan untuk melacak pergerakan badai, mengidentifikasi bahaya saat ini, serta memberikan peringatan dan peringatan.
- Lingkungan: Pembaruan real-time dapat digunakan untuk melacak pergerakan abu vulkanik dan polutan lainnya, mengidentifikasi area yang menyebabkan kerusakan lingkungan, dan memantau dampak aktivitas manusia.
Dalam semua situasi ini, pelanggan dapat memperoleh nilai tambahan dengan menggabungkan feed data real-time mereka dengan batasan Google untuk memvisualisasikan data mereka di peta dengan cepat dan mudah, sehingga memberi mereka kekuatan super berupa insight yang mendekati instan untuk pengambilan keputusan yang lebih tepat.
Pendekatan Arsitektur terhadap Solusi
Sekarang, mari kita bahas pembuatan peta menggunakan Gaya visual berbasis data untuk memvisualisasikan data dinamis. Seperti yang diilustrasikan sebelumnya, kasus penggunaannya adalah penghitungan taksi NYC yang divisualisasikan berdasarkan kode pos. Informasi ini dapat membantu pengguna memahami betapa mudahnya memanggil taksi.
Berikut adalah diagram arsitektur aplikasi dari pendekatan tersebut:
Solusi Gaya Visual Berbasis Data Dinamis
Sekarang mari kita pelajari langkah-langkah yang diperlukan untuk menerapkan Peta koroplet Gaya visual berbasis data dinamis untuk set data Anda.
Solusi ini memungkinkan Anda memvisualisasikan set data fiktif tentang kepadatan taksi real-time di sekitar New York City berdasarkan kode pos. Meskipun mungkin bukan data di dunia nyata, data ini memiliki penerapan di dunia nyata dan memberi Anda gambaran tentang kekuatan dan kemampuan tentang bagaimana data dinamis dapat divisualisasikan di peta dengan Gaya visual berbasis data.
Langkah 1: Pilih data untuk divisualisasikan dan digabungkan dengan ID Tempat batas
Langkah pertama adalah mengidentifikasi data yang ingin Anda tampilkan dan memastikan data tersebut dapat dicocokkan dengan batas Google. Anda dapat melakukan sisi klien yang cocok ini dengan memanggil metode callback findPlaceFromQuery untuk setiap posCode. Perhatikan bahwa kode pos di AS memiliki nama yang berbeda, tetapi tingkat administratif lainnya tidak. Pastikan untuk memilih ID Tempat yang benar untuk kueri Anda jika ada hasil yang ambigu.
const request = {
query: postalCode,
fields: ['place_id'],
};
function findPlaceId() {
placesService.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
Jika data Anda memiliki nilai lintang dan bujur, Anda juga dapat menggunakan Geocoding API dengan pemfilteran komponen untuk menyelesaikan nilai lintang/lon tersebut menjadi nilai ID Tempat untuk lapisan fitur yang ingin Anda ubah gayanya. Dalam contoh ini, Anda akan menata gaya lapisan fitur POSTAL_CODE.
Langkah 2: Hubungkan ke data real-time
Ada berbagai cara untuk terhubung ke sumber data, dan penerapan terbaik akan bergantung pada kebutuhan khusus dan infrastruktur teknis Anda. Dalam hal ini, asumsikan data Anda berada di tabel BigQuery dengan dua kolom: "zip_code" dan "taxi_count", dan Anda akan membuat kuerinya melalui Firebase Cloud Function.
async function queryNycTaxis() {
// Queries the NYC Taxis dataset.
// Create a client
const bigqueryClient = new BigQuery();
// The SQL query to run
const sqlQuery = 'SELECT zip_code, taxi_count
FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
const options = {
query: sqlQuery,
// Location must match that of the dataset(s)
// referenced in the query.
location: 'US',
};
// Run the query
const [rows] = await bigqueryClient.query(options);
rows.forEach(row => {
const postalCode = row['zip_code'];
const taxiCount = row['taxi_count'];
});
}
Selanjutnya, pastikan Anda terus memperbarui data. Salah satu cara untuk melakukannya adalah dengan memanggil kueri di atas menggunakan pekerja web, dan menyetel timer untuk memuat ulang data Anda menggunakan fungsi setInterval. Anda dapat menetapkan interval ke nilai yang sesuai, seperti memuat ulang peta setiap 15 detik. Setiap kali waktu interval berlalu, pekerja web akan meminta nilai taxiCount yang diperbarui per postalCode.
Sekarang setelah kita dapat melakukan kueri dan memuat ulang data, pastikan tampilan poligon peta mencerminkan perubahan ini.
Langkah 3: Menata gaya peta Anda dengan gaya visual berbasis data
Setelah Anda memiliki nilai data dinamis yang diperlukan untuk membuat dan menerapkan gaya visual ke batas kode pos di instance Maps JavaScript sebagai objek JSON, sekarang saatnya memberinya gaya sebagai peta koroplet.
Dalam contoh ini, Anda akan menata gaya peta berdasarkan jumlah taksi di setiap kode pos, sehingga memberi pengguna gambaran kepadatan dan ketersediaan taksi di wilayah mereka. Gaya akan bervariasi bergantung pada nilai jumlah taksi. Area dengan taksi paling sedikit akan diberi gaya ungu, dan gradasi warna akan bergerak melewati warna merah, oranye, dan berakhir di taksi NYC kuning untuk area dengan kepadatan tertinggi. Untuk skema warna ini, Anda akan menerapkan nilai warna ini ke fillColor dan strokeColor. Menetapkan fillOpacity ke 0,5 memungkinkan pengguna Anda melihat peta yang mendasarinya, dan menetapkan strokeOpacity menjadi 1,0 memungkinkan mereka untuk membedakan antara batas poligon berwarna sama:
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
// taxiCount per (postal_code) PlaceID
const taxiCount = zips[placeFeature.placeId];
let fillColor;
let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
fillColor = "#571845";
strokeColor = "#571845";
} else if (taxiCount < 13) {
fillColor = "#900c3e";
strokeColor = "#900c3e";
} else if (taxiCount < 21) {
fillColor = "#c60039";
strokeColor = "#c60039";
} else if (taxiCount < 34) {
fillColor = "#fe5733";
strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) {
fillColor = "#fec30f";
strokeColor = "#fec30f";
}
return {
fillColor,
strokeColor,
fillOpacity: 0.5,
strokeOpacity: 1.0,
};
Kesimpulan
Gaya visual berbasis data untuk batas-batas Google membuka kemampuan dalam menggunakan data Anda untuk menata gaya peta untuk berbagai penerapan di seluruh industri dan segmen. Dengan terhubung ke data real-time, Anda dapat menyampaikan apa yang terjadi, tempat terjadinya, dan saat terjadi. Kemampuan ini memiliki potensi untuk memanfaatkan data real-time Anda dan membantu pengguna lebih memahaminya secara real-time, di dunia nyata.
Tindakan Berikutnya
- Tonton webinar Cara menggunakan Gaya visual berbasis data untuk menata gaya batas peta Google.
- Buat visualisasi Anda selangkah lebih maju dengan peristiwa klik untuk Gaya visual berbasis data.
- Pertimbangkan untuk menambahkan Penanda Lanjutan ke peta Anda.
Kontributor
Penulis utama:
Jim Leflar | Engineer Solusi Google Maps Platform