Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version
Go to top

Streaming live results to a web site using MSMQ/Duplex WCF/SignalR/jQuery

, , 7 Feb 2012
Streaming live results to a web site using MSMQ/Duplex WCF/SignalR/jQuery
Codeproject.EventBroker.zip
Codeproject.EventBroker
Codeproject.EventBroker.Common
Properties
Codeproject.EventBroker.Contracts
Codeproject.Omni.EventBroker.Contracts.csproj.vspscc
Data
Faults
Properties
Service
Codeproject.EventBroker.Host
Codeproject.EventBroker.Host.csproj.user
Codeproject.Omni.EventBroker.Host.csproj.vspscc
Properties
Codeproject.EventBroker.Service
Codeproject.Omni.EventBroker.Service.csproj.vspscc
Data
Extensions
IOC
Properties
Services
Contracts
Implementation
Codeproject.EventBroker.suo
Codeproject.EventBroker.TestMessagePublisher
Codeproject.EventBroker.TestMessagePublisher.csproj.user
Codeproject.EventBroker.TestMessagePublisher.csproj.vspscc
Properties
queue.png
Codeproject.EventBroker.WebUI
App_Data
Codeproject.EventBroker.WebUI.csproj.user
Codeproject.EventBroker.WebUI.csproj.vspscc
Content
Images
person.png
GeoLocation
Global.asax
Properties
Scripts
Styles
Wcf
Lib
Apache
log4net
1.2.10.0
log4net.dll
Castle
1.2.0.6623
Castle.Components.Binder.dll
Castle.Components.Validator.dll
Castle.Core.dll
Castle.DynamicProxy2.dll
Castle.MicroKernel.dll
Castle.Windsor.dll
Microsoft
SignalR
SignalR.dll

//************************************************
// Global Vars
//************************************************


google.load('earth', '1');
var ge = null;
// SignalR Proxy created on the fly
var eventHub = $.connection.eventTicker;
var placemark;



//************************************************
// Document Ready
//************************************************
$(function () {
    GlobalInit();
});



//*************************************************
// Global initialisation, hooks up Google Earth
// callback
//*************************************************
function GlobalInit() {
    google.setOnLoadCallback(EarthInit);
}



//*************************************************
// Initialise Googe Earth
//*************************************************
function EarthInit() {

    google.earth.createInstance(
        'map3d',
        function InitialisationPassed(instance) {
            ge = instance;
            console.log("InitialisationPassed " + ge);

            InitialiseSignalRHub();

            ge.getWindow().setVisibility(true);
            CreateNavigationControl();
        },
        function InitialisationFailed(errorCode) {
            console.log("InitialisationFailed " + errorCode);
            alert("there was an error initialising Google Earth\r\n" + errorCode);
        });
}


//*************************************************
// Initialise SignalR Hub
//*************************************************
function InitialiseSignalRHub() {

    eventHub = $.connection.eventTicker;

    // Declare a function on the eventHub so the server can invoke it
    eventHub.addMessage = function (message) {
        ProcessGeoLocationCallbackMessage(message);
    }

    //callback that does nothing, simply here to establish link to Hub
    eventHub.registerCallback = function () {
    };

    // Start the connection
    $.connection.hub.start();

    //wait for 3s before we register with Hub 
    window.setTimeout(function () {
        eventHub.register();
    }, 3000)
}


//*************************************************
// Process SignalR Hub callback
//*************************************************
function ProcessGeoLocationCallbackMessage(message) {

        //now add the items to the earth
        ShowPosition(message.Location.Latitude, message.Location.Longitude);
        CreateMarker(message.Location.Latitude, message.Location.Longitude, message.Description);
}


//*************************************************
// Creates Google Earth Navigation Control
//*************************************************
function CreateNavigationControl() {

    console.log("CreateNavigationControl " + ge);

    var geNavigationControl = ge.getNavigationControl();
    geNavigationControl.setVisibility(true);
    geNavigationControl.setStreetViewEnabled(true);
}




//*************************************************
// Navigates Google Earth To Particular Lat/Long
//*************************************************
function ShowPosition(lat, long) {

    // Get the current view
    var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

    lookAt.setRange(lookAt.getRange() * 0.25);

    // Set new latitude and longitude values
    lookAt.setLatitude(lat);
    lookAt.setLongitude(long);

    // Update the view in Google Earth
    ge.getView().setAbstractView(lookAt);

    // Get the current view
    var camera = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND);

    // Zoom out to twice the current distance
    camera.setAltitude(5000000);
    camera.setLatitude(lat);
    camera.setLongitude(long);

    // Update the view in Google Earth
    ge.getView().setAbstractView(camera);
}



//*************************************************
// Creates Google Earth Marker for Lat/Long 
// with description
//*************************************************
function CreateMarker(lat, long, desc) {

    //remove last placemark, only want to show 1 at a time
    if (placemark != undefined) {
        //http://code.google.com/apis/earth/documentation/reference/interface_g_e_feature_container-members.html
        ge.getFeatures().removeChild(placemark);
    }

    placemark = ge.createPlacemark('');
    placemark.setName(desc);
    placemark.setDescription("Some cool stuff right here");

    // Define a custom icon.
    var icon = ge.createIcon('');

    var imageUrl = window.location.protocol + "//" + window.location.host + "/content/Images/person.png";
    console.log(imageUrl);

    icon.setHref(imageUrl);
    var style = ge.createStyle(''); //create a new style
    style.getIconStyle().setIcon(icon); //apply the icon to the style
    style.getIconStyle().setScale(1.5);
    style.getLabelStyle().setScale(2.0);	
    placemark.setStyleSelector(style); //apply the style to the placemark

    // Set the placemark's location.  
    var point = ge.createPoint('');
    point.setLatitude(lat);
    point.setLongitude(long);
    placemark.setGeometry(point);

    // Add the placemark to Earth.
    ge.getFeatures().appendChild(placemark);
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Authors

Sacha Barber
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)
 
- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence
 
Both of these at Sussex University UK.
 
Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Richard E King
Software Developer (Senior)
United Kingdom United Kingdom
No Biography provided

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 8 Feb 2012
Article Copyright 2012 by Sacha Barber, Richard E King
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid