Page Comparison

...

The CityMap source procedure will load a bit of HTML from disk that contains the map image, a canvas which is rendered on top of the map and a draggable image of a taxi. This procedure also contains a bit of Javascript that will initialize the Javascript class that will handle the websocket.

The HTML: 

...

 <div class="map" id="map">

 <img src="images/amsterdam.png" class="mapimage" id="mapimg" />
 <canvas id="others" class="mapimage overlay others"></canvas>
 <img id="me" class="taxi hide" src="images/taxifree.png" draggable="true"/>
</div>
<img src="/images/othertaxi.png" class="hide" id="otherImg">

CSS is used to position the canvas and the taxi image on top of the image with the map of Amsterdam. In cases like this where positioning the elements is critical, I find it easier to write the HTML in an editor and include the contents in Nettalks response by using the LoadFile method of the packet class:

Mind the line that builds the Url for the websocket initialize request. It is a url that starts with ws:// and then just the regular url of this particular page. 

...

$(document).bind('NewRide', function () {
 self.$newRideContainer.removeClass("hide");
 });

...

 self.$newRideContainer.removeClass("hide");
 });

This tiny bit of Javascript will remove the CSS class 'hide' from the newRideContainer element whenever the 'NewRide' event is fired. Removing the 'hide' class displays the element. That element is - in this case - the little icon that appears below the newride form. This icon is draggable and allows the user to create a ride by dragging the icon onto the map. 

Custom events can be triggered on any Dom element, not just on the document as I'm doing here. It's also possible to include parameters when triggering an event. 

...

DDTaxiApp.js contains the code for this application. It contains a class called VM which is instantiated in the snippet of Javascript code inside the IndexPage. Immediately after the instantiation. VM stands for "ViewModel" as used in the MVVM (Model-View-ViewModel) pattern. This pattern is widely used and will improve the maintainability of your code. Immediately after instantiation of the viewmodel, the init method of the VM class is called.

self.init = function (url, mapid) {
  if(!self.inited)
  {
    self.inited = true;
    self.ws = new DDSocketApp.SocketBase(url, self.handleCallback);
    if (!self.ws.supported())
      alert('Websockets are not supported!');
    else
      self.ws.connect();

...