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.

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.

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.