V-Leaflet map not showing on page

Flow
1

Hello all,

I have this code that should shows a map in a View:

@SpringView(name = “sitemap”)
public class DashboardLocationView extends VerticalLayout implements View {
…

@PostConstruct
protected void initialize() {

    
    osmTiles.setAttributionString("© OpenStreetMap Contributors");        
    
    MVerticalLayout maplayout = new MVerticalLayout();
    maplayout.setSizeFull();
    maplayout.addComponent(map);
    
    map.removeAllComponents();
    map.addBaseLayer(osmTiles, "Open Street Map");
    
    LMarker centermarker = new LMarker();
    centermarker.setPoint(new Point(8.48127900,124.648258));
    map.setZoomLevel(14);
    map.zoomToContent(centermarker);
    map.setCaption("Map");

But the page is blank. :frowning:

The application compiles correctly and the AppWidgetset has these lines:

<inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" />

<inherits name="com.vaadin.DefaultWidgetSet" />
<inherits name="org.vaadin.addons.WidgetSet" />
<inherits name="org.vaadin.addon.leaflet.Widgetset" />
<inherits name="org.vaadin.addon.leaflet.editable.EditableWidgetset" />

If I do a firebug inspection I can see that the tiles are on the browser but not showing on the page. See attached.

Hope someone can provide a solution. :slight_smile:

Ben

29528.png

2

Oh… I have a smaller app that shows the map on a simple UI:

@SpringUI
@Push
@Theme("valo")
public static class ApplicationUI extends UI implements Consumer<Event<LocalTime>> {

…
private void loadLocations() {
locations = locationRepository.findAll();
map.removeAllComponents();
map.addBaseLayer(osmTiles, “Open Street Map”);

        for (final Location location : locations)
            addEventVector(location);
        LOGGER.info("count: {}",map.getComponentCount());
        
        Location mapcenterlocation = locationRepository.findByMapcenter(Yesno.YES);
        
        // Set map center
        
        LMarker centermarker = new LMarker();
        centermarker.setPoint(new Point(mapcenterlocation.getLat().doubleValue(),mapcenterlocation.getLng().doubleValue()));
        LOGGER.info("zoom to content.");
        map.setZoomLevel(14);
        map.zoomToContent(centermarker);

And it works fine.

Ben

3

Most probably your parent layout is not has undefined height → the child layout and the map insided it becomes 0 pixels height. Use setSizeFull() for the DashboardLocationView, that might help.

This kind of layout issues are often easily detectable by the debug dialog that you can open with “?debug” query parameter.

cheers,
matti

4

Hello Matti,

Thank for the tip!

I have solve the problem. Instead of setting the height and width with percentage I used pixels. See attached PDF file for the code and the screenshot of the maps.

Hope my solution helps other developers!

:slight_smile:

Ben

30101.pdf (455 KB)

5

apologies if this is a bit off topic but how to add Leaflet Ma in Vaadin 10 ?

Tabs tabs = new Tabs(tab1, tab2, tab3);
Div pages = new Div(d1, d2, d3);
add(tabs); //THIS WORKS FINE
LMap leafletMap = new LMap();
leafletMap.setCenter(60.4525, 22.301);
leafletMap.setZoomLevel(15);		
// add(leafletMap); THIS DOES NOT WORK EITHER....LMap is not a compnent it seems for Vaadin 10
6

Peter what if your add width/height (fixed px) or setSizeFull to parent layout (or/and leafletMap)? I haven’t got yet v10 enviroment…

7

Vaadin 10/11 are totally turning it all upside down due to Polymer stuff.

it is a compile time issue…not run time. I cannot add this type…those V10 flow components are somehow different…
i.e. you cannot use add same way we all used to.
I think I need to use a plymer google widget abnd encapsulate is somehow…total insanity… but here we go…every corner eerything we do from scratch in the web. :slight_smile:

I wish I had an example with leaflet maps…

8

There isn’t a version of v-leaflet that is compatible with Vaadin 10+ yet. It is a lot of work and Polymer + Shadow DOM stuff makes certain things harder than it was.

Currently if you need a professional slippy map with Vaadin, I suggest to go with version 8. I hope to find some time to look into V10 compatible version at some point, but I just recently started one app with Vaadin 8 for this reason.

cheers,
matti

9

Matti
great answer much appreciated…this is what I had suspected…

I am trying to figure out if a Mobile App would be OK with Vaadin 8…any ready stylesheets or I would have to build my own

10

I have been using [TouchKit]
(https://vaadin.com/directory/component/touchkit) in many mobile V7 and V8 apps. It provides good defaults for viewports, some enhanced mobile designed component etc. It used to be a commercial but now open sourced as all components in V10 are designed for mobile usage as well. For tablet size, you can often go without TouchKit too.

11

well… I would gladly go with V10, unfortunately…no maps support renders it suicidal project wise.
going to V8 poses same amount of work as going to Angular.js

12

Don’t know exactly what you are referring to, but I’d say V8 would probably need least work ATM to build basic apps ;-). But indeed, if you have already started with V10, then the situation really sucks when it comes to map extensions.

What features would you need in your app? A basic integration shouldn’t be too hard to build, but it would be nothing like v-leaflet currently is with all the extensions around it. Will already did [a prototype]
(https://github.com/willtemperley/leaflet-map) in the spring but don’t know exactly what works there currently.

13

I need a BASIC map with basic markers with data in baloons that allows interaction (click data in baloon to edit data in market). Point of going with toolkits like Vaadin is that we do not have to deal with HTML and JS. The way it stands now,
V10 is a pain to work with as it has to deal with all that. It makes all simple things pointlessly trivial and solves none of the real problems that I would prefer to use Java for. Vaadin was supposed to be JAVA toolkit…as I look at vaadin documentation…I see more JS and HMTL in documentation than Java code!!!.. I see TONS of examples of HTML and getElement DOM manipulation stuff etc… no real components just a load of components that really do not matter that much. Granted…I see charts! wow…great…as it happens but no maps…I think for mobile and no maps… it is a useless toolkit.

We jumped the ship into V10…I could not imagine the release of Vaadin with a set of components that is simply incomplete and full of trivia widgets (but for charts OK that are valuable).
The levels of mastication on trivial components in V10/V11 etc is insane, at the same time with almost non existent support for modern day sophisticated components like maps that components are most useful for due to complexity…I do not realy a component for a freaking primitive button! just my personal opinion.
looks like we will be dumping vaadin altogether. it just offers nothing of tangible value to cut down amount of the work we do. I could do OK with primitive clickable links as buttons like on Craigslist but when I have to deal with maps at HTML and JS level…why bother with Vaadin AT ALL…see no point whatsoever for this project of ours…was Vaadin JAVA componentry always with intent to make spaghetti web JS/HTML programming clean with JAVA elegance?
I would attribute a lot of the mess to polymer trend…but I just do not see the ease of use of vaadin but for bunch of apps with lost of trivial buttons, checkboxes, lists, grids and(most evolved) charts that one want to customize milions of times.
Why do I need a JAVA toolkit to slap some buttons and drop boxes etc on a web page? I do not need it at all.
Just my California/Silicon Valley open question, personal perception for the purpose of the project at hand.

14

I kind of agree with you that the situation with current V10 components is not good, not with the official components and especially with add-ons like map components. We are probably promoting Vaadin 10 too much for new users, as especially for Java developers Vaadin 8 is still way ahead (although we hope to change that in the near future). A lot of fixes for built-in components are already in, but they will pop-up in Vaadin 11 and Vaadin 12…

Don’t know how much you have already invested, but I’d give a chance for Vaadin 8 still. It is what I suggest for most Java developers at this point and it will still be supported for a long time. I wrote [an article about this]
(https://vaadin.com/blog/v8-vs-v10-two-maintained-vaadin-versions-which-one-to-choose-#comments) before the summer.

cheers,
matti

15

Matti,
thank you for you post. We are splitting the app into 2 pieces…we will use V10 as is now for one part already built,
the rest we will go wth Angular.js for maps and all stuff that needs to deal with real stuff
I will see how it works… we cannot use Vaadin for the enitre project due to insufficiently rich component sets…

Carpenters are never better than the tools they use :frowning: I seriously think that Vaadin should follow balanced and
weighted releases. no point in releasing Vaadin 14…Vaadin 23 when there are no components that applications can be
built with…not having maps for mobile today almost disqualifies a product, not having mobile side in 2018 renders a toolkit/app hugely deficient. Just my personal opinion after the huge frustration we have faced the past 2 weeks grappling with putting SIMPLE manageable MAPS onto a mobile application in Vaadin10.

:slight_smile:

16

On behalf of Vaadin, thank you for your honest feedback, Peter. I will personally look into what it would require to add mapping tools and components to the set.

Could you please share some insight on what other components, besides maps, you think should be in Vaadin, so that you could consider it to be a comprensive set for you to use?

17

First and foremost I would like to thank you and the entire Vaddin team. I am impressed with your sound
and wise approach and honest desire to listen to constructive criticism. It takes wisdom to see that criticism
contributes to the ultimate growth.

I think it is essential for mobile applications that Vaadin targets to offer Maps.
Mobile apps are essential for all web apps these days and maps are integral parts of a large number of mobile
applications in every space. Nothing is that vital in the ecosystem.

As for ease of use- I used to work at Borland Software- the componentry of Visual Basic(Microsoft) (and Delphi)
were truly super easy to use. I could have a 5 yo kid build an app in 30 minutes without teaching anything
on interfaces or anonymous types…None of the components I see these days have the same level of ease of use.
(Not that professional developer must have that but it is amazing how much less capable tools are these days.)

Constant back and forth between Java and JS/HTML detracts from the consistency and focus of a JAVA based toolkit.
When I look at Vaadin docs…html and JS seem more common than Java. Vaadin has been a great Java toolkit,
lets try to keep this ecosystem useful for majority of apps and this does does require that components of that essence are
present. Few people want to tinker with css-es and stylesheets ad neuseam I think. Most want to use standard buttons and functionality that powers new apps.

18

Thank you! I’ll look into the map component, and I sent forward to my collague the info about HTML and JS vs Java. He takes care that the overall learning experience is good, including docs and tutorials.

19

Jens, much appreciated.