Bu belgede, sektörler ve segmentler genelinde çeşitli kullanım alanları için yararlı olan Haritalar JavaScript API'sini kullanarak Google sınırları için dinamik Veri Odaklı Stil'in neden ve nasıl uygulanacağı açıklanmaktadır.
New York'ta posta kodu sınırına göre animasyonlu taksi sayıları (simulasyonlu, zaman atlamalı):
Veri odaklı stil, Google'ın idari sınır poligonlarını kullanmanıza, haritalarınızda gösterilmeleri için bu poligonlara stil uygulamanıza ve görsel analizler yapmak ve verilerinizi daha iyi anlamak için kullanılabilecek zengin, özelleştirilmiş haritalar oluşturmak üzere kendi verilerinizi birleştirmenize olanak tanıyan bir Google Haritalar Platformu özelliğidir. Bu dokümanda, dinamik veri feed'lerini entegre ederek verilerinizi neden ve nasıl veri odaklı stilizasyonla neredeyse gerçek zamanlı olarak bir haritada 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ı stillendirmede dinamik veri güncellemelerini gösteren bir harita için geçerli olabilecek bazı kullanım alanı örneklerini aşağıda bulabilirsiniz:
- Araç paylaşma: Gerçek zamanlı güncellemeler, talep yoğunluğu yüksek alanları belirlemek için kullanılabilir. Bu durumda bazı sağlayıcılar ek ücret uygulayabilir.
- Taşımacılık: Trafik sıkışıklığı olan bölgeleri belirlemek için anlık 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 durumsal farkındalık 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üllerin 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 bir haritada hızlı ve kolay bir şekilde görselleştirebilir. Böylece, daha bilinçli kararlar alabilmek için anında analizler elde etme gücünden yararlanabilirler.
Çözüme Mimari Yaklaşım
Şimdi dinamik verileri görselleştirmek için Veriye Dayalı Stil özelliğini 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, kullanıcıların taksi çağırmanın ne kadar kolay olacağını anlamalarına yardımcı olabilir.
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ğuyla ilgili varsayımsal bir veri kümesini görselleştirmenize olanak tanır. Bu veriler gerçek dünyadan olmasa da gerçek dünyada uygulamaları vardır 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östermek 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ı için yer kimliği değerlerine çözmek üzere 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 durumda, verilerinizin "posta_kodu" ve "taksi_sayısı" adlı iki sütun içeren bir BigQuery tablosunda bulunduğunu ve bu tabloyu bir Firebase Cloud İş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 olduğundan emin olmanız gerekir. Bunu yapmanın bir yolu, bir web işleyicisi 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 çalışanı, posta kodu başına güncellenmiş taxiCount değerleri ister.
Artık verileri sorgulayıp yenileyebiliyoruz. Şimdi 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ı stil oluşturma ile 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. Bu verileri renkli nokta haritası olarak biçimlendirmenin zamanı geldi.
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 göre değişir. En az taksi bulunan alanlara mor bir stil uygulanır ve renk gradyanı, en yüksek yoğunluktaki alanlar 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 veri odaklı stil, haritanıza sektörler ve segmentler genelinde çeşitli uygulamalar için stil vermek amacıyla verilerinizi kullanma olanağı sunar. Gerçek zamanlı verilere bağlanmak, nelerin, nerede ve ne zaman 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 harita sınırlarını biçimlendirmek için Veri Odaklı Stillendirme'yi kullanma webinar'ını izleyin.
- Veri odaklı stil için tıklama etkinlikleriyle 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