widgets/mapview-demo.js

   1 ( function ( $, window ) {\r
   2 \r
   3         $( "#mapview-demo-page" ).bind( "pageshow", function ( e ) {\r
   4                 var mapView = $( "#sampleMap" ),\r
   5                         menuPopup = $( "#map_menu_popup" ),\r
   6                         routeFromButton = $( "#routeFrom" ),\r
   7                         routeToButton = $( "#routeTo" ),\r
   8                         getAddressButton = $( "#getAddress" ),\r
   9                         resultPopup = $( "#map_result_popup" ),\r
  10                         closeButton = $( "#map_close_btn" ),\r
  11                         targetPoint = null,\r
  12                         routePoints = {\r
  13                                 from : null,\r
  14                                 to : null\r
  15                         },\r
  16                         measureRoute = function () {\r
  17                                 var measureShape, length, displayLength;\r
  18 \r
  19                                 measureShape = {\r
  20                                         type : "LineString",\r
  21                                         coordinates : [ routePoints.from.geometry.coordinates,\r
  22                                                                         routePoints.to.geometry.coordinates ]\r
  23                                 };\r
  24 \r
  25                                 length =  $.geo.length( measureShape, true );\r
  26                                 if ( length > 1000 ) {\r
  27                                         displayLength = ( length / 1000 ).toFixed( 6 ) + " km";\r
  28                                 } else {\r
  29                                         displayLength = length.toFixed( 6 ) + " m";\r
  30                                 }\r
  31 \r
  32                                 mapView.mapview( "append", measureShape, length.toFixed( 2 ) + "m" );\r
  33                                 resultPopup.find( "p" ).text( "Route distance = " +  displayLength );\r
  34                                 resultPopup.popup( "open" );\r
  35                         },\r
  36                         checkRoute = function ( role ) {\r
  37                                 menuPopup.popupwindow( "close" );\r
  38 \r
  39                                 if ( routePoints[ role ] ) {\r
  40                                         mapView.mapview( "remove", routePoints[ role ] );\r
  41                                         routePoints[ role ] = null;\r
  42                                 }\r
  43 \r
  44                                 routePoints[ role ] = {\r
  45                                         type: "Feature",\r
  46                                         geometry: {\r
  47                                                 type: "Point",\r
  48                                                 coordinates: mapView.mapview( "toMap", targetPoint, false )\r
  49                                         }\r
  50                                 };\r
  51 \r
  52                                 if ( role === "from" ) {\r
  53                                         mapView.mapview( "append", routePoints[ role ], {\r
  54                                                 markerColor: "blue"\r
  55                                         });\r
  56                                 } else {\r
  57                                         mapView.mapview( "append", routePoints[ role ], {\r
  58                                                 markerColor: "red"\r
  59                                         });\r
  60                                 }\r
  61 \r
  62                                 if ( routePoints.from && routePoints.to ) {\r
  63                                         measureRoute();\r
  64                                 }\r
  65                         };\r
  66 \r
  67                 mapView.bind( "mapviewtaphold", function ( e, position ) {\r
  68                         var offset = mapView.offset(),\r
  69                                 pageX = position.x,\r
  70                                 pageY = position.y;\r
  71 \r
  72                         targetPoint = [ pageX - offset.left, pageY - offset.top ];\r
  73                         menuPopup.popupwindow( "open", pageX, pageY );\r
  74                 });\r
  75 \r
  76                 routeFromButton.bind( "vclick", function ( e ) {\r
  77                         checkRoute( "from" );\r
  78                 });\r
  79 \r
  80                 routeToButton.bind( "vclick", function ( e ) {\r
  81                         checkRoute( "to" );\r
  82                 });\r
  83 \r
  84                 getAddressButton.bind( "vclick", function ( e ) {\r
  85                         var targetCoordinate = mapView.mapview( "toMap", targetPoint );\r
  86 \r
  87                         menuPopup.popupwindow( "close" );\r
  88 \r
  89                         $.ajax({\r
  90                                 url : "http://nominatim.openstreetmap.org/reverse",\r
  91                                 data : {\r
  92                                         format : "json",\r
  93                                         lat : String( targetCoordinate[1] ),\r
  94                                         lon : String( targetCoordinate[0] ),\r
  95                                         addressdetails : String( 1 )\r
  96                                 },\r
  97                                 dataType : "jsonp",\r
  98                                 jsonp : "json_callback",\r
  99                                 success : function ( results ) {\r
 100                                         mapView.mapview( "option", {\r
 101                                                 center : targetCoordinate,\r
 102                                                 zoom : 15\r
 103                                         });\r
 104                                         resultPopup.find( "p" ).text( results.display_name );\r
 105                                         resultPopup.popup( "open" );\r
 106                                 }\r
 107                         });\r
 108                 });\r
 109 \r
 110                 closeButton.bind( "vclick", function ( e ) {\r
 111                         resultPopup.popup( "close" );\r
 112                 });\r
 113 \r
 114                 resultPopup.bind( "popupafterclose", function ( e ) {\r
 115                         resultPopup.find( "p" ).text( "" );\r
 116                         mapView.mapview( "empty" );\r
 117                         routePoints.from = routePoints.to = null;\r
 118                 });\r
 119         });\r
 120 \r
 121 } ( jQuery, window ) );\r