This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Creating an Uber Clone - Part VII

2. The Map
© Codename One 2017 all rights reserved

3. The Map
© Codename One 2017 all rights reserved
✦The hamburger menu button above
represents the side menu
✦The "Where to?" field is really a button
✦For now I'll just place one unmoving Taxi
and we'll deal with the positioning later on
✦The two icons on the bottom represent
historic rides which I'll hardcode for now
✦The bottom notice is something I won't
implement within the app

4. public class MapForm extends Form {
private static final String MAP_JS_KEY = "AIza-------";
private Image square;
private Image dropShadow;
public MapForm() {
super(new LayeredLayout());
setScrollableY(false);
Display.getInstance().callSeriallyOnIdle(() -> {
dropShadow = LoginForm.squareShadow(getDisplayWidth(), 30,
convertToPixels(3), 0.40f);
});
setTransitionOutAnimator(CommonTransitions.createEmpty());
MapContainer mc = new MapContainer(MAP_JS_KEY);
mc.setShowMyLocation(true);
add(mc);
Container mapLayer = new Container();
mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
MapForm

5. public class MapForm extends Form {
private static final String MAP_JS_KEY = "AIza-------";
private Image square;
private Image dropShadow;
public MapForm() {
super(new LayeredLayout());
setScrollableY(false);
Display.getInstance().callSeriallyOnIdle(() -> {
dropShadow = LoginForm.squareShadow(getDisplayWidth(), 30,
convertToPixels(3), 0.40f);
});
setTransitionOutAnimator(CommonTransitions.createEmpty());
MapContainer mc = new MapContainer(MAP_JS_KEY);
mc.setShowMyLocation(true);
add(mc);
Container mapLayer = new Container();
mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
MapForm

6. public class MapForm extends Form {
private static final String MAP_JS_KEY = "AIza-------";
private Image square;
private Image dropShadow;
public MapForm() {
super(new LayeredLayout());
setScrollableY(false);
Display.getInstance().callSeriallyOnIdle(() -> {
dropShadow = LoginForm.squareShadow(getDisplayWidth(), 30,
convertToPixels(3), 0.40f);
});
setTransitionOutAnimator(CommonTransitions.createEmpty());
MapContainer mc = new MapContainer(MAP_JS_KEY);
mc.setShowMyLocation(true);
add(mc);
Container mapLayer = new Container();
mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
MapForm

7. public class MapForm extends Form {
private static final String MAP_JS_KEY = "AIza-------";
private Image square;
private Image dropShadow;
public MapForm() {
super(new LayeredLayout());
setScrollableY(false);
Display.getInstance().callSeriallyOnIdle(() -> {
dropShadow = LoginForm.squareShadow(getDisplayWidth(), 30,
convertToPixels(3), 0.40f);
});
setTransitionOutAnimator(CommonTransitions.createEmpty());
MapContainer mc = new MapContainer(MAP_JS_KEY);
mc.setShowMyLocation(true);
add(mc);
Container mapLayer = new Container();
mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
MapForm

8. public class MapForm extends Form {
private static final String MAP_JS_KEY = "AIza-------";
private Image square;
private Image dropShadow;
public MapForm() {
super(new LayeredLayout());
setScrollableY(false);
Display.getInstance().callSeriallyOnIdle(() -> {
dropShadow = LoginForm.squareShadow(getDisplayWidth(), 30,
convertToPixels(3), 0.40f);
});
setTransitionOutAnimator(CommonTransitions.createEmpty());
MapContainer mc = new MapContainer(MAP_JS_KEY);
mc.setShowMyLocation(true);
add(mc);
Container mapLayer = new Container();
mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
MapForm

9. public class MapForm extends Form {
private static final String MAP_JS_KEY = "AIza-------";
private Image square;
private Image dropShadow;
public MapForm() {
super(new LayeredLayout());
setScrollableY(false);
Display.getInstance().callSeriallyOnIdle(() -> {
dropShadow = LoginForm.squareShadow(getDisplayWidth(), 30,
convertToPixels(3), 0.40f);
});
setTransitionOutAnimator(CommonTransitions.createEmpty());
MapContainer mc = new MapContainer(MAP_JS_KEY);
mc.setShowMyLocation(true);
add(mc);
Container mapLayer = new Container();
mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
MapForm

10. mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
mapLayer.add(telAviv, car);
square = Image.createImage(convertToPixels(0.7f),
convertToPixels(0.7f), 0xff000000);
Button whereTo = new Button("Where To?", square, "WhereTo");
whereTo.setGap(convertToPixels(3));
add(BoxLayout.encloseY(whereTo));
FloatingActionButton history1 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
FloatingActionButton history2 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
TextArea history1Label = new TextArea("Mikve Yisrael Str...", 3, 4);
TextArea history2Label = new TextArea("Burgeranch", 3, 4);
history1Label.setUIID("HistoryLabel");
history2Label.setUIID("HistoryLabel");
history1Label.setEditable(false);
MapForm

11. mapLayer.setLayout(new MapLayout(mc, mapLayer));
add(mapLayer);
Coord telAviv = new Coord(32.072449, 34.778613);
mc.zoom(telAviv, mc.getMaxZoom() + 1);
Label car = new Label(Resources.getGlobalResources().
getImage("map-vehicle-icon-uberX.png"));
car.getAllStyles().setOpacity(140);
mapLayer.add(telAviv, car);
square = Image.createImage(convertToPixels(0.7f),
convertToPixels(0.7f), 0xff000000);
Button whereTo = new Button("Where To?", square, "WhereTo");
whereTo.setGap(convertToPixels(3));
add(BoxLayout.encloseY(whereTo));
FloatingActionButton history1 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
FloatingActionButton history2 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
TextArea history1Label = new TextArea("Mikve Yisrael Str...", 3, 4);
TextArea history2Label = new TextArea("Burgeranch", 3, 4);
history1Label.setUIID("HistoryLabel");
history2Label.setUIID("HistoryLabel");
history1Label.setEditable(false);
MapForm

12. whereTo.setGap(convertToPixels(3));
add(BoxLayout.encloseY(whereTo));
FloatingActionButton history1 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
FloatingActionButton history2 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
TextArea history1Label = new TextArea("Mikve Yisrael Str...", 3, 4);
TextArea history2Label = new TextArea("Burgeranch", 3, 4);
history1Label.setUIID("HistoryLabel");
history2Label.setUIID("HistoryLabel");
history1Label.setEditable(false);
history1Label.setGrowByContent(false);
history2Label.setEditable(false);
history2Label.setGrowByContent(false);
Container h1 = BoxLayout.encloseY(history1, history1Label);
Container h2 = BoxLayout.encloseY(history2, history2Label);
h1.setLeadComponent(history1);
h2.setLeadComponent(history2);
ScaleImageLabel gradient = new ScaleImageLabel(Resources.
getGlobalResources().getImage("gradient-overlay.png"));
gradient.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
add(BorderLayout.south(gradient));
MapForm

13. whereTo.setGap(convertToPixels(3));
add(BoxLayout.encloseY(whereTo));
FloatingActionButton history1 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
FloatingActionButton history2 = FloatingActionButton.createFAB(
FontImage.MATERIAL_HISTORY, "History");
TextArea history1Label = new TextArea("Mikve Yisrael Str...", 3, 4);
TextArea history2Label = new TextArea("Burgeranch", 3, 4);
history1Label.setUIID("HistoryLabel");
history2Label.setUIID("HistoryLabel");
history1Label.setEditable(false);
history1Label.setGrowByContent(false);
history2Label.setEditable(false);
history2Label.setGrowByContent(false);
Container h1 = BoxLayout.encloseY(history1, history1Label);
Container h2 = BoxLayout.encloseY(history2, history2Label);
h1.setLeadComponent(history1);
h2.setLeadComponent(history2);
ScaleImageLabel gradient = new ScaleImageLabel(Resources.
getGlobalResources().getImage("gradient-overlay.png"));
gradient.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
add(BorderLayout.south(gradient));
MapForm

14. history1Label.setUIID("HistoryLabel");
history2Label.setUIID("HistoryLabel");
history1Label.setEditable(false);
history1Label.setGrowByContent(false);
history2Label.setEditable(false);
history2Label.setGrowByContent(false);
Container h1 = BoxLayout.encloseY(history1, history1Label);
Container h2 = BoxLayout.encloseY(history2, history2Label);
h1.setLeadComponent(history1);
h2.setLeadComponent(history2);
ScaleImageLabel gradient = new ScaleImageLabel(Resources.
getGlobalResources().getImage("gradient-overlay.png"));
gradient.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
add(BorderLayout.south(gradient));
add(BorderLayout.south(FlowLayout.encloseCenter(h1, h2)));
}
@Override
protected void initGlobalToolbar() {
setToolbar(new Toolbar(true));
CommonCode.constructSideMenu(getToolbar());
}
}
MapForm

15. WhereTo
© Codename One 2017 all rights reserved

16. WhereTo
© Codename One 2017 all rights reserved

17. WhereTo
© Codename One 2017 all rights reserved

18. WhereTo
© Codename One 2017 all rights reserved

19. WhereTo
© Codename One 2017 all rights reserved

20. History
© Codename One 2017 all rights reserved

21. HistoryLabel
© Codename One 2017 all rights reserved

22. HistoryLabel
© Codename One 2017 all rights reserved

23. HistoryLabel
© Codename One 2017 all rights reserved

24. HistoryLabel
© Codename One 2017 all rights reserved

25. HistoryLabel
© Codename One 2017 all rights reserved