installationopenlayersupgradeopenstreetmap

Can someone advice me how to convert or upgrade an old openlayers OSM map code?

I set up a couple of web sites several years ago that visualize survey data on clickable maps. Example: map with survey data

I put a lot of effort into coding at the time and have not developed the sites further since they have continued to "do the job". The code in the simplest form was:

<!DOCTYPE HTML>
<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script src="ol/ol.js" type="text/javascript"></script>
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

and I have had the css- and js-files in the ol folder on the web server. After this summer all maps are down, with the errors:

  1. Failed to load resource: net::ERR_NAME_NOT_RESOLVED polyfill.min.js:1
  2. Uncaught SyntaxError: Unexpected token ';'
  3. Uncaught ReferenceError: init is not defined at onload

The lines at the "unexpected token" look like this:

while ($row = mysqli_fetch_row($result_poi)) {
        $rows[] = $row;
}

The error message "init is not defined" signals that the the old and basic ol code no longer works. That code looks like this:

    function init() {
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            controls: ol.control.defaults({
                zoom: true,
                attribution: false,
                rotate: true
            })
        });

I understand that polyfill is a compromised link and have removed it. I also understand there have been new openlayer versions since I developed my web sites, and I am certain the new versions are much better than the old one. However, the old one was very sufficient, and whilst trying to upgrade to the new version I am not even managing to get the "Simple Map" to work. I have downloaded the v10.0.0-package and unzipped the files into the ol-folder on the host, but this does not seem to work (it complains about "Uncaught TypeError: Failed to resolve module specifier "rbush". Relative references must start with either "/", "./", or "../"). I changed all of the links in the main.js file so they pointed to the correct path, but I cannot find rbush anywhere. The quick start seems to tell me how to setup a local server with openlayers, but I'm using a host server and cannot install or configure the host.

I would really like to either get my existing code to keep working, OR adjust it to the new openlayer version. But I just don't seem to understand the new way of using openlayers. Are my web maps lost for ever, or does someone have a solution that does not require me to relearn and recode everything? I would really appreciate some advice before messing up something that could work with minor adjustments.

Solution

  • Although there have been some changes since version 4 a good starting point is the version 4 examples https://openlayers.org/en/v4.6.5/examples/simple.html

    In version 10 the map div must have sized, and ol.control.defaults becomes ol.control.defaults.defaults

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.0.0/ol.css">
    <style>
      .map {
        width: 100%;
        height: 250px;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.0.0/dist/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      const map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM(),
            }),
          ],
          controls: ol.control.defaults.defaults({
            zoom: true,
            attribution: false,
            rotate: true,
          }),
          view: new ol.View({
            center: [0, 0],
            zoom: 2,
          }),
        });
    </script>
  </body>
</html>

    If possible download the ol.css and ol.js onto your server.