4

Doesn't seem to matter what browser I'm using. I have the prebuilt ol.js v5.2.0. As well as the prebuilt ol.css

Here is the code to create the view, it doesn't get any simpler:

<html>
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">

    <script src="ol.js"></script>
  </head>
  <body style="width:90%; height:100%;">
    <div id="map" class="map" ></div>
    <script>

      var tiledLayer = 
        new ol.layer.Tile({
          extent: [-8222827, 4994547, -7968767, 5177517],
          source: new ol.source.TileWMS({
            url: <my url>,
            params: {'LAYERS': 'MyTestLayer', 'TILED': true},
            serverType: 'geoserver',
            transition: 0
          })
        })

      var layers = [
        tiledLayer
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          zoom: 15
        })
      });
    </script>
  </body>
</html>

I inspect the elements of the zoom control in the browser debugger, here they are:

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

Notice the odd characters where it should just say "-".
A quick google of these characters indicate they may be "Unicode 8722 – the MINUS SIGN"

If so, how do I get my browser to display it properly? Is this my issue or an Openlayers issue?

2 Answers 2

6

This is a problem related to the charset used by your browser. I ran into the same problem, adding the <meta charset="utf-8"> tag in the head of the html file will fix it.

You might check out this answer on stackoverflow for more information.

2
  • 1
    That was it! I was hoping it was something simple I was missing. Thanks.
    – Brian B
    Commented Oct 18, 2018 at 0:31
  • Glad I could help!
    – root676
    Commented Oct 18, 2018 at 6:56
0

We have just updated our website from OpenLayers 2 to OpenLayers 6. On our test server the [+/-] rendered just fine. The [+/-] rendered with the stray character in ol6, but was ok in ol2. This fixup took all of 20 minutes to resolve and fix.

Note the <meta charset="utf=8"> had to be the first <meta...> tag in the HTML file.

This did not work:

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="hand-generated html (primitive, aint it?)">
   <meta charset="utf-8">

This did work:

   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="hand-generated html (primitive, aint it?)">
1
  • That is useful to note, it should like like: <head> <meta charset="utf-8">
    – Brian B
    Commented Jan 11, 2021 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.