Search code examples
javascripthtmlthymeleafopenlayers

OpenLayers: zoom icon so small

I have this piece of code in a Thymeleaf template, that uses OpenLayers (A high-performance, feature-packed library) to show a map

<div id="Map">
                    <script th:src="@{/js/OpenLayers.js}"></script>
                    <script th:inline="javascript">
                    /*<![CDATA[*/

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

                        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
                        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

                        var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);                        
                        //var position2       = new OpenLayers.LonLat(4.373067, 50.828010).transform( fromProjection, toProjection);

                        var size = new OpenLayers.Size(32,48);
                        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                        var icon = new OpenLayers.Icon('../../../tdkcub/images_tdk/map_marker.png', size, offset);

                        map = new OpenLayers.Map("Map");
                        var mapnik  = new OpenLayers.Layer.OSM();
                        map.addLayer(mapnik);

                        var markers = new OpenLayers.Layer.Markers( "Markers" );

                        map.addLayer(markers);

                        markers.addMarker(new OpenLayers.Marker(position, icon));                        
                       // markers.addMarker(new OpenLayers.Marker(position2, icon));

                        map.setCenter(position, zoom);

                        var myLocation = new OpenLayers.Geometry.Point(lon, lat).transform('EPSG:4326', 'EPSG:3857');

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

But when I see the map, the simbols - / + appears so small.

enter image description here

Solution

  • You are most likely missing the OpenLayers default styles or have some other styles conflict with them. The map controls are not part of the canvas but are regular html elements (buttons).

    Add the CSS:

    <link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>

    Or style the buttons yourself, the html is quite simple:

    <div class="ol-zoom ol-unselectable ol-control">
  <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
  <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
</div>