Working with Javascript variables in OpenLayers and Thymeleaf

Question

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());

On a side note, the coordinates should be long, lat, and not lat,long — JGH
– JGH, Commented Jun 11, 2018 at 12:45

Supun Dharmarathne · Accepted Answer · 2018-06-11 15:20:33Z

2

There are couple of issues in your code.

There is no id called "zoom-out" or "zoom-in". So document.getElementById('zoom-in').onclick = function() { gives an error.
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

edited Jun 11, 2018 at 15:20

answered Jun 11, 2018 at 14:42

Supun Dharmarathne

1,1481 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

en Peris Over a year ago

Thanks ... I've removed "zoom-out" and "zoom-in, set the zoom level to 5, but the only thing is taht is not centered to lat / long given ???

Supun Dharmarathne Over a year ago

See my modified answer

Collectives™ on Stack Overflow

Working with Javascript variables in OpenLayers and Thymeleaf

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related