Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating Overlays in OpenStreetMap Maps

Author: Rachee Singh
Published? true
FormatLanguage: WikiFormat

Problem:

You need to create overlays for your OpenStreetMap

Solution:

Instantiate an Overlay class and add the overlay to the point you wish to demarcate on the map.

Discussion:

To get started with OpenStreetMaps, see this recipe: Using OpenStreetMap.

By placing a Drawable (Overlay) on the map, a programmer would like to demarcate points of interest on the OSM. To add overlays, firstly, we need to get a handle on to the MapView defined in the XML layout of the Activity.

        mapView = (MapView) this.findViewById(R.id.mapview);

Then we enable zoom controls on the MapView using the 'setBuiltInZoomControls' method and also set the zoom level to a reasonable value.

        mapView.setBuiltInZoomControls(true);
        mapController = this.mapView.getController();
        mapController.setZoom(12);

Then we create two GeoPoints, the first one (mapCenter) is to center the OSM around the point when the application starts and the second (overlayPoint) is where the overlay will be placed.

        GeoPoint mapCenter = new GeoPoint(53554070, -2959520); 
        GeoPoint overlayPoint = new GeoPoint(53554070 + 1000, -2959520 + 1000); 
        mapController.setCenter(mapCenter);

To add the overlay, we create an ArrayList of 'OverlayItems'. To this list, we will add the overlays we wish to add to the OSM.

        ArrayList<OverlayItem> overlays = new ArrayList<OverlayItem>();
        overlays.add(new OverlayItem("New Overlay", "Overlay Description", overlayPoint));

To create the overlay item, we need to instantiate the ItemizedIconOverlay class (along with appropriate arguments specifying the point at which the overlay has to be placed, resource proxy etc). Then we add the overlay to the OSM.

        resourceProxy = new DefaultResourceProxyImpl(getApplicationContext());
        this.myLocationOverlay = new ItemizedIconOverlay<OverlayItem>(overlays, null, resourceProxy);
        this.mapView.getOverlays().add(this.myLocationOverlay);

Then a call to the 'invalidate' method is needed to update the MapView so as to see the changes we made to it.

        mapView.invalidate();

Here is how the OpenStreet MapView with the added overlay looks:

Download:

The source code for this project can be downloaded from https://docs.google.com/leaf?id=0B_rESQKgad5LMThlYmI3ZjctMGU4ZS00ZDhjLWJjMGMtYWYwMTBmNzcxNzJl&hl=en_US.
ghrs 2014-01-21 15:36:23.623 someone knows how to add an icon different of the "hand"? I want to personalize the icons.. someone could help me?