CODEWITHSUNDEEP
javahtmlleafletvaadin
Hola
Hola

Reputation: 51

Vaadin add HTML leaflet map

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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <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.

Upvotes: 4

Views: 709

Answers (2)

anasmi
anasmi

Reputation: 2652

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

Upvotes: 1

Tatu Lund
Tatu Lund

Reputation: 10643

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

Upvotes: 2

Related Questions