Bu dokümanda, sektörler ve segmentler genelinde çeşitli kullanım alanları için yararlı 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ö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 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.
- Çalışan 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ü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, kullanıcıların taksi çağırmanın ne kadar kolay olacağını anlamalarına yardımcı olabilir.
Yaklaşımın bir uygulama mimarisi diyagramı:
Dinamik Veriye Dayalı Stil Çözümü
Şimdi, veri kümeniz için dinamik veri odaklı stil choropleth 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, gerçek dünyadan alınan veriler olmasa da gerçek dünyadan uygulamalar içerir ve dinamik verilerin veri odaklı stil kullanarak haritada nasıl görselleştirilebileceğine dair bir güç ve olanak sunar.
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. Belirsiz sonuçlar olabileceği durumlarda, sorgunuz için doğru Yer Kimliği'ni 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, 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 her geçtiğinde, web çalışanı mailCode 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 bu verilere renkli nokta haritası stili 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'yi 0,5 olarak ayarlamak, kullanıcılarınızın alttaki haritayı görmesine ve vuruş Opaklığı'nı 1,0 olarak ayarlamasına izin verir. Böylece, aynı renkli poligonların sınırlarını birbirinden 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ına yönelik veriye dayalı stil, verilerinizi kullanarak haritanızın, sektörler ve segmentlerdeki çeşitli uygulamalar için stilini belirleme imkanı 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 bu verileri 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
Ana yazar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi