VLeaflet MarkerCluster labels and circles mods

Hi to the Vaadin community !

I’m in the process of developing a webapp with :


Openstreet Map
Vaadin framework
VLeaflet and MarkerCluster
MySQL relational database (markers info stored in it with hierarchy)

I’ve implemented ‘on the fly’ marker loading with map bounds (my own version of fitbounds() in javascript that I implemented in Vaadin and MySQL) to have optimal performance for marker loading. I have max of 2,000 markers loaded in dense areas such as western Europe, whichever zoom level I choose, because all the information is structured in a hierarcy


cities : 143,000 markers
Level 1 and 2 regions : 42,000 markers
Countries : 235 markers
Continents : 7 markers (Atlantis has been removed)

So far so very good !

Now …
I need to customize the MarkerCluster and leaflet circles
(change color, size, put a real icon, etc.) as well as the
ability to put text labels
on top of them with another number count and some text (name of countries with their population for example ) that I can already extract from my MySQL database

It seems that this can be achieved in standard PHP/Javascript, but I get allergic reactions with Javascript, and Vaadin is the best medication for that matter :slight_smile:

Cheers to all

Norm.

Found it !

                    Double labeltightness = 6.2; //optimal label width for nice borders
                    Integer labelheight = 35; 

                   LMarker m = new LMarker(rs.getDouble(5), rs.getDouble(4));                    

                    String str3 = str1 + "Region: " + rs.getString(2);

                    String str4 = rs.getString(1) + " Reports" + str2;                    

                    String strfinal = str1 + str3 + str2 + str4;

                    Integer max = Math.max(str3.length() - str1.length(), str4.length() - 4 - str2.length());   //looking for the largest string to fit the label                 

                    m.setDivIcon(strfinal);

                    m.setIconSize(new Point(max * labeltightness,labelheight));

Glad to see you got this working with the limited documentation! I should really prepare at least a tutorial for V-Leaflet usage. Sorry I had forgotten to answer the question.

cheers,
matti