Bu belgede, Google sınırlarının dinamik Veriye dayalı stil özelliğini Maps JavaScript API'yi kullanarak neden ve nasıl uygulayacağınız açıklanmaktadır. Bu özellik, sektörler ve segmentler genelinde çeşitli kullanım alanları için faydalıdır.
Posta kodu sınırına göre New York'taki animasyonlu taksi sayıları (simüle edilmiş, zaman atlamalı):
Veri odaklı stil, Google'ın idari sınır poligonlarını kullanmanıza, haritalarınızda gösterilecek bu poligonlara stil uygulamanıza ve kendi verilerinizi birleştirerek görsel analiz ve verilerinizin daha iyi anlaşılması için kullanılabilecek zengin, özel haritalar oluşturmanıza olanak tanıyan bir Google Haritalar Platformu özelliğidir. Bu belgede, dinamik veri feed'lerini entegre ederek verilerinizi harita üzerinde neredeyse gerçek zamanlı olarak veri odaklı stil ile neden ve nasıl görselleştirebileceğinizi açıklayan bazı kullanım alanları ele alınmaktadır.
Veri odaklı stil, verilerin coğrafi dağılımını gösteren haritalar oluşturmanıza, poligon stilini dinamik olarak özelleştirmenize ve tıklama etkinlikleri aracılığıyla verilerinizle etkileşim kurmanıza olanak tanır. Bu özellikler, çeşitli kullanım alanları ve sektörler için bilgilendirici ve ilgi çekici haritalar oluşturmak amacıyla kullanılabilir.
Veriye dayalı stil üzerinde dinamik veri güncellemeleri gösteren bir harita için geçerli olabilecek kullanım alanlarına dair bazı örnekler:
- Araç paylaşımı: Gerçek zamanlı güncellemeler, talebin yüksek olduğu bölgeleri belirlemek için kullanılabilir. Bu durumda bazı sağlayıcılar fiyat artışı uygulayabilir.
- Ulaşım: Yoğunluk olan bölgeleri belirlemek için anlık güncellemeler kullanılabilir. Bu sayede en iyi alternatif rotalar belirlenebilir.
- Seçimler: Seçim gecesi, sonuçları anlık olarak görselleştirmek için gerçek zamanlı anket verileri kullanılabilir.
- Çalışan güvenliği: Gerçek zamanlı güncellemeler, olayları anlık olarak takip etmek, yüksek riskli alanları belirlemek ve sahadaki müdahale ekiplerine durumsal farkındalık sağlamak için kullanılabilir.
- Hava durumu: Fırtınaların hareketini takip etmek, mevcut tehlikeleri belirlemek ve uyarılar ile alarmlar göndermek için gerçek zamanlı güncellemeler kullanılabilir.
- Çevre: Gerçek zamanlı güncellemeler, volkanik kül ve diğer kirleticilerin hareketini izlemek, çevre kirliliğinin olduğu alanları belirlemek ve insan faaliyetlerinin etkisini izlemek için kullanılabilir.
Tüm bu durumlarda müşteriler, gerçek zamanlı veri feed'lerini Google'ın sınırlarıyla birleştirerek verilerini harita üzerinde hızlı ve kolay bir şekilde görselleştirebilir. Bu sayede, daha bilinçli kararlar almak için neredeyse anında analizler elde etme gücüne sahip olurlar.
Çözüme Mimari Yaklaşım
Şimdi, dinamik verileri görselleştirmek için Veriye Dayalı Stil özelliğini kullanarak harita oluşturma adımlarını inceleyelim. Daha önce gösterildiği gibi, kullanım alanı posta koduna göre görselleştirilen NYC taksilerinin sayısıdır. Bu, kullanıcıların taksi çağırmanın ne kadar kolay olacağını anlamalarına yardımcı olabilir.
Bu yaklaşımın uygulama mimarisi diyagramını aşağıda bulabilirsiniz:
Dinamik Veri Odaklı Stil Çözümü
Şimdi, veri kümeniz için dinamik bir veri odaklı stil renk tonlu harita uygulamak için gereken adımları inceleyelim.
Bu çözüm, New York City'deki gerçek zamanlı taksi yoğunluğuna dair varsayımsal bir veri kümesini posta koduna göre görselleştirmenize olanak tanır. Bu veriler gerçek dünyadan alınmamış olsa da gerçek dünyada uygulamaları vardır ve dinamik verilerin, veri odaklı stil ile harita üzerinde nasıl görselleştirilebileceğinin gücü ve özellikleri hakkında size fikir verir.
1. adım: Görselleştirilecek ve bir sınır yeri kimliğine katılacak verileri seçin
İlk adım, görüntülemek istediğiniz verileri belirlemek ve bu verilerin Google'ın sınırlarıyla eşleştirilebileceğinden emin olmaktır. Her postalCode için findPlaceFromQuery geri çağırma yöntemini çağırarak bu eşleştirmeyi istemci tarafında gerçekleştirebilirsiniz. ABD'deki posta kodlarının farklı adları olduğunu ancak diğer idari düzeylerin farklı adları olmadığını unutmayın. Belirsiz sonuçların olabileceği durumlarda sorgunuz için doğru yer kimliğini seçtiğinizden emin olmanız gerekir.
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]);
}
});
}
Verilerinizde enlem ve boylam değerleri varsa stilini belirlemek istediğiniz özellik katmanının enlem/boylam değerlerini yer kimliği değerlerine dönüştürmek için bileşen filtrelemeyle birlikte Geocoding API'yi de kullanabilirsiniz. Bu örnekte POSTAL_CODE özellik katmanını stillendireceksiniz.
2. adım: Gerçek zamanlı verilere bağlanın
Veri kaynaklarına bağlanmanın çeşitli yolları vardır. En iyi uygulama, özel ihtiyaçlarınıza ve teknik altyapınıza bağlıdır. Bu örnekte, verilerinizin "zip_code" ve "taxi_count" adlı iki sütun içeren bir BigQuery tablosunda bulunduğunu ve bu tabloyu bir Firebase Cloud Functions işlevi aracılığıyla sorgulayacağınızı varsayalım.
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'];
});
}
Ardından, verilerin güncel kalmasını sağlamanız gerekir. Bunu yapmanın bir yolu, yukarıdaki sorguyu bir web worker kullanarak çağırmak ve setInterval işlevini kullanarak verilerinizi yenilemek için bir zamanlayıcı ayarlamaktır. Aralığı uygun bir değere ayarlayabilirsiniz (ör. haritayı 15 saniyede bir yenileme). Aralık süresi her geçtiğinde web çalışanı, postalCode başına güncellenmiş taxiCount değerlerini ister.
Verileri sorgulayıp yenileyebildiğimize göre, harita poligonlarının görünümünün bu değişiklikleri yansıttığından emin olalım.
3. adım: Veriye dayalı stil ile haritanıza stil uygulama
Maps JavaScript örneğinizdeki posta kodu sınırları için görsel stil oluşturup uygulamak üzere gereken dinamik veri değerlerini JSON nesnesi olarak aldığınıza göre, artık bu değerleri renk tonlu harita olarak biçimlendirebilirsiniz.
Bu örnekte, haritayı her posta kodundaki taksi sayısına göre biçimlendirerek kullanıcılarınıza bölgelerindeki taksi yoğunluğu ve müsaitlik durumu hakkında fikir vereceksiniz. Stil, taksi sayısı değerlerine göre değişir. En az taksinin bulunduğu alanlara mor stil uygulanır. Renk gradyanı kırmızı ve turuncu renklerden geçerek en yüksek yoğunluklu alanlar için NYC taksi sarısı renginde biter. Bu renk şeması için fillColor ve strokeColor'a bu renk değerlerini uygulayacaksınız. fillOpacity değerini 0,5 olarak ayarladığınızda kullanıcılarınız alttaki haritayı görebilir. strokeOpacity değerini 1,0 olarak ayarladığınızda ise aynı renkteki çokgenlerin sınırlarını ayırt edebilirler:
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,
};
Sonuç
Google sınırları için veri odaklı stil, haritanızı sektörler ve segmentler genelinde çeşitli uygulamalar için stilize etmek üzere verilerinizi kullanma olanağı sunar. Gerçek zamanlı verilere bağlanmak, ne olduğunu, nerede olduğunu ve ne zaman olduğunu iletmenize olanak tanır. Bu özellik, gerçek zamanlı verilerinizin değerini ortaya çıkarma ve kullanıcılarınızın bu verileri gerçek dünyada, gerçek zamanlı olarak daha iyi anlamasına yardımcı olma potansiyeline sahiptir.
Sonraki İşlemler
- Google Haritalar sınırlarına stil uygulamak için veri odaklı stil özelliğini kullanma web seminerini izleyin.
- Veri odaklı stil için tıklama etkinlikleri ile görselleştirmenizi bir adım ileriye taşıyın.
- Haritanıza Gelişmiş İşaretçiler ekleyebilirsiniz.
Katkıda bulunanlar
Asıl yazar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi