{"id":1090,"date":"2011-11-14T11:16:32","date_gmt":"2011-11-14T14:16:32","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=1090"},"modified":"2012-01-17T19:40:02","modified_gmt":"2012-01-17T22:40:02","slug":"maps-qml","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/maps-qml\/","title":{"rendered":"[Actualizado] Integrando Mapas con QML"},"content":{"rendered":"

El objetivo de este post es mostrarles de forma practica, un par de opciones para que puedan integrar mapas en sus aplicaciones Qt, tanto en Symbian como en MeeGo, la primera opci\u00f3n hace uso de la Location API<\/a> incluida en QtMobility<\/a>, la segunda opci\u00f3n permite integrar servicios como Google Maps, Bing Map o Nokia Maps (ex Ovi Maps) haciendo uso de QtWebKit<\/a>.<\/p>\n

Usted esta aqu\u00ed<\/h3>\n

Las opciones que describo en este post permiten ubicar en el mapa un punto especifico, este punto lo podemos obtener de diversas maneras, desde una DB, ingresando los datos manualmente u obteniendo las coordenadas desde el GPS del dispositivo, para hacer esto ultimo solo debemos primero, agregar a nuestro proyecto la dependencia a la Location API<\/a> de QtMobility<\/a><\/p>\n

\r\nimport QtMobility.location 1.2\r\n<\/pre>\n
Luego vamos a declarar unas propiedades en las cuales almacenaremos la longitud y la latitud que obtendremos usando el elemento PositionSource<\/a>, para luego mostrarlos usando un elemento Text.<\/p>\n
\r\nproperty double mapLat\r\nproperty double mapLong\r\nmapLat: positionSource.position.coordinate.latitude\r\nmapLong: positionSource.position.coordinate.longitude\r\n\r\nPositionSource {\r\n    id: positionSource\r\n    active: true\r\n    updateInterval: 1000\r\n}\r\n\r\nText {\r\n    color:\"#fff\"\r\n    text: \"Latitud: \" + mapLat + \"<br/>\" + \"Longitud: \" + mapLong\r\n    anchors.horizontalCenter: parent.horizontalCenter\r\n    anchors.verticalCenter: parent.verticalCenter\r\n}\r\n<\/pre>\n
\"QML<\/p>\n
Simulando el GPS<\/h4>\n
Si no cuentan con un dispositivo para probar, pueden simular el uso del GPS usando la opciones de Location que vienen incluidas en Qt Simulator.<\/p>\n
\"QML<\/p>\n
QtMobility Location API<\/h3>\n
Esta opci\u00f3n hace uso de algunos de los elementos QML<\/a> que nos provee la Location API<\/a>, en este ejemplo usaremos un elemento Coordinate<\/a>, para almacenar la latitud y la longitud que obtenemos del PositionSource<\/a>, luego crearemos un elemento Map<\/a>, el cual a su vez contiene una MapImage<\/a>, tanto la propiedad center<\/em> del Map, como la propiedad coordinate<\/em> del MapImage<\/a> van a usar los datos de la Coordinate<\/a> previamente declarada.<\/p>\n
\r\nproperty double mapLat\r\nproperty double mapLong\r\nmapLat: positionSource.position.coordinate.latitude\r\nmapLong: positionSource.position.coordinate.longitude\r\n\r\nPositionSource {\r\n    id: positionSource\r\n    active: true\r\n    updateInterval: 1000\r\n}\r\n\r\nCoordinate { \r\n    id: defaultMapCenter\r\n    latitude: mapLat\r\n    longitude: mapLong\r\n}\r\n\r\nMap {\r\n    id: map\r\n    anchors.fill: parent\r\n    plugin : Plugin {name : \"nokia\"}\r\n    size.width: parent.width\r\n    size.height: parent.height\r\n    zoomLevel: 16\r\n    center: defaultMapCenter\r\n\r\n    MapImage {\r\n        id : pin\r\n        coordinate: defaultMapCenter\r\n        source:\"images\/pin.png\"\r\n    }\r\n}\r\n<\/pre>\n
\"QML<\/p>\n
QtWebKit y Nokia Maps<\/h3>\n
Esta opci\u00f3n quiz\u00e1s no se integra de forma 100% nativa de la misma manera que podemos hacer usando la Location API<\/a>, pero tiene la ventaja de que podemos usar a nuestro proveedor preferido y ademas nos permite reutilizar c\u00f3digo que hayamos creado con anterioridad, este ejemplo hace uso de la API<\/a> de Nokia Maps y para comenzar crearemos una pagina web con el siguiente c\u00f3digo (ver abajo) y la incluiremos en nuestro proyecto, el c\u00f3digo en si no tiene mucha magia, al principio hay una referencia a la librer\u00eda de Nokia Maps, luego inicializamos el mapa, configuramos los elementos que vamos a utilizar en el, el nivel de zoom, una posici\u00f3n por default y finalmente crearemos la funci\u00f3n setLocation<\/em> que sera la encargada de ubicar el pin y centrar el mapa usando las coordenadas obtenidas por el PositionSource<\/a><\/p>\n
\r\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\r\n<title>Ovi Maps</title>\r\n<script src=\"http://api.maps.ovi.com/jsl.js\" type=\"text/javascript\" charset=\"utf-8\"></script>\r\n<script type=\"text/javascript\">\r\n    var map;\r\n    function initialize() {\r\n        map = new ovi.mapsapi.map.Display(document.getElementById(\"map\"), {\r\n        components: [\r\n            new ovi.mapsapi.map.component.ZoomBar(),\r\n            new ovi.mapsapi.map.component.Overview(),\r\n            new ovi.mapsapi.map.component.TypeSelector()],\r\n            'zoomLevel':16,\r\n            'center':[-34.603000, -58.380000]\r\n        });\r\n        \r\n        ovi.mapsapi.util.ApplicationContext.set(\"defaultLanguage\", \"es-ES\")\r\n        map.addComponent(new ovi.mapsapi.map.component.panning.Drag());\r\n        map.addComponent(new ovi.mapsapi.map.component.panning.Kinetic());\r\n    }\r\n\r\n    function setLocation(lat, lon) {\r\n        pin = new ovi.mapsapi.map.Marker([lat, lon], { icon: \"images/pin.png\" }),\r\n        map.objects.add(pin);\r\n        map.setCenter(new ovi.mapsapi.geo.Coordinate(lat,lon));\r\n    }\r\n</script>\r\n</head>\r\n<body onload=\"initialize()\">\r\n    <div id=\"map\"></div>\r\n</body>\r\n</html>\r\n<\/pre>\n
Del lado del QML, lo primero que haremos sera importar a QtWebKit<\/a> como dependencia.<\/p>\n
\r\nimport QtWebKit 1.0\r\n<\/pre>\n
Luego crearemos una WebView<\/a> que va a cargar la pagina web anteriormente creada.<\/p>\n
Solo resta esperar que se dispare el evento onLoadFinished<\/em> que ejecutara la funci\u00f3n updatePosition<\/em> que usando el metodo evaluateJavaScript<\/a> le pasara a la funci\u00f3n setLocation<\/em> que se encuentra en la pagina web, los par\u00e1metros que necesita para centrar y ubicar el pin en el mapa.<\/p>\n
\r\nproperty double mapLat\r\nproperty double mapLong\r\nmapLat: positionSource.position.coordinate.latitude\r\nmapLong: positionSource.position.coordinate.longitude\r\n\r\nPositionSource {\r\n    id: positionSource\r\n    active: true\r\n    updateInterval: 1000\r\n}\r\n\r\nfunction updatePosition(mapLat, mapLong){\r\n    mapView.evaluateJavaScript(\"setLocation(\"+mapLat+\",\"+mapLong+\");\");\r\n}\r\n\r\nWebView {\r\n    id: mapView\r\n    url: \"map.html\"\r\n    preferredWidth: parent.width\r\n    preferredHeight: parent.height\r\n    scale: 1\r\n    onLoadFinished: {\r\n        updatePosition(mapLat, mapLong);\r\n    }\r\n}\r\n<\/pre>\n
\"QML<\/p>\n
Algunas consideraciones<\/h3>\n
Todos los ejemplos descriptos anteriormente son b\u00e1sicos, no intenten usarlos directamente en aplicaciones reales sin antes crear cierta l\u00f3gica para manejar los fallos y demoras que acompa\u00f1an siempre a las aplicaciones que dependen del uso del GPS.<\/p>\n
\u00bfCual opci\u00f3n usar?<\/h4>\n
Mas all\u00e1 de las ventajas antes descriptas, como por ejemplo, la flexibilidad de proveedores, la reutilizaci\u00f3n de c\u00f3digo o la integraci\u00f3n de forma nativa, hay un punto muy importante que deben tener en cuenta a la hora de decidir que camino seguir, este punto es la performance<\/strong>, mi experiencia me ha demostrado que la Location API<\/a> no tiene un buen rendimiento cuando es usada en Symbian si lo comparamos con MeeGo, el obtener los datos del GPS puede demorar bastante, desde m\u00ednimo 5 segundos hasta 30 segundos o mas, en cambio en MeeGo este proceso es casi instant\u00e1neo, esto en parte se puede subsanar en Symbian usando un BusyIndicator<\/a> y pidiendo paciencia al usuario, esta lentitud tambi\u00e9n se ve reflejada a la hora de cargar el Map<\/a>, el cual puede tardar entre 5 y 10 segundos en completar su tarea en Symbian, todo lo contrario en MeeGo, en el cual la carga es casi inmediata usando WiFi y demorando no mas de 2 segundos si usamos 3G, es por ello que la opci\u00f3n QtWebKit<\/a> + Nokia Maps<\/a> puede llegar a ser \u00fatil en algunos casos, ya que su performance no es deslumbrante pero si un poco mejor que la que proporciona la Location API<\/a> en Symbian, ademas de que es mas consistente y regular en los tiempos de carga del mapa, lo que ayuda a que su rendimiento sea mas predecible.<\/p>\n
El porque de esta diferencia de performance de la Location API<\/a> entre Symbian y MeeGo no he podido dilucidarlo aun, puede ser la diferencia de velocidad entre los dispositivos (N8\/C7 680Mhz vs. N9\/N950 1Gz ) o una falta de optimizaci\u00f3n en la versi\u00f3n para Symbian, por mientras pueden usar alguna de las opciones antes detalladas seg\u00fan el caso de uso que quieran resolver.<\/p>\n
Actualizaci\u00f3n – 15\/11\/2011<\/h4>\n
Hoy luego de algunas pruebas usando Qt Mobility 1.2.1, versi\u00f3n que esta incluida en el nuevo Qt SDK 1.1.4<\/a>, pude comprobar que la performance de la versi\u00f3n para Symbian de la Location API<\/a> ha mejorado bastante, no esta al nivel de la versi\u00f3n para MeeGo aun, pero entra en el terreno de lo usable.<\/p>\n","protected":false},"excerpt":{"rendered":"
El objetivo de este post es mostrarles de forma practica, un par de opciones para que puedan integrar mapas en sus aplicaciones Qt, tanto en Symbian como en MeeGo, la primera opci\u00f3n hace uso de la Location API incluida en QtMobility, la segunda opci\u00f3n permite integrar servicios como Google Maps, Bing Map o Nokia Maps […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[74,73,25,43,44,45,54],"class_list":["post-1090","post","type-post","status-publish","format-standard","hentry","category-development","tag-geolocation","tag-maps","tag-meego","tag-qml","tag-qt","tag-qt-mobility","tag-symbian"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=1090"}],"version-history":[{"count":66,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1090\/revisions"}],"predecessor-version":[{"id":1480,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1090\/revisions\/1480"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=1090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=1090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=1090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}