Cosmos DB World Blazor Application with DevExpress UI Components and Bing Maps

I’ve recently been working on a Blazor server side application, to integrate with Cosmos DB. The Cosmos DB holds a single collection with a list of countries and cities with coordinates for each city. I’ve had the small dataset for a while now, most of the free sources of data can be downloaded from this location: http://www.geonames.org/.

Initially the data was in .CSV format and I initially imported the dataset into an Azure SQL database. I later decided to copy the dataset into Cosmos DB and utilise the SDK within a Blazor application, added my Blazor DevExpress nuget package, for the drop down controls, then integrated a Bing Maps application with the Bing Maps SDK. Transferring the data from Azure SQL to a Cosmos DB collection was straight forward using Azure Data Factory.

I have published the basic version of the Blazor application to https://cosmosdbworld.azurewebsites.net, where you can select a country and then a city, using the DevExpress drop down controls, then the map is updated dynamically as the IJSRuntime interface is dependency injected into a Bing Maps UI component. Overall, the Bing map renders extremely quickly, as the longitude and latitude is bound to the parameters of the Bing maps component from the parent country and city drop down component. The longitude and latitude coordinates are also fetched from the CosmosDB collection, everytime a city is selected, which refreshes the map automatically. The simple javascript functions update the <div> in the UI component, with the coordinates each time the city is changed.

I’ll update this post in the future, when I release the source code. The ability to integrate the Bing Map into a Blazor application is extremely easy, especially with the ease of using the Bing Maps SDK.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: