Maps doesn't get displayed

Hi,

The maps doesn’t get displayed on browse page. I followed this step.
https://docs.cuba-platform.com/cuba/5.6/charts/en/webhelp/map_project_setup.html
I added the application properties in modules/web/bin/web-app.properties


cuba.charts.map.freeApiKey = ********************************
cuba.charts.map.clientId =  ********************************
#cuba.charts.map.useBusinessApiKey = true
#cuba.charts.map.businessApiKey =
cuba.charts.map.defaultZoom = 13.0
cuba.charts.map.defaultLatitude = 51.5001
cuba.charts.map.defaultLongitude = -0.1262

Generated and edited this map file


/*
* Copyright (c) 2016 distribution
*/


package com.arcusfm.distribution.gui.conviencestore;

import java.util.Map;
import javax.inject.Inject;
import com.haulmont.charts.gui.components.map.MapViewer;
import com.haulmont.charts.gui.map.model.GeoPoint;
import com.haulmont.cuba.gui.components.AbstractLookup;
import com.haulmont.charts.gui.map.model.listeners;

/**
 * @author samuel.thampy
 */

public class ConvienceStoreBrowse extends AbstractLookup {

    @Inject
    private MapViewer map;

    @Override
    public void init(Map<String, Object> params) {
        GeoPoint center = map.createGeoPoint(53.490905, -2.249558);
        map.setCenter(center);
        map.addMarkerClickListener(new MarkerClickListener() {
            @Override
            public void onClick(MarkerClickEvent event) {
                Marker marker = event.getMarker();
                String caption = String.format("Store: %.2f, %.2f",
                        marker.getPosition().getLatitude(),
                        marker.getPosition().getLongitude());
                InfoWindow w = map.createInfoWindow(caption, marker);
                map.openInfoWindow(w);
            }
        });
    }
}

XML Generated file display in com.arcusfm.distribution.gui.conviencestore.conviencestore-browse.xml


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="msg://browseCaption"
        class="com.arcusfm.distribution.gui.conviencestore.ConvienceStoreBrowse"
        focusComponent="mapBox"
        lookupComponent="convienceStoresTable"
        messagesPack="com.arcusfm.distribution.gui.conviencestore"
        xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">;
    <dsContext>
        <collectionDatasource id="convienceStoresDs"
                              class="com.arcusfm.distribution.entity.ConvienceStore"
                              view="convienceStore-view">
            <query>
                <![CDATA[select e from distribution$ConvienceStore e]]>
            </query>
        </collectionDatasource>
    </dsContext>
    <layout margin="true"
            spacing="true">
        <filter id="filter"
                applyTo="convienceStoresTable"
                datasource="convienceStoresDs">
            <properties include=".*"/>
        </filter>
        <vbox id="mapBox">
            <chart:mapViewer id="map"
                             height="100%"
                             mapType="satellite"
                             width="100%"/>
        </vbox>
        <table id="convienceStoresTable"
               height="100px"
               width="100%">
            <actions>
                <action id="create"/>
                <action id="edit"/>
                <action id="remove"/>
            </actions>
            <columns>
                <column id="storeName"/>
                <column id="storeCode"/>
                <column id="storeId"/>
                <column id="storeAddress"/>
                <column id="storeLongitude"/>
                <column id="storeLatitude"/>
            </columns>
            <rows datasource="convienceStoresDs"/>
            <rowsCount/>
            <buttonsPanel id="buttonsPanel"
                          alwaysVisible="true">
                <button id="createBtn"
                        action="convienceStoresTable.create"/>
                <button id="editBtn"
                        action="convienceStoresTable.edit"/>
                <button id="removeBtn"
                        action="convienceStoresTable.remove"/>
            </buttonsPanel>
        </table>
    </layout>
</window>

I have checked the charts option on project properties.
I have attached an image but the map doesn’t display. Let me know if you need anything else.

storemaps

Cuba Version is 6.0.8

Hi Samuel,

First, let me notice that you are using the outdated 5.6 version manual. It’s not a case for the issue you are facing, but if you use CUBA 6.0 you can find the corresponding manuals here (see version 6.0).

Regarding the problem you are facing: it’s not an issue of the Map componet, but layout issue. In your layout:


        <vbox id="mapBox">
            <chart:mapViewer id="map"
                             height="100%"
                             mapType="satellite"
                             width="100%"></chart:mapViewer>
        </vbox>

Vbox height is not specified, so adding height=“100%” to the vbox should solve the problem:


        <vbox id="mapBox"  height="100%">
            <chart:mapViewer id="map"
                             height="100%"
                             mapType="satellite"
                             width="100%"></chart:mapViewer>
        </vbox>

Also, here is a very useful trick: if you see the problem with layout you can always right click on the tab and press Analyze layout (see the picture attached). In your case you will get the following message:


[ERROR] Container 'mapBox', nested component 'map'
Nested component has relative height 100.0% inside container with undefined height

which clearly explains what the problem is.

Regards.

AnalyzeLayout

1 Like

Thanks Aleksey. The height addition to vbox works.