Building a streamed Geofence with Bing Maps and XSockets.Geo

Preample

A questiontion that rises from time to time is real time application with Maps. In an earlier blog post I showed how to build a streamed layer. Products such as XSockets provides great communication and integration opportunities. To boost the product I have added a geo-functionality to XSockets.

In this application I have implemented a geofence example. The application works the following

1. The user define a fence by drawing
2. The user can test points if they are inside the fence or not
3. The map plots the point and coloring it depending on the point is inside or outside the fence. Red outside, green inside.

Back End

The back end based on XSockets and topped with NetTopolgy Suite (NTS). With NTS it is possible to perform advanced operations and analysis. This example using within operation on a geometry object. The backend recieves a stringified GeoJSON message from the server serialize it to a NTS geometry. The back end is just about 50 lines of code,  it also shows that state is a really awesome feature in XSockets!

Front End

The front end is based on Bing Maps v8 web control. This control is one of the most advanced on the market. By adding the module GeoJSON it is possible to communicate with the backend in a standard way and we talk the same language. So GeoJSON is in one way the glue between the client and the server.

Bing Maps Modules

Bing Maps has a module systems that enable functionality to be added to the control. In this demo application two modules where used.

• The GeoJSON module
• Drawing Tools module, I hope this module will be more customizeable in the future. I might have missed something... In this application hiding and showing tools is hack style.

Implementation

The client code is written i Typescript. Bing Maps provides Typescript defintions for their library. With those libraries (there are also libraries for the modules). TypeScript definitions doesn't have to be comprehensive. For XSockets I wrote 23 lines of code for the definitions I needed.

The sample application is deployed on Azure. The web as a web application and the server as a worker role.

To sum up, with those Component: Bing Maps, XSockets topped with NetTopology Suite provides a robust geofence example application.

The code is available on GitHub. The application lives here.