_paws map.cshtml

map.cshtml

<style type="text/css">
    #legend {
        background-color: #3C5A76;
        border: 2px solid #cccc;
        color: #EEEEEE;
        font-weight: bold;
        position: absolute;
        right: 50px;
        top: 50px;
        padding: 15px;
    }
</style>

<div id="mapDiv"></div>

<div id="legend">
    <label for="userCount">users: </label>
    <span id="userCount">0</span>
</div>

@section Scripts{

<script charset="utf-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">

    var map = null;

    $(function () {
        // create the connection to out hub.
        var x = 0;


        var mapHub = $.connection.mapHub;

        String.prototype.startsWith = function (str)
        { return (this.match("^" + str) == str) }

        //add new client to the map
        // method invoked from server.

        mapHub.client.addMapClient = function (client) {
            // mark pushpins as W for web and P for phone
            if (client.ClientId != 'W') {
                if (client.ClientId.startsWith('1'))
                    client.ClientId = 'P';
                else
                    client.ClientId = 'T'

            }

            var pins = getPushPins();
            addClient(clinet);
            centerMap();
            $("#userCount").html(pins.length + 1)
        };


        //remove a client from the map.
        //method invoked from server
        mapHub.client.removeMapClient = function (client) {
            for (var i = map.entities.getLength() - 1; i >= 0; i--) {
                var pushpins = map.entities.get(i);
                if (pushpins instanceof Microsoft.Maps.Pushpin) {
                    if (pushpins.getLocation().latitude == client.ClientLocation.latitude && pushpins.getLocation().longitude) {
                        map.entities.removeAt(i);
                        var pins = getPushPins();
                        $("#userCount").html(pins.length)
                    }
                }
            }
        }

        // start the hub
        $.connection.hub.start(function () {
            //get the current location from the browser
            navigator.geolocation.getCurrentPosition(function (position) {
                //create the map element on the page.
                mappit(position);

                // notify the server a new user has joined the party.
                var coords = position.coords;
                var message = { 'ClientID': 'W', 'ClientLocation': { latitude: coords.latitude, longitude: coords.longitude } }
                mapHub.server.showClientOnMap(message);
            });
        });



    });


    function addClient(client) {
        var location = new Microsoft.Maps.Location(client.ClientLocation.latitude, Client.ClientLocation.longitude);
        var pushpin = new Microsoft.Maps.Pushpin(location, { text: client.ClientId });
        map.entities.push(pushpin);

        map.setView({
            center: new Microsoft.Maps.Location(client.ClientLocation.Latitude, client.ClientLocation.Longitude),
            zoom: 1

        });
    }

    function mappit(position) {
        var mapOptions =
            {
                credentials: '{to be provided}',
                center: new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude)
            }
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);

    }

    function centerMap() {

    }

    function getPushPins() {
        var pins = [];
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin) {
                pins.push(pushpin);
            }
        }
        return pins;
    }

</script>
}