Bu dokümanda, Maps JavaScript API kullanılarak Google Sınırlarının dinamik veriye dayalı stilinin neden ve nasıl uygulanacağı açıklanmaktadır. Bu API, sektörler ve segmentlerdeki çeşitli kullanım alanlarında kullanışlıdır.
New York'taki taksi sayısının posta kodu sınırına göre animasyonlu olarak gösterilmesi (simüle edilmiş, zamana bağlı):
Veriye dayalı stil, Google'ın idari sınır poligonlarından yararlanmanıza, haritalarınızda görüntülemek üzere bu poligonlara stil uygulamanıza ve kendi verilerinizi birleştirerek görsel analiz ve verilerinizin daha iyi anlaşılması için kullanılabilecek zengin, özelleştirilmiş haritalar oluşturmanıza olanak tanıyan bir Google Haritalar Platformu özelliğidir. Bu belgede, verilerinizi neden ve nasıl görselleştirebileceğinizle ilgili bazı kullanım örneklerinden bahsedeceğiz. Bu kullanım alanları, dinamik veri feed'lerini entegre ederek haritada veri odaklı biçimlendirme ile neredeyse gerçek zamanlı olarak sunulur.
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şimde bulunmanı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ı stilde dinamik veri güncellemelerini gösteren bir harita için geçerli olabilecek kullanım alanlarına bazı örnekler aşağıda verilmiştir:
- Yolculuk 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ılarda ani fiyatlar uygulanabilir.
- Ulaşım: Kalabalık bölgeleri tanımlamak için gerçek zamanlı güncellemeler kullanılabilir. Bu da en iyi alternatif rotaların belirlenmesine yardımcı olur.
- 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, meydana gelen etkinlikleri 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ınanın hareketini izlemek, mevcut tehlikeleri belirlemek, uyarılar ve uyarılar sağlamak için kullanılabilir.
- Çevre: Gerçek zamanlı güncellemeler, volkanik küllerin ve kirliliğe yol açan diğer maddelerin hareketini izlemek, çevresel bozulma alanlarını 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 da onlara, daha bilinçli kararlar vermeleri için neredeyse anında analizlerin süper gücünü sunar.
Çözüme Mimari Yaklaşım
Şimdi de dinamik verileri görselleştirmek için Veriye dayalı stil özelliğini kullanarak harita oluşturmayı adım adım inceleyelim. Daha önce de gösterildiği gibi kullanım alanı, posta kodu ile görselleştirilen New York taksilerinin sayısıdır. Bu, kullanıcıların taksi çağırmanın ne kadar kolay olduğunu anlamalarına yardımcı olabilir.
Yaklaşımın bir uygulama mimarisi şeması aşağıda verilmiştir:
Dinamik Veriye Dayalı Stil Çözümü
Şimdi, veri kümeniz için dinamik bir Veriye dayalı stil renklendirme haritası uygulamak üzere gerekli adımların üzerinden geçelim.
Bu çözüm, posta koduna göre New York City çevresindeki gerçek zamanlı taksi yoğunluğuna ilişkin varsayımsal bir veri kümesini görselleştirmenizi sağlar. Bu veriler gerçek dünyaya ait veriler olmasa da gerçek dünyaya ait uygulamalara sahiptir ve dinamik verilerin veri odaklı stil ile harita üzerinde nasıl görselleştirilebileceğine dair bir fikir verir ve size bir fikir verir.
1. Adım: Görselleştirilecek verileri seçin ve bir sınır Yer Kimliği ile birleştirin
İlk adım, görüntülemek istediğiniz verileri tanımlamak ve bu verilerin Google'ın sınırlarıyla eşleştirilebileceğinden emin olmaktır. Bu eşleştirmeyi istemci tarafını her bir postakodu için findPlaceFromQuery geri çağırma yöntemini çağırarak gerçekleştirebilirsiniz. ABD'deki posta kodlarının farklı adlarının olduğunu, ancak diğer idari düzeylerin farklı adlarının olduğunu unutmayın. Belirsiz sonuçlar olabileceği durumlarda, sorgunuz için doğru yer kimliğini seçtiğinizden emin olmak isteyebilirsiniz.
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, Coğrafi Kodlama API'sını bileşen filtrelemeyle birlikte kullanarak bu enlem/boylam değerlerini, stil özelliklerini ayarlamak istediğiniz özellik katmanının Yer Kimliği değerlerine çözümleyebilirsiniz. Bu örnekte, POSTAL_CODE özellik katmanının stilini belirleyeceksiniz.
2. Adım: Gerçek zamanlı verilere bağlanın
Veri kaynaklarına bağlanmanın çeşitli yolları vardır ve en iyi uygulama, özel ihtiyaçlarınıza ve teknik altyapınıza bağlı olacaktır. Bu durumda, verilerinizin "zip_code" ve "taxi_count" adlı iki sütunlu bir BigQuery tablosunda bulunduğunu ve 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'];
});
}
Bir sonraki adımda, verileri güncel tuttuğunuzdan emin olmalısınız. Bunu yapmanın bir yolu, yukarıdaki sorguyu bir web çalışanı kullanarak çağırmak ve setInterval işlevini kullanarak verilerinizi yenilemek için bir zamanlayıcı ayarlamaktır. Aralığı uygun bir değere ayarlayabilirsiniz (örneğin, haritayı 15 saniyede bir yenilemek). Zaman aralığı her geçtiğinde, web çalışanı posta kodu başına güncellenmiş takiCount değerleri ister.
Artık verileri sorgulayabileceğimize ve 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: Haritanızı veriye dayalı stil ile biçimlendirin
Artık Haritalar JavaScript örneğinizdeki posta kodu sınırlarına bir görsel stil oluşturup uygulamak için gereken dinamik veri değerlerine sahip olduğunuza göre, şimdi sıra boyuta renkli harita olarak biraz stil kazandırmaya geldi.
Bu örnekte, haritanın her posta kodundaki taksi sayısına göre stilini belirleyeceksiniz. Böylece, kullanıcılarınıza bölgelerindeki taksi yoğunluğu ve kullanılabilirlik durumu hakkında fikir vereceksiniz. Stil, taksi sayısı değerlerine bağlı olarak değişiklik gösterir. En az taksi bulunan alanlara mor stil uygulanır, renk gradyanı ise kırmızı, turuncu renkle ilerler ve en yüksek yoğunluklu bölgeler için New York taksisinin sarısında biter. Bu renk şeması için bu renk değerlerini fillColor ve printColor'a uygulayacaksınız. fillOpacity'nin 0,5 değerine ayarlanması kullanıcılarınızın alttaki haritayı görmesine olanak tanırken, çizgi Opaklığının 1,0 değerine ayarlanması kullanıcıların aynı renkli çokgenlerin sınırlarını ayırt etmelerine 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, sektör ve segmentlerdeki çeşitli uygulamalarda haritanızın stilini belirlemek üzere verilerinizi kullanma becerisini ortaya çıkarır. Gerçek zamanlı verilere bağlanmak ne, nerede ve gerçek zamanlı olarak iletişim kurmanızı sağlar. Bu özellik, gerçek zamanlı verilerinizin potansiyelini açığa çıkarma ve kullanıcılarınızın verileri gerçek zamanlı olarak gerçek dünyada daha iyi anlamasına yardımcı olma potansiyeline sahiptir.
Sonraki İşlemler
- Google harita sınırlarının stilini belirlemek için veriye dayalı stil nasıl kullanılır? web seminerini izleyin.
- Veriye dayalı stile yönelik tıklama etkinlikleri ile görselleştirmenizi bir adım ileriye taşıyın.
- Haritanıza Gelişmiş İşaretçiler ekleyebilirsiniz.
Katılımcılar
Asıl yazar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi