Blackberry map with user defined images as pin and click events

Question

I want to display map(either google map or Blackberry MapField) in my application with the user profile picture as markers. Also i want to click the pins, then it will show an alert box. How its done ?. Thanks in advance.

I want like this -

enter image description here

I tried this code -

import net.rim.blackberry.api.browser.Browser;
import net.rim.blackberry.api.browser.BrowserSession;
import net.rim.device.api.browser.field2.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.container.*;

public class App extends UiApplication
{
public static void main(String[] args)
{
    App app = new App();
    app.enterEventDispatcher();
}
public App()
{
    pushScreen(new MultiplePoints());
}
}
     class MultiplePoints extends MainScreen{
        String initial = "<!DOCTYPE html>\r\n" +
                "<html> \r\n" +
                "<head> \r\n" +
                "  <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" /> \r\n" +
                "  <title>Google Maps Multiple Markers</title> \r\n" +
                "  <script src=\"http://maps.google.com/maps/api/js?sensor=false\" \r\n" +
                "          type=\"text/javascript\"></script>\r\n" +
                "</head> \r\n" +
                "<body>\r\n" +
                "  <div id=\"map\" style=\"width: 500px; height: 400px;\"></div>\r\n" +
                "\r\n" +
                "  <script type=\"text/javascript\">\r\n" +
                "    var locations = [";
        String second= " ];\r\n" +
                "\r\n" +
                "    var map = new google.maps.Map(document.getElementById('map'), {\r\n" +
                "      zoom: 8,";
        String centerPoint ="";
        String finalpart = " mapTypeId: google.maps.MapTypeId.ROADMAP\r\n" +
                "    });\r\n" +
                "\r\n" +
                "    var infowindow = new google.maps.InfoWindow();\r\n" +
                "\r\n" +
                "    var marker, i;\r\n" +
                "\r\n" +
                "    for (i = 0; i < locations.length; i++) {  \r\n" +
                "      marker = new google.maps.Marker({\r\n" +
                "        position: new google.maps.LatLng(locations[i][2], locations[i][2]),\r\n" +
                "        map: map\r\n" +
                "      });\r\n" +
                "\r\n" +
                "      google.maps.event.addListener(marker, 'click', (function(marker, i) {\r\n" +
                "        return function() {\r\n" +
                "          infowindow.setContent(locations[i][0]);\r\n" +
                "          infowindow.open(map, marker);\r\n" +
                "        }\r\n" +
                "      })(marker, i));\r\n" +
                "    }\r\n" +
                "  </script>\r\n" +
                "</body>\r\n" +
                "</html>";
        String[] lt={"12.966085","12.944337","12.925599"};
      String[] lon={"77.533264","77.549400","77.594719"};
      String[] name={"vijyanagar","Banashankari","jaynagar"};

      MultiplePoints(){//StringBuffer html,Vector waypoints,LocationObj center){
            StringBuffer html=new StringBuffer();
            html.append(initial);        
            for(int i=0 ; i<lt.length; i++){
                //LocationObj source = (LocationObj)waypoints.elementAt(i);
                //String point = "['"+source.getLabel()+"',"+source.getLatitude()+","+ source.getLongitude()+","+i+"],";
                String point = "['"+name[i]+"',"+lt[i]+","+ lon[i]+","+i+"],";
                //System.out.println("Point is"+point);
                html.append(point);
            }
            html.append(second);
            centerPoint = "  center: new google.maps.LatLng("+lt[0]+","+lon[0]+"),";    
            html.append(centerPoint);
            html.append(finalpart);
            //System.out.println("Plot is"+html.toString());
            BrowserFieldConfig _bfConfig = new BrowserFieldConfig();        
          _bfConfig.setProperty(BrowserFieldConfig.NAVIGATION_MODE,BrowserFieldConfig.NAVIGATION_MODE_POINTER);
          _bfConfig.setProperty( BrowserFieldConfig.JAVASCRIPT_ENABLED, Boolean.TRUE );
         _bfConfig.setProperty(BrowserFieldConfig.USER_AGENT, "MyApplication 1.0");

          BrowserField myBrowserField = new BrowserField(_bfConfig);

          myBrowserField.displayContent(html.toString(), "http://localhost");
          HorizontalFieldManager horf=new HorizontalFieldManager(HORIZONTAL_SCROLL);
          horf.add(myBrowserField);
          add(horf);
        }
    }

