js/moute.js

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 stateEnum =  {
  11     NOT_NAVIGATING : 0,
  12     NAVIGATING : 1,
  13     ARRIVED: 2
  14 };
  15
  16 state = stateEnum.NOT_NAVIGATING;
  17
  18
  19 function Searcher()
  20 {
  21     this.extents_to_viewbox = function() {
  22         var extents = map.extent();
  23         return extents[0].lon           //left
  24                 + "," + extents[1].lat  //top
  25                 + "," + extents[1].lon  //right
  26                 + "," + extents[0].lat  //bottom
  27         ;
  28     };
  29
  30     this.search = function(searchphrase) {
  31         $.ajax({
  32             url: 'http://nominatim.openstreetmap.org/search',
  33             type: 'GET',
  34             dataType: 'jsonp',
  35             jsonp: false,
  36             jsonpCallback: 'json_callback' + escape(searchphrase),
  37             data: {
  38                 format: 'json',
  39                 bounded: 1,
  40                 viewbox: this.extents_to_viewbox(),
  41                 json_callback: 'json_callback' + searchphrase,
  42                 q: searchphrase
  43             },
  44             success: function(data, textStatus, xhr) {
  45                 geojson = data.map(function(o) {
  46                     return {
  47                         type : "Feature",
  48                         geometry: {
  49                             type : "Point",
  50                             coordinates : [
  51                                 Number(o.lon),
  52                                 Number(o.lat)
  53                             ]},
  54                         properties: {
  55                             icon : o.icon
  56                         }
  57                     };
  58                 });
  59                 geojson_layer.features(geojson);
  60             }
  61         });
  62     };
  63 }
  64
  65 jQuery(document).ready(function() {
  66     //set up the footer
  67     //FIXME: do this on resize and do something smarter
  68     var height = $("body").height();
  69     var width = $("body").width();
  70
  71     console.log("display ratio: " + width / height);
  72
  73     var footer_height = height * 0.10;
  74     // $("footer").height(footer_height);
  75     // $("#map").height(height - footer_height);
  76
  77     console.log("screen height: " + height);
  78     console.log("footer height: " + footer_height);
  79
  80     // set up the map
  81     var po = org.polymaps;
  82     geojson = [];
  83     map = po.map()
  84         .container(document.getElementById("map").appendChild(po.svg("svg")))
  85         .add(po.interact());
  86
  87     map.add(po.image()
  88             .url(po.url("http://{S}tile.openstreetmap.org/{Z}/{X}/{Y}.png")
  89                  .hosts(["a.", "b.", "c.", ""])));
  90     map.add(po.compass()
  91             .pan("none"));
  92     geojson_layer = po.geoJson();
  93     geojson_layer.features(geojson);
  94     geojson_layer.on("show", po.stylist());
  95     map.add(geojson_layer);
  96
  97     // set up the labels
  98     $("#state_lable").hide();
  99     time = $("#time").hide().detach();
 100     arrival_time = $("#arrival_time").hide().detach();
 101
 102     s = new Searcher();
 103     $(":button").on("click", function(e) {
 104         var searchtext = $("input[type='text']").val();
 105         if (searchtext) {
 106             s.search(searchtext);
 107         }
 108     } );
 109
 110 });