Posted on by | Posted in Mobile Blog, Tutorial | Tagged , ,


In this post i will show you how to realize a Maemo 5 Qt 4.6 application with google maps integration.

The map:

There is a good short tutorial with included source code: http://efforts.embedded.ufcg.edu.br/qt/?p=80. Because there is no native library for the N900 you have to go another way to get the map in your application. The tutorial describes howto load and render the map by the webkit library. I used parts of the html file of that project for my little app.


Posted on by | Posted in Mobile Blog, Tutorial | Tagged ,


In my first installment, we laid the foundation for todays blog post. So don't hesitate to head back for a recap, if you need to. You can download the code for this tutorial on github.

If you start the App where we left off, you get the two pins, but it won't be properly zoomed. In fact, it would look something like this:


Posted on by | Posted in Mobile Blog, Tutorial | Tagged , , ,


In my last post about Google Maps on Android I showed you how to use the basic navigation features of google maps, like moving the map to a defined area and zooming to a given level.
Now as you have centred your map and zoomed in, it would be a good idea to show some kind of marker. Otherwise the user won't actually realize what you want to show him. How a basic overlay is done, is described in the tutorial on the android developer site, already mentioned in the last post. The HelloItemizedOverlay that is created there, enables you to add as many markers to your map as you want:

List mapOverlays = mapView.getOverlays();
Drawable drawable = this.getResources().getDrawable(R.drawable.synyxLogo);
HelloItemizedOverlay itemizedOverlay = new HelloItemizedOverlay(drawable);
OverlayItem synyxOfficeOverlay = new OverlayItem(synyxOfficeLocation, "Synyx", "This is the Synyx office!");
itemizedOverlay.addOverlay(synyxOfficeOverlay);
// add more overlayItems...
mapOverlays.add(itemizedOverlay);

This will draw a nice marker just at the location of the synyx office. The drawback of this method is, that all markers on the map just look the same. You might think: No problem - just use the setMarker() method of the OverlayItem to set a new marker for just this item. As this looks like the way to do it, it won't work. All you get is no marker (not the one you just set, nor the default one). The map is just shown as if your marker was not defined at all.
So how to do it? The trick is the static method boundCenterBottom() of the ItemizedOverlay class. This method is also called in the constructor of the HelloItemizedOverlay, when the default marker is set:

public RouteMapOverlay(Drawable defaultMarker, Context context) {
    super(boundCenterBottom(defaultMarker));
    this.context = context;
}

The problem is, that the visibility of this method is set to protected (why?!). So calling it when setting the marker won't work:

// won't work as boundCenterBottom is protected
synyxOfficeOverlay.setOverlay(ItemizedOverlay.boundCenterBottom(myNewMarker));

Because of this visibility feature, the "easier" way is to add a new setter to your HelloItemizedOverlay class, accepting an OverlayItem and a Drawable to use as the marker. Within that setter, you are able to call the boundCenterBottom() method to set up the marker correctly:

public void addOverlay(OverlayItem overlayItem, Drawable marker) {
    overlayItem.setMarker(boundCenterBottom(marker));
    addOverlay(overlayItem);
}

Now if you use that setter, the map will correctly show your OverlayItem with your marker.


Posted on by | Posted in Mobile Blog, Tutorial | Tagged ,


We wanted to give our users the possibility to find our office. On the iPhone, the simplest way to do it, is to use Google Maps and the MapKit framework. I won't go into the details of MapKit here, since Apple's documentation is awesome and they provide a lot of sample code, which gets you up and running in no time.