onsdag 21 juni 2017

Pogo Rent 3000


The aim of the article is to give and idea how to build robust GIS applications build on .Net and Bing Maps.
Pogo Rent 3000 is a fictional company that hires pogo sticks round the world. As a consultant, I am asked to help implement GIS functionality to their web site and to where ever it gives value. Through a couple of posts I will show how to address this in a pragmatic way. For start the company wants to show a basic map with great Pogo parks in northern Sweden.
The aim of this article is to describe the implementation of Pogo Rent 3000. The idea of this project is to provide a solid implementation of a GIS project based on Bing Maps. The techniques and framework used are well known and provide a robust foundation for GIS applications.
I strongly recommend using standard formats for communication with GIS backend is really importance and cannot be stated enough. The application also showing an example of an endpoint that simulates a Web Feature Service (WFS from OGC, see http://www.opengeospatial.org/standards/wfs) or included in the code as a GeoServiceController. OGC formats and protocol gives flexibility and maintainability.

Application structure

The application is structured the simplest way possible and providing a robust platform to extend the system later on. I build a classic 3-tier application.

UI Tier

On top there is Bing Maps V8, it is one of the best map client out there as today. It provides a straight forward, documented API. More over a set of spatial function like measuring and a set of modules. A module is functionality you can extend the web client with. For example, with GeoJSON, (http://geojson.org) support. The small script that is needed is, for convenience, written in TypeScript. GeoJSON is an OGC standard since 2016. This means we can add in other datasets from other sources without worrying about the format as long as it is GeoJSON.
With the GeoJSON module it is super easy to parse the JSON from the server.
let primitives = Microsoft.Maps.GeoJson.read(geoJSONtext) as Array;

Service Tier

As service tier I have a Asp.NET Web API. This tier is boosted with Net Topology Suit (NTS, https://github.com/NetTopologySuite/NetTopologySuite) which provide a rich set of GIS operations. NTS is great for adding spatial functions to the application. It also provides GeoJSON support. With this in place we have the possibility to serve OGC formats.

Data Tier

In this example we use a single text file as data source. The source is a GeoJSON file. I could of course easily just accessed GeoJSON file directly through a GET request from the client but for demo purpose I actually read and parse the file with NTS. The data tier also have an interface. The idea with the interface is that it should be easy to add other data sources, for example SQL Server.
Reading GeoJSON with NTS is really simple, here is a snippet from the application:
var reader = new NetTopologySuite.IO.GeoJsonReader();
var features = reader.Read<FeatureCollection>(data);
Data is the GeoJSON. It will parse the json into an object which we can spatial filter, manipulate compare or do other operations.

Wrap up

With the techniques and framework in place, it is pretty straight forward to implement. The implementation is as simple as possible and it provides possibility to extend the PogoRent3000 system. To summarize, building a GIS application is not different than building any 3-tier application.

A demo application is online here.

And the code is here 

A special thanks to SoulSolutions.

onsdag 7 juni 2017

Maps for blinds - with Bing Maps

In the late 90's I worked with Swedish Institute for Disability, we were doing R&D about Maps for people who are either blind or a big disability seeing. Last week at an event the last session was about how IT made life more accessible for people who are blind. I was not surprised I met a blind programmer. Back in the 90's we were doing C++, nowadays it is C#. 

After that session I started to think that maybe many of our challenges at that time would be more easy to overcome now or even not a problem. A major challenge at that time was just access to GIS data. Today it is not a problem. At that time text to speech was also a problem and really a new thing, at least on the consumer market. Today, there are several on Windows Store for free.

I have made some Googling, and Binging and I found some ambitious initiatives regarding the subject. But some were even not working and were build on outdated libraries. So I decided to do something by combining the thoughts we had from that late 90's and common widespread technology. And guess what. Things that took weeks or months took me just a couple of hours. Most of the time thinking, maybe this is not relevant. But I decided to publish this anyway.

describing the application
Every person has a mental map we use to navigate. We know, or at least have an idea how locations are related. One idea about the application is to help the user to build up an mental map about how things are related. That is one reason the application is really simple and narrowed down. It consists of three text fields:

1. Bing maps key field
2. Search field 
3. Result field. 

The search field as made for searching. The result field is made for display search result WHEN the user clicked on the map. When the user clicks on the map there is a reverse geo-coding made in the background. The result is displayed in the text field so it should be possible to use the speech to text.

When the user moves the mouse it will give a sound signaling the user how close to center of the map she is. The brighter sound the closer to the center. Combing sound, reverse geo-coding and searching I hope this might useful.

I also started to think that vendors should also provide semantic about the imaginary the deliver. It would be interesting to request metadata over a view as when requesting itinerary. 

Here is the code. You need to provide your own Bing Maps key. You can get one from the portal.

tisdag 21 mars 2017

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.

måndag 20 mars 2017

Bing Maps and GeoBuf

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 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(geoJsonnew 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);

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

And network data.

Happy buffering!

onsdag 21 december 2016

Building a streamed Geofence with Bing Maps and XSockets.Geo


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.


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.

fredag 5 februari 2016

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)


You can get the code from GitHub.

torsdag 28 januari 2016

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);
            request.open("GET", "configuration.json");

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