Then i get like this -

enter image description here

i tried you code but i didn't get map and pin in simulator 9550, is work only device? — Hasmukh, May 23 '12 at 11:41
i am using same code which you post..but it display only map... — Hasmukh, May 29 '12 at 06:40

score 1 · Answer 1 · edited May 23 '17 at 11:53

Custom Map Markers

If you want to use BlackBerry's MapField, you might start by reading this, to see how to use custom markers (pins) on a MapField.

That solution basically overrides the paint() method in a class that subclasses the built-in MapField class. Inside paint(), it converts latitude and longitude coordinates of a point where you want a marker (a.k.a. pin or icon) to the x,y coordinates of the MapField. Then, it manually draws the marker with Graphics.drawBitmap().

Now, in order to draw the specific marker you show above ... it sounds like your custom image should be made of two parts:

A background marker that you reuse for every user. This is the blue circle with a point at the bottom, that you show in your question. Draw that marker yourself in a drawing program, save it as a .png file, and add it to your project as a bitmap resource.
The second part is the dynamic image of each user. You'll have to download those images yourself (you didn't really specify where those images come from). But, I'm sure you can find examples on stackoverflow of downloading an image from a web server.

To make the complete marker, you will use the technique shown in the first link I provided. However, instead of drawing one image for each location on the map, you will draw two. First, draw the blue background marker that is the same for every user. Then, on top of that, you will draw the user profile image. If you simply call drawBitmap() with the user image after drawing the blue marker background, the user image will be on top.

The final trick you need to make this work is to take the user profile images, which almost certainly are given to you as square images, and crop them into a round circle. To do that, you can use the solution in this other stackoverflow question. In that solution, Rupak defines a cropImage() method that does what you need to. He crops into a circle. Inside that method, pay attention to what he does to the variable myImage. myImage in your case will start off as the square user profile photo. After cropping it, myImage is now a Bitmap object with cropped edges that you should be able to pass into the second call to Graphics.drawBitmap() that you make for each location on the map.

Handling User Touches/Clicks

Your other question was about handling when the user selects a marker. Since these "markers" are simply drawn directly on top of the MapField, in order to handle touches/clicks on them, you might have to override these methods in your MapField subclass:

protected boolean touchEvent(TouchEvent message);

protected boolean navigationClick(int status, int time);
protected boolean navigationMovement(int dx, int dy, int status, int time);

In those methods, you determine the field (x,y) location of the user's touch/click, and then cycle through your locations to determine if the touch was within a certain (x,y) distance of a marker. You could do this either in field coordinates (x,y) or in map/world coordinates (latitude, longitude). MapField has methods for converting:

void convertFieldToWorld(XYPoint fieldIn, Coordinates worldOut);
void convertWorldToField(Coordinates worldIn, XYPoint fieldOut);

to help with this.

You should also look at the MapFieldDemo that's under the samples directory in your JDE installation. It has a DemoMapField class that may help with getting the location of a click (if you're not on a touchscreen device):

protected boolean navigationMovement(int dx, int dy, int status, int time) 
{
    // The map is shifted in relation to the current zoom level.
    int zoom = getZoom();
    int latitude = getLatitude() - ((dy << 3) << zoom);     // << 3 is equivalent to multiplication by 8.
    int longitude = getLongitude() + ((dx << 3) << zoom);                  

    moveTo(latitude, longitude);       

    return true;        
}

Good luck!

Blackberry map with user defined images as pin and click events

1 Answers1

Custom Map Markers

Handling User Touches/Clicks

Linked