Bu belgede, Google sınırlarının dinamik veri odaklı stilini Maps JavaScript API'yi kullanarak neden ve nasıl uygulayacağınız açıklanmaktadır. Bu, sektörler ve segmentler genelinde çeşitli kullanım alanları için yararlı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 verilerinizi daha iyi anlamak 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 özelliğinde dinamik veri güncellemelerini 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: Gerçek zamanlı güncellemeler, yoğunluk yaşanan bölgeleri belirlemek için 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 izlemek, 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 veri odaklı stil 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ı anlamasına yardımcı olabilir.
Bu yaklaşımın uygulama mimarisi diyagramı aşağıda verilmiştir:
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ştirmenizi sağlar. 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. Bu eşleştirmeyi, her postalCode için findPlaceFromQuery geri çağırma yöntemini çağırarak 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 verileri 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, verileri güncel tuttuğunuzdan emin olmanı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ına görsel stil oluşturmak ve uygulamak için 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 stillendirerek 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, sektörler ve segmentler genelinde çeşitli uygulamalar için haritanızı biçimlendirmek ü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 Harita sınırlarını stillendirmek için veriye dayalı stil oluşturma ö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