Ayer andaba buscando iconos para usar en una aplicación con mapas y me encontré con un recurso bastante interesante llamado Map Icons Designer. Como podréis ver tienen una pinta bastante atractiva y, si seguís viendo su página, encontraréis que por un lado se nos proporcionan los pines y por otro los símbolos. La solución, evidentemente, es juntar ambas cosas con algo de coherencia y en el caso que se muestra a continuación se hará mediante un componente QML creado a partir de dos imágenes.
Primero un componente QML facilón
La cosa es bastante fácil, sólo hay que posicionar el símbolo sobre el marcador y para ello usaremos la propiedad "anchor": la posición relativa de ambos tendrá el mismo centro horizontal, después alinearemos el borde superior del símbolo al pin pero dándole un margen adecuado.anchors.top: parent.top anchors.topMargin: 10 anchors.horizontalCenter: parent.horizontalCenter
Por otro lado, aunque vamos a usar sólo uno de los marcadores que se nos proporcionan, los iconos a situar en el interior los deberemos elegir dinámicamente. Esto lo conseguiremos creando una propiedad, usando "property alias", en la que indicaremos el elemento que queremos.
property alias symbol:symbol.source
Además podemos meter todas las imágenes en un archivo .qrc y darles una alias para facilitar el acceso desde la aplicación. En la captura que hay a continuación se puede ver que hay definidos dos prefijos uno para los pines y otro para los símbolos.
De momento, el componente queda tal y como se muestra aquí:
import QtQuick 2.0
Image {
property alias symbol:symbol.source
id: pin
source: "qrc:/pins/blue"
Image{
id: symbol
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
}
}
Un ejemplo con QT Location
En cuanto a su utilización, para obtener algo similar a la imagen que se encuentra más abajo, puede incluirse dentro en un Map del módulo QT Location, pintándolo a traves de un MapQuickItem:
Map {
id: nmap
center {
latitude: -27
longitude: 153
}
zoomLevel: 10
plugin : Plugin {name : "osm"}
MapQuickItem {
coordinate: nmap.center
anchorPoint: "0,0"
sourceItem: Marker{symbol:"qrc:/symbols/car"}
}
}
Pero esto nos llevará a pensar que, puestos a usarlo con qtLocation, será mejor si el propio componente es un MapQuickItem, con lo que heredará todas sus propiedades. Además, añadiremos un par de cosas:
- Por un lado corregiremos el posicionamiento del elemento. En QML nuestros elementos se posicionan tomando como referencia el vértice superior izquierdo y, como se puede ver, el pin tiene una punta abajo y centrada para indicar el punto exacto en el que se localiza. Esto lo solucionamos indicando lo siguiente:
anchorPoint.x: pin.width/2
anchorPoint.y: pin.height
- Además añadiremos un MouseArea para detectar eventos sobre el marcador. En el ejemplo solo se trata el click pero podrían ponerse más
import QtQuick 2.0
import QtLocation 5.0
MapQuickItem{
id: root
property alias symbol:symbol.source
signal clicked()
anchorPoint.x: pin.width/2
anchorPoint.y: pin.height
sourceItem: Image {
id: pin
source: "qrc:/pins/blue"
Image{
id: symbol
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
}
}
MouseArea{
anchors.fill:parent
onClicked: root.clicked()
}
}
Y podremos usarlo de la siguiente manera::
import QtQuick 2.0
import QtLocation 5.0
Rectangle{
width: 480;
height: 300;
Map {
id: nmap
width: parent.width
height: parent.height
anchors.centerIn: parent
center {latitude: -27;longitude: 153}
zoomLevel: 10
gesture.flickDeceleration: 3000
gesture.enabled: true
plugin : Plugin { name : "osm"}
Marker {
symbol:"qrc:/symbols/car"
coordinate{
latitude:-27
longitude:153
}
onClicked: console.log("clicked!")
}
Marker {
symbol:"qrc:/symbols/food"
coordinate{
latitude:-27.1
longitude:153.1
}
}
}
}
