Menu
I want to add a leaflet map to my vaadin page. I tried using a label and just adding all my html code into it but this only gives me an empty field. Is adding a map by using a label even possible? Or is there any other way?
this is the relevant code I'm using, the map isn't made by me its just a dummy map for testing:
public class MerchantSearchView extends CustomComponent implements View {
private VerticalLayout rootlayout;
private HorizontalLayout buttonlayout;
private CustomLayout testing = new CustomLayout();
private Label mapLabel = new Label(" <html>
<head>
<title>My First Leaflet Map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- define a the area the map will go into. Feel free to change the size as needed -->
<div id="map" style="width:800px; height: 500px;"></div>
<script>
var coords = [37.69, -59.23]; // the geographic center of our map
var zoomLevel = 3; // the map scale. See: http://wiki.openstreetmap.org/wiki/Zoom_levels
var map = L.map('map').setView(coords, zoomLevel);
// we need to provide the map with some base map tiles. There are few free options.
// we'll use Stamen Acetate, a muted base map good for overlaying data.
var tiles = 'http://acetate.geoiq.com/tiles/acetate-hillshading/';
// if you'd like to explore other base maps, see: http://developer.mapquest.com/web/products/open/map
// if you use different tiles, be sure to update the attribution :)
L.tileLayer(tiles+'{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://FortiusOne.com">FortiusOne</a> and <a href="http://stamen.com">Stamen</a>',
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>", ContentMode.HTML);
public MerchantSearchView(View endview) {
buttonlayout.addComponents(search, cancel);
rootlayout.addComponents(address, buttonlayout, testing);
setCompositionRoot(rootlayout);
}
Like I said it does add the 800 by 500 frame and it does change the title to "my first leaflet map" but the frame is empty.
897
asked Oct 27 '25 06:10
One possible approach for you is to use suitable add-on for map instead of building it from the scratch.
If you are using Vaadin 8, you could consider this Leaflet add-on
https://vaadin.com/directory/component/v-leaflet
If you have Vaadin 10 or newer, there is also this one (it does not have all the features as the Vaadin 8 version yet)
https://vaadin.com/directory/component/leafletjs-for-flow
152
Late to the party, but maybe someone will find it's still useful :)
Vaadin has implemented an example project for integrating a Leaflet JS library with Vaadin 14+. It could be find at the official Github pageVaadin Leaflet example
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
