Search code examples
javascripthtmlspring-bootthymeleafopenlayers

Working with Javascript variables in OpenLayers and Thymeleaf

I have a basic SpringBoot app. using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file. I have a Thymeleaf that gets lat and lng variables from the controller. In the Thymeleaf template I have this piece of code

    <div id="Map" class="map"></div>
                        <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
                        <script th:inline="javascript">
                        /*<![CDATA[*/

                            var lat            = /*[[${lat}]]*/;
                         var lng            = /*[[${lng}]]*/;

                               var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'Map',
            controls: ol.control.defaults({
              attributionOptions: {
                collapsible: false
              }
            }),
            view: new ol.View({
              center: [lng, lat],
              zoom: 10
            })
          });

          document.getElementById('zoom-out').onclick = function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom - 1);
          };

          document.getElementById('zoom-in').onclick = function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
          };

 /*]]>*/
                                  </script>
                </div>

but I see all the map in grey and when I see the source code of the page I see literally this:

  <script>
                    /*<![CDATA[*/

                        var lat            = 31.184349060058594;
                     var lng            = 1.2457042932510376;

                           var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'Map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: [lng, lat],
          zoom: 10
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
  /*]]>*/   
                    </script>

in the controller:

model.addAttribute("lat",           getLatitude());
        model.addAttribute("lng",           getLongitude());
Solution

  • There are couple of issues in your code.

    1. There is no id called "zoom-out" or "zoom-in". So document.getElementById('zoom-in').onclick = function() { gives an error.

    2. Please set the zoom level to 5. Then you can see the map. Actually map is loading but you can't see it because of it is already zoomed in.

    This is the working html

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
</head>
<body>
<div id="Map" class="map"></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/

    var lat            = /*[[${lat}]]*/;
    var lng            = /*[[${lng}]]*/;

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'Map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([lon, lat]),
            zoom: 5
        })
    });

    document.getElementsByClassName('ol-zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
    };

    document.getElementsByClassName('ol-zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
    };

    /*]]>*/
</script>
</div>
</body>
</html>

    Please find the working example from here https://gitlab.com/supun/spring-boot-app/commit/856cbbd1e798ab071118d420f9cab02722d219eb