-3

i try to switch from google maps to osm and tried OpenLayers (the quick start example). If i use the hosted builds, everything looks ok. But if i download the 5.1.3 package and host it on our webserver, the caption of the zoom out button is damaged. URL: http://www.canalcup-cam.de/maps.php
It looks as if a non ASCII "-" is used ... I tried to find the code, where the caption of the button is set, but without success. Has the encoding of the website to do with this? I tried utf-8 and Windows-1250.

Regards, hjt

hjt
  • 1
  • 1
  • The [code from the quick start example works for me](http://www.geocodezip.com/OL_5.1.3_quickStart.html). The code at [your link](http://www.canalcup-cam.de/maps.php) is not the same. – geocodezip Aug 10 '18 at 09:57
  • i copied the code from your link, changed the loccation of the to my local copy of openlayers, an the prolblem ist still the same ... – hjt Aug 13 '18 at 13:23
  • 1
    One of the issues with your copy is you aren't including the ol.css. Please provide a [mcve] that demonstrates your issue in the question itself, not (just) a link to a broken site. – geocodezip Aug 13 '18 at 14:47
  • i do include the ol.css in line 4 ? – hjt Aug 14 '18 at 07:42

2 Answers2

6

When I take a copy of your code and link to your copy of ol.js I need to insert <meta charset="utf-8"> for the minus (it's the html &minus; not a hyphen) to show correctly:

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://www.canalcup-cam.de/inc/OpenLayers/v5.1.3/build/ol.js"></script>

    <title>OpenLayers example</title>
  </head>

But using the cdn version of ol.js it works without the meta tag. Maybe your copy has been altered in some way, but it is still good practice to always include the meta tag.

  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>

    <title>OpenLayers example</title>
  </head>
Mike
  • 16,042
  • 2
  • 14
  • 30
1

Broken characters are usually caused by wrong encodings. There are lot of places that could happen. In your case, it is in the meta tags.

You seem to like swimming against the current, so you added the meta tag <meta charset="windows-1250"> to your website. Not even 5% of the websites use Latin-1/Windows-1252 anymore, the world is converging on UTF-8 - and you should switch over too.

dube
  • 4,898
  • 2
  • 23
  • 41
  • Yes i know, but its an old Site, not owned by me. As mentioned, it seems to me that a non-ASCII "-" is used. If a normal "-" is used, encoding should be no problem. – hjt Aug 13 '18 at 13:29
  • Sooo this post answers your question or not? – dube Aug 13 '18 at 16:30
  • "If a normal "-" is used, encoding should be no problem." Just because you do not see it does not mean it's not broken. Fix the encoding or live with a broken system. It's not OpenLayer's fault – dube Aug 14 '18 at 06:33