Browser: HTTP Error 502.5 - Process Failure

Just upgraded to Visual Studio 2017 from Visual Studio 2015. Everything went well until I deployed the application. I kept getting 502.5 from the server.

I turns out Visual Studio 2017 changed   from 1.1.0 to 1.1.1. I found it by opening the project.csproj file.Just right click on the project open the file and make sure 

Lägg till bildtext

the hosting environment has that version installed. In my case I just needed to change back to 1.1.0 and bang it started to work.

Here is where I got the hint what to search for.

Bing Maps and GeoBuf

Background

Geographic data can be large, or huge in size. Lots of application demands offline data or for scenarios where you have limited storage, like mobile devices. GeoJSON is the industry standard for communication from server to web client. It has many advantages, for example it is standardized and readable for humans. A disadvantage is that it can have loads of redundancy, for example it can share the same border which increases the data set. For that there is another format, TopoJSON which can save 80% or even more.

Both formats are text based and the commonality is JSON. When it comes to large datasets: if it is possible using TopoJSON is a good idea depending on how the data sets looks like. It is also possible to down size the data by cutting some decimals. But sometimes it is not enough. Sometimes we need something else. Something that makes a different. GeoBuf is such a format that is not so public known but the format is on uprising the last years.

GeoBuf

GeoBuf is an extension of Protocol Buffers. GeoBuf using GeoJSON when encoding the data. In the example provided it packed the data almost x 10. Since GeoBuf using GeoJSON it is straight forward to apply. I would be surprised if it doesn’t show up in spatial servers soon, there is an initiative for PostGIS. However, the product is from one vendor, not standardized so there is no guarantee that it will not be changed without notice or backword compability. Not likely though, but possible working with propriety formats. GeoBuf comes with ISC license. The downside of geobuf is it takes some time to first unpack the data and then parse the GeoJSON.

Example implementation

The example provided packs the countries in the world, a GeoJSON file with the size of 23.5 MB. The server logic, written in NodeJS, is super easy and straight forward.

var countries = fs.readFileSync("./public/countries.json")

var geoJson = JSON.parse(countries)

var content = geobuf.encode(geoJson, new pbf())

var buffer = Buffer.from(content)

return buffer

That’s it! We are done on the server. The example using Express for structure and routing in the application.

On the client. It is even easier with the GeoJSON module!

var geojson = geobuf.decode(new Pbf(geoBuffer));

var geoms = Microsoft.Maps.GeoJson.read(geojson);

client.map.entities.push(geoms);

So, with 7 lines of code GeoBuf helped downsize the data size with a factor of almost x10!

And network data.

Here is a live example.

And here is the code.

Happy buffering!

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.