Bu dokümanda, sektörler ve segmentler genelinde çeşitli kullanım alanları için faydalı olan Maps JavaScript API'yi kullanarak Google sınırları için dinamik veri odaklı stil uygulamanın neden ve nasıl yapılacağı açıklanmaktadır.
Posta kodu sınırına göre New York'taki animasyonlu taksi sayıları (simulasyonlu, zaman atlamalı):
Veri odaklı stil, Google'ın idari sınır poligonlarını kullanmanıza, haritalarınızda gösterilmesi için bu poligonlara stil uygulamanıza ve görsel analiz için kullanılabilecek ve verilerinizi daha iyi anlamanızı sağlayacak zengin, özelleştirilmiş haritalar oluşturmak için kendi verilerinizi birleştirmenize olanak tanıyan bir Google Haritalar Platformu özelliğidir. Bu belgede, dinamik veri feed'lerini entegre ederek verilerinizi neden ve nasıl veri odaklı stilizasyonla harita üzerinde neredeyse gerçek zamanlı olarak görselleştirebileceğinizi açıklayan bazı kullanım alanları ele alınmaktadır.
Veriye dayalı 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.
Veri odaklı stillendirmede dinamik veri güncellemelerini gösteren bir harita için geçerli olabilecek kullanım alanlarına ilişkin bazı örnekleri aşağıda bulabilirsiniz:
- Araç paylaşma: Gerçek zamanlı güncellemeler, yüksek talep alanlarını belirlemek için kullanılabilir. Bu durumda bazı sağlayıcılar artan fiyat uygulayabilir.
- Ulaşım: Trafik sıkışıklığı olan bölgeleri belirlemek için gerçek zamanlı güncellemelerden yararlanabilirsiniz. Bu sayede en iyi alternatif rotaları belirleyebilirsiniz.
- Seçimler: Seçim gecesi, sonuçların gerçekleştiği anda görselleştirmek için gerçek zamanlı anket verileri kullanılabilir.
- İşçi güvenliği: Gerçek zamanlı güncellemeler, olayları gerçek zamanlı olarak takip etmek, yüksek riskli alanları belirlemek ve sahadaki müdahale ekiplerine durum bilinci sağlamak için kullanılabilir.
- Hava durumu: Gerçek zamanlı güncellemeler, fırtınaların hareketini izlemek, mevcut tehlikeleri tespit etmek ve uyarılar sağlamak için kullanılabilir.
- Çevre: Gerçek zamanlı güncellemeler, volkanik kül ve diğer kirliliğe yol açan maddelerin 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 haritada hızlı ve kolay bir şekilde görselleştirebilir. Böylece, daha bilinçli kararlar almaları için 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ı Stillendirme'yi kullanarak bir harita oluşturma adımlarını inceleyelim. Daha önce gösterildiği gibi, kullanım alanı, posta koduna göre görselleştirilmiş NYC taksilerinin sayısıdır. Bu sayede kullanıcılar taksi çağırmanın ne kadar kolay olacağını anlayabilir.
Yaklaşımın uygulama mimarisi şeması aşağıda verilmiştir:
Dinamik Veri Odaklı Stil Çözümü
Şimdi, veri kümeniz için dinamik veri odaklı stil renkli nokta haritası uygulamak için gereken adımları uygulayalım.
Bu çözüm, New York'ta posta koduna göre gerçek zamanlı taksi yoğunluğuna dair varsayımsal bir veri kümesini görselleştirmenize olanak tanır. Bu veriler gerçek dünyadan olmasa da gerçek dünyadaki uygulamalara sahiptir ve veri odaklı stilizasyonla dinamik verilerin haritada nasıl görselleştirilebileceğinin gücü ve özellikleri hakkında fikir verir.
1. adım: Görselleştirilecek ve bir sınır yer kimliğiyle birleştirilecek verileri seçin
İlk adım, görüntülemek istediğiniz verileri tanımlamak ve Google'ın sınırlarına eşleştirilebildiğinden emin olmaktır. Her posta kodu için findPlaceFromQuery geri çağırma yöntemini çağırarak bu eşleştirmeyi istemci tarafında yapabilirsiniz. ABD'deki posta kodlarının farklı adlara sahip olduğunu, diğer idari düzeylerin ise farklı adlara sahip olmadığını unutmayın. Net olmayan sonuçlar elde edebileceğiniz durumlarda sorgunuz için doğru yer kimliğini seçtiğinizden emin olun.
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 bu enlem/boylam değerlerini, stil uygulamak istediğiniz özellik katmanının yer kimliği değerlerine çözmek için bileşen filtrelemeyle birlikte Coğrafi Kodlama API'sini de kullanabilirsiniz. Bu örnekte POSTAL_CODE özellik katmanına stil uygulayacaksınız.
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 "posta_kodu" ve "taksi_sayısı" olmak üzere iki sütun içeren bir BigQuery tablosunda bulunduğunu ve Firebase Cloud Function 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ğlamalısınız. Bunu yapmanın bir yolu, web işleyici kullanarak yukarıdaki sorguyu çağırmak ve setInterval işlevini kullanarak verilerinizi yenileyecek bir zamanlayıcı ayarlamaktır. Aralık değerini, haritayı 15 saniyede bir yenileme gibi uygun bir değere ayarlayabilirsiniz. Aralık süresi her geçtiğinde web işleyici, posta kodu başına güncellenmiş taxiCount değerleri ister.
Artık verileri sorgulayıp yenileyebiliyoruz. Harita poligonlarının görünümünün bu değişiklikleri yansıttığından emin olalım.
3. adım: Veri odaklı stilizasyonla haritanıza stil uygulayın
Artık Haritalar JavaScript örneğinizdeki posta kodu sınırlarına JSON nesnesi olarak görsel bir stil oluşturmak ve uygulamak için gereken dinamik veri değerlerine sahipsiniz. Şimdi de renkli nokta haritası olarak stil uygulama zamanı.
Bu örnekte, haritayı her posta kodundaki taksi sayısına göre biçimlendirerek kullanıcılarınıza bulundukları bölgedeki taksi yoğunluğu ve kullanılabilirlik hakkında bilgi verebilirsiniz. Stil, taksi sayısı değerlerine bağlı olarak değişir. En az taksi bulunan bölgelere mor bir stil uygulanır. Renk gradyanı, en yüksek yoğunluktaki bölgeler için kırmızı, turuncu ve NYC taksi sarısı renklerinde son bulur. Bu renk şeması için bu renk değerlerini fillColor ve strokeColor'a uygulayacaksınız. fillOpacity değerini 0,5 olarak ayarlamak, kullanıcılarınızın temel haritayı görmesine olanak tanır. strokeOpacity değerini 1,0 olarak ayarlamak ise kullanıcılarınızın aynı renkli poligonların sınırlarını ayırt etmesine olanak tanır:
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 veriye dayalı stil, haritanıza sektörler ve segmentler genelinde çeşitli uygulamalar için stil vermek üzere verilerinizi kullanma olanağı sunar. Gerçek zamanlı verilere bağlanmak, nelerin, nerede ve nasıl gerçekleştiğini bildirmenize olanak tanır. Bu özellik, gerçek zamanlı verilerinizin değerini ortaya çıkarma ve kullanıcılarınızın gerçek dünyada gerçek zamanlı olarak daha iyi anlamalarına yardımcı olma potansiyeline sahiptir.
Sonraki İşlemler
- Google Haritalar sınırlarını biçimlendirmek için Veri Odaklı Stillendirme'yi kullanma webinar'ını izleyin.
- Veri odaklı stil için tıklama etkinlikleri ile görselleştirmenizi bir adım daha ileri taşıyın.
- Haritanıza gelişmiş işaretçiler ekleyebilirsiniz.
Katkıda bulunanlar
Başlıca yazar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi