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.

Making a streamed layer in Bing Maps and XSockets

In many cases we want information in real time specially in these IoT days. Socket solutions are not just for real time. It is also a question about scaling. Instead of the clients asking the server for information on interval, the server pushes information to the clients that are interested. So we need a server that can decide who should have the information when something changed.

XSockets is such a product. In this post I have build two map clients, one in web and one on WPF. Both map clients are built on top of Bing Maps. The scenario is we have a fleet with n number of vehicles that should be able to see each other in real time.

1. To do that I emulate the vehicles and its positions in route files. 
2. The server reads the route files and send each vehicles location to the subscribers
3. The client gets the position and updates the location of the map

My friend Uffe Björklund help me with the server side. It basically consist of three entities. One class that is responsible to spin up threads for each route. One class that defines the route and one struct that holds the message. 

I am surprised of how easy it was to wire up the client side. With just three lines of code, we are good to go, with a subject subscription! The map client to handle the actual real time, with plotting, create new, update is just around 40 lines of code!

A screen shot from the web client.

A screen shot from the web client.

Why XSockets

The choice of XSockets is this demo was not only becasue it was easy to implement. It is also a choice for the future when the samples for realtime GIS will be more advanced. 

That's when XSockets will shine with the abilities missing in other frameworks:

• Targeting clients based on state with lambda expressions
• Quality Of Service
• Retained messages
• Auto-reconnect in combination with QoS and Retained messages (important for mobile clients)

Code

You can get the code from GitHub.

Bing Maps Configuration Module

In many real world projects one challenge is to have a generic map. In order to accomplish that I often used a configuration file to configure the map with start parameters. One example of this is Geo365, where each SharePoint site should be able to have their own map.

In an organization, for example one project might be on a completely different place than another project. So we need to be able to configure that in some way. So lets introduce a small, simple but useful module for Bing Maps. The Configuration Module.

So far you can specify the ViewOptions parameters in the configuration file.

The configuration file is a JSON file and pretty straight forward. For example:

{

  "bounds": {
    "center": {
      "latitude": 62.5,
      "longitude": 17.2
    },
    "width": 1,
    "height": 1
  },

  "center": {
    "latitude": 62.5,
    "longitude": 17.2
  },

  "centerOffset": {
    "point": {
      "x": 1000,
      "y": 1000
    }
  },

  "credentials": "{YOUR BING MAPS KEY HERE}",

  "heading": 45,

  "labelOverlay": "hidden",

  "mapTypeId": "aerial",

  "padding": 100,

  "zoom": 2
}

When the configuration file is in place you simple load the configuration and supply it as a parameter to the Bing Maps Map class such as:

function loadMap() {
            var elem = document.querySelector("#map");
            Microsoft.Maps.registerModule("ConfigurationModule", "scripts/ConfigurationModule.js");
            Microsoft.Maps.loadModule("ConfigurationModule", {
                callback: function () {
                    getConfig(function (jsonConfig) {
                        var config = ConfigurationModule.getConfig(jsonConfig);
                        new Microsoft.Maps.Map(elem, config);
                    })
                }
            });
        }

        var getConfig = function (callback) {
            var request = new XMLHttpRequest();
            request.addEventListener("load", function () {
                var config = JSON.parse(this.responseText);
                callback(config);
            });
            request.open("GET", "configuration.json");
            request.send();
        };

You will find the module among the other Bing Maps Modules on Codeplex.

Open SMIL

Open SMIL is an effort of combining GIS and SharePoint. I build SMIL over 5 years ago. The company I working for using SMIL in various projects and industries. That implies the platform is flexible and customisable. And maybe the most important thing, it addresses change. The users always want another button, more information, authorisation (in my experience rarely used but often asked for of some reason, maybe it is a culture thing?)

However, GIS has a reputation being expensive and complicated. SharePoint provides a highly customisable platform and Bing Maps is a platform with great features covering world wide data. Combining these platforms platform providing a light GIS have been the target of the OpenSMIL project.

OpenSMIL has i mobile map client connected to a SharePoint site, with geo enabled SharePoint lists represented as GIS layers. The mobile client runs in a browser in a SharePoint context. With this tool the user can collect data. The data is stored into a SharePoint list so it is available immediately in SharePoint.

Inside SharePoint there is a WebPart showing the layers (SharePoint lists with geographical information). SharePoint list items are plotted on the map and are clickable.
   

SharePoint lists have two maps, one preview that shows on mouseover an icon in the list.And another showing the item. The user can create new or change geometry. For example draw a polygon that might represent the area for a document.
   

In order to share geographical data with others you can invite them use your SharePoint site or export a list as a KML file. KML is standard See OGC.

But how to enable i list or document library to store geographical information? Easy, just add a column, give it a name and add a new field to the list.

For project place visit, project site. Or jump right into the code.

Extending Bing Maps Pushpin with Attributes

Recently I needed to store attributes with Pushpins in Bing Maps. Either I'm blind or it is just not there. Bing Maps is offering the following properties with the Pushpin object:

If I just try to add a property when initializing the Pushpin, Bing Maps will not take notice of that property due to the setOptions function on the Pushpin object. I don't really want to override the setOptions function - since I don't know the domino effect. So there are still two ways to solve the problem.

1. Add a property on the Pushpin object - it is Javascript. Such as.
   var pin = new Microsoft.Maps.Pushpin(OpenSMILWebPart.map.getCenter(), { height: 50, width: 50 });
   and just add a property:
   pin.customfield = 'customData';

2. Add get and set method on the Pushpin object such as:
   Microsoft.Maps.Pushpin.prototype.setAttributes = function () { this._attributes = arguments[0] }; Microsoft.Maps.Pushpin.prototype.getAttributes = function () { return this._attributes; };
   and set properties such as:
   pin.setAttributes({ customObject: 'some data' });
   use get method to receive data:
   pin.getAttributes();
   

Alternative two is more complex, but more useful if we need to control the data.

Microsoft - feel free to add a Tag property to each geometry type giving the opportunity storing values in.

Using Bing services to validate addresses

Bing Maps services provides a feature for geocoding. A way to increase user input address quality, for example in SharePoint, is to present address quality feedback for the user. I've done that with a custom field.

This is the feedback I want to give to the user. I start to structure the application such as:

Why do I use HTTP handlers in SharePoint? In my opiniun they are easier to install than WCF services in SharePoint. But they are low level services. In order to get them to work I have to point out the assembly and the webhandler such as:
<%@ Assembly Name="OpenSMIL.Server, Version=1.0.0.0, Culture=Neutral, PublicKeyToken=deb5cb40dd7862f6" %>
<%@ WebHandler Language="C#" CodeBehind="ValidateAddress.ashx.cs" Class="OpenSMIL.Server.ValidateAddress" %>
After that the server side development is pretty straight forward. As you can see in the image to the left the server code is divided into two seperate parts. The HTTP-handler, wich just needs some codebehind and let the other code worry about the Bing geocoding logic. And that is just a few lines of code.

And the code to ask Bing..

That's all for the services. In order to build a custom field here is a tutorial . And this article can come handy.

I'm almost done, all that is left is a XML-file describing for SharePoint about this field.

What is left now is just some JavaScript for rendering and communicating with the server. I have intentially left out jQuery and other JS libraries since it is basically just an Ajax requests.

That is it. All code is available here.

osx eclipse "there are no resources that can be added or removed from the server"

Been struggling with eclipse telling me "there are no resources that can be added or removed from the server". I installed Eclipse Java EE Developer Tools and that got rid of that problem.