Related questions

Deepzoom into OpenLayers images using zoomify

2019-10-22 06:42 Ganesh Rathinavel imported from Stackoverflow

How do I deepzoom into OpenLayers images using Zoomify?

Taking cues from the answer How to display high resolution image in browser using openlayers, I was able to implement the zooming function but the maxZoom does not work here and I am unable zoom further into the image.

DZI image parser

function loadUrl(url, opt_options) {
  const options = opt_options || {};
  const crossOrigin =
    options.crossOrigin === undefined ? 'anonymous' : options.crossOrigin;

  const layer = new ol.layer.Tile();

  const last = url.lastIndexOf('.');
  const path = url.slice(0, last);

  const xhr = new XMLHttpRequest();

  let width;
  let height;

  xhr.open('GET', url);
  xhr.onload = function() {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xhr.responseText, 'text/xml');

    const elements = xmlDoc.getElementsByTagName('Image');
    const tileSize = Number(elements[0].getAttribute('TileSize'));
    const format = elements[0].getAttribute('Format');

    width = Number(
      elements[0].getElementsByTagName('Size')[0].getAttribute('Width')
    );
    height = Number(
      elements[0].getElementsByTagName('Size')[0].getAttribute('Height')
    );
    const url = `${path}_files/{z}/{x}_{y}.${format}`;

    const source = new ol.source.Zoomify({
      url,
      size: [width, height],
      tileSize,
      crossOrigin
    });

    const offset = Math.ceil(Math.log(tileSize) / Math.LN2);

    source.setTileUrlFunction(function(tileCoord) {
      return url
        .replace('{z}', tileCoord[0] + offset)
        .replace('{x}', tileCoord[1])
        .replace('{y}', -(tileCoord[2] + 1));
    });

    layer.setExtent([0, -height, width, 0]);
    layer.setSource(source);
  };

  xhr.send();

  return {
    layer,
    width,
    height
  };
}

Map Object

const map = new ol.Map({
  target: 'map',
  logo: false
});

const { layer } = loadUrl(
  'https://openseadragon.github.io/example-images/duomo/duomo.dzi'
);

layer.on('change:source', function(evt) {
  map.setView(
    new ol.View({
      resolutions: layer.getSource().getTileGrid().getResolutions(),
      extent: layer.getExtent(),
      zoom: 5,
      maxZoom: 30
    })
  );
  map.getView().fit(layer.getExtent(), { size: map.getSize() });
});

map.addLayer(layer);

How do I remove the zoom constraints?

1 answer

  • answered 2019-10-22 08:31 Ganesh Rathinavel

    I have figured it out.

    Code for the same:

    function loadUrl(url) {
  return new Promise(resolve => {
    const layer = new ol.layer.Tile();

    const last = url.lastIndexOf('.');
    const path = url.slice(0, last);

    const xhr = new XMLHttpRequest();

    let width = 0;
    let height = 0;

    xhr.open('GET', url);
    xhr.onload = () => {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xhr.responseText, 'text/xml');

      const elements = xmlDoc.getElementsByTagName('Image');
      const tileSize = Number(elements[0].getAttribute('TileSize'));
      const format = elements[0].getAttribute('Format');

      width = Number(
        elements[0].getElementsByTagName('Size')[0].getAttribute('Width')
      );
      height = Number(
        elements[0].getElementsByTagName('Size')[0].getAttribute('Height')
      );

      const formattedUrl = `${path}_files/{z}/{x}_{y}.${format}`;

      const offset = Math.ceil(Math.log(tileSize) / Math.LN2);

      return resolve({
        url: formattedUrl,
        offset,
        layer,
        imgWidth: width,
        imgHeight: height,
        tileSize
      });
    };

    xhr.send();
  });
}

function run(url, imgWidth, imgHeight, offset, tileSize) {
  const imgCenter = [imgWidth / 2, -imgHeight / 2];

  // Maps always need a projection, but Zoomify layers are not geo-referenced, and
  // are only measured in pixels.  So, we create a fake projection that the map
  // can use to properly display the layer.
  const proj = new ol.proj.Projection({
    code: 'ZOOMIFY',
    units: 'pixels',
    extent: [0, 0, imgWidth, imgHeight]
  });

  const layer = new ol.layer.Tile({
    source: new ol.source.Zoomify({
      url,
      size: [imgWidth, imgHeight],
      tileSize,
      crossOrigin: 'anonymous'
    })
  });

  layer.getSource().setTileUrlFunction(tileCoord => {
    return url
      .replace('{z}', tileCoord[0] + offset)
      .replace('{x}', tileCoord[1])
      .replace('{y}', -(tileCoord[2] + 1));
  });

  const map = new ol.Map({
    layers: [layer],
    target: 'map',
    view: new ol.View({
      projection: proj,
      center: imgCenter,
      zoom: 0,
      extent: [0, -imgHeight, imgWidth, 0]
    })
  });
}

const nwurl =
  'https://openseadragon.github.io/example-images/duomo/duomo.dzi';

loadUrl(nwurl).then(res => {
  const { url, offset, imgWidth, imgHeight, tileSize } = res;

  run(url, imgWidth, imgHeight, offset, tileSize);
});

See also questions close to this topic

  • Openlayers 6 - How can I select vector layer from drop down menu

    On my map, I have an OpenStreetMap tiles in the background and a VectorLayer on top. Now I want VectorLayer to be changed by user via drop down menu. How can I achieve this?

    Here's my HTML drop down menu code:

    <select id="line">
    <option value="1a">Line 1A</option>
    <option value="1b">Line 1B</option>
    <option value="2a">Line 2A</option>
    <option value="2b">Line 2B</option>
</select>

    Here's my map script:

          var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM({
            url: 'tiles/{z}/{x}/{y}.png',
            crossOrigin: null,
            })
          }), linelayergroup
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([100.568, 14.353]),
          zoom: 14,
          minZoom: 14,
          maxZoom: 19,
          extent: [11187608.82, 1608083.02, 11203003.55, 1621297.19],
          constrainResolution: true
        })
      });

    And here's my VectorLayer 1a script:

        var layer1a = new ol.layer.Vector({
        source: source1a,
        style: function(feature) {
            allbusstyle.getText().setText(feature.get('name'));
            return allbusstyle;
        }
    });

    How the code of var linelayergroup should be?, to be the VectorLayerGroup that can be changed by value in the HTML drop down menu. For example, if user select Line 1A in drop down menu, the VectorLayer will change from default to layer layer1a, and if user select another choice, the VectorLayer will change from layer1a to that choice.

    Thank you for your assistance.

  • Preload nearby tiles with OpenLayers

    I'm using Open Layer with hybrid apps and would like to preload nearby tiles to avoid users see how tiles are loaded. OL is super fast and this is a tiles server problem but would like to create the best user experience.

    I have checked these:

    Preload tiles before animation

    Smoother loading of tiles in OpenLayer

    How to precache tiles with OpenLayers for date animation

    Also, I set background color to water color by default when not tiles are downloaded yet.

    But would like to know if there is an all in one solution in Open Layer 6.

  • Add custom panel to Openlayers map

    I've created a map with different Layers from OpenLayers, Openstreetmap and BingMaps.

    Now I want to add a custom panel to the map. I was able to create a panel (dropdown menu), but I'm not able to put it onto the map. I've found several solutions to this online, however none of them worked so far.

    enter image description here

    For example: http://vasir.net/blog/openlayers/openlayers-tutorial-part-3-controls/ or http://jsfiddle.net/4zNH6/. Thank you for all the help. Here is the code from my main.js:

    import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat, toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.2]),
    zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(0, 128, 0, 1)'
    }),
    stroke: new Stroke({
      color: '#000000',
      width: 1.25
    }),
    radius: 15
  })
}));

var element = document.getElementById('search');  
element.addEventListener('keydown', listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function() {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });  
      searchResultSource.clear(); 
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultSource.addFeatures(features);
        if (!searchResultSource.isEmpty()) {
    map.getView().fit(searchResultSource.getExtent(), {
      maxZoom: 18,
      duration: 500
    });
  }
    };
    xhr.send();


  }
}

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
    type: 'base',
    source: new OSM()
}); 

// Statellit
const satellitLayer = new TileLayer({
    source: new XYZ ({
    attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
    attributionsCollapsible: false,
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 30
    })
});

//shape
const parkLayer = new VectorLayer({
    source: new Vector({ 
        url: 'data/park1.geojson',
        format: new GeoJSON()
    })
});

parkLayer.setStyle(new Style({
      fill: new Fill({
      color: 'green'
    }),
    stroke: new Stroke({
      color: 'green',
      width: 1.25
    }),
}));


// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);   
 map.addLayer(parkLayer);   

const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function(event) {
  //contr.style.color = 'ffffff';
  //Andere Layer entfernen
  map.removeLayer(satellitLayer);
  map.removeLayer(searchResultLayer);
   //OSM Layer hinzufügen
  map.addLayer(OSMbaseLayer);
  map.addLayer(searchResultLayer);
});

// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function(event) {
  //Andere Layer entfernen
  map.removeLayer(OSMbaseLayer);
  map.removeLayer(searchResultLayer);
  //Satelliten Layer hinzufügen
  map.addLayer(satellitLayer);
  map.addLayer(searchResultLayer);  
 });

//GPS Location
const GPSsource = new Vector();
const GPSlayer = new VectorLayer({
  source: GPSsource
});
map.addLayer(GPSlayer);


navigator.geolocation.watchPosition(function(pos) {
  const coords = [pos.coords.longitude, pos.coords.latitude];
  const accuracy = circular(coords, pos.coords.accuracy);
  GPSsource.clear(true);
  GPSsource.addFeatures([
    new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
    new Feature(new Point(fromLonLat(coords)))
  ]);
}, function(error) {
  alert(`ERROR: ${error.message}`);
}, {
  enableHighAccuracy: true
});

const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function() {
  if (!GPSsource.isEmpty()) {
    map.getView().fit(GPSsource.getExtent(), {
      maxZoom: 18,
      duration: 500
    });
  }
});

map.addControl(new Control({
  element: locate
}));

    Here is the code from the index.html:

    <!DOCTYPE html>
<html>
  <head>
  <link href="../stylesheet.css" rel="stylesheet">
    <title>Feedback</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>OpenLayers</title>
    <style>
      html, body, .fullscreen {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      .arrow_box {
          position: relative;
          background: #000;
          border: 1px solid #003c88;
      }
      .arrow_box:after, .arrow_box:before {
          top: 100%;
          left: 50%;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
      }
      .arrow_box:after {
          border-color: rgba(0, 0, 0, 0);
          border-top-color: #000;
          border-width: 10px;
          margin-left: -10px;
      }
      .arrow_box:before {
          border-color: rgba(0, 60, 136, 0);
          border-top-color: #003c88;
          border-width: 11px;
          margin-left: -11px;
      }
      .arrow_box {
        border-radius: 5px;
        padding: 10px;
        opacity: 0.8;
        background-color: black;
        color: white;
      }
      #popup-content {
        max-height: 200px;
        overflow: scroll;
      }
      #popup-content th {
        text-align: left;
        width: 125px;
      }

      .locate {
        top: 90px;
        left: 8px;
    }

    </style>
  </head>
  <body>
  <div class="header">
    </div>
            <div class="title">
            <h1>Karte</h1>
    </div>
    <ul id="homebar">
    <li>
    <a href="../home/start_content_grp.htm"> Home </a>
    </li>
    <li> 
    <a href="../projekt/projekt.htm"> Projekt </a>
    </li>
    <li> 
    <a href="../team/team.htm"> Team </a>
    </li>
    <li> 
    <a href="map.htm"> Karte </a>
    </li>
    <li> 
    <a href="../uebungsbeispiele/beispiele.htm"> &Uumlbungsbeispiele </a>
    </li>
    <li>
    <a href="../kontaktformular/formular.htm"> Kontaktformular </a>
    </li>
    <li>
    <a href="../impressum/impressum.htm"> Impressum </a>
    </li>
    <li>
    <a href="../intranet/start_content_grp_intranet.htm"> Intranet </a>
    </li>
    </ul>
    <input type="text" id="search"  placeholder="Adresssuche..."></input>
      <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <div style="margin:20px; margin-top:5px;" class="codebox">
    <dt style="height:25px; text-align: left;">
    <input type="button" value="Layeroptionen" style="width:100px; font-size:12px; margin:5px; padding:5px;" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
    if ( this.value == 'Layeroptionen' ) { this.value = 'Layeroptionen'; } else { this.value = 'Layeroptionen'; };
    return false;"></dt>
    <dd><div class="content" name="spoiler" style="display: none;">
    <div id="control">
    <label class="radio">
        <br><input class="rb" id="OSMbase" type="radio" name="foobar" checked>
        Base-Layer OSM
        </label><br>
        <label class="radio">
         <input class="rb" id="satellit" type="radio" name="foobar">
         Sattelite
        </label>
      </div>
    </div></dd></div>
    <script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script> 
    <div id="map" class="fullscreen">
        <select id="combo">
        <option value="baselayer-osm">Base-Layer OSM</option>
        <option value="sattelite">Sattelite</option>
    </select>
</div>
    <!-- <div class="arrow_box" id="popup-container">
      <div id="popup-content"></div> -->
    </div>
  </body>
</html>
  • Dzi Viewer using CPP

    I am looking for a Deep Zoom Image (DZI) viewer in CPP. Currently, we have a viewer designed in javascript (Open Seadragon), java, and C# for the dzi images. I am looking for the open-source viewer that can be integrated in my CPP application.

  • how to convert dzi files to multi-tile pyramidal tiff format

    In reference to the answer (how to convert dzi (deep zoom) files to full image)

    I am a noob on this topic, please correct if I am wrong.

    I am trying to create a multi-tiled tiff from .dzi (deep zoom image) format, how I am doing is:

    (i) Pick the max level folder.

    (ii) Vertically Stitch all the n columns of m rows (m_n.jpeg, I am referring to the images saved in this format) as png images. So they are occupying quite a considerable amount of space.

    (iii) Finally, I horizontally merge all these vertical png images into a single full image png using pyvips.Image.write_to_file().

    (iv) Finally using vips im_save, I convert the full image png to tiff.

    My concern now is this process is taking almost 2 hours for it to make full image png for 30,000 base_tiles, and also it accounts to 10+ GB of size (Full Image png).

    Is there any better and faster way to do the .dzi to tiff conversion?

  • OpenSeaDragon not displaying multiple images in dzc_output.xml file

    I'm trying to display multiple images with OpenSeaDragon. I used Deep Zoom Composer to create the image files and it produced the following XML file (abridged):

    dzc_output.xml:

    <?xml version="1.0" encoding="utf-8"?>
<Collection MaxLevel="8" TileSize="256" Format="jpg" NextItemId="5" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">
  <Items>
    <I Id="0" N="0" Source="dzc_output_images/ft1.xml">
      <Size Width="825" Height="584" />
      <Viewport Width="5.2402050398801272" X="-0" Y="-0" />
    </I>
    <I Id="1" N="1" Source="dzc_output_images/ft2.xml">
      <Size Width="824" Height="583" />
      <Viewport Width="5.2375806686733934" X="-1.0500455705877254" Y="-0" />
    </I>
    <!--3 more images not shown as not necessary-->
  </Items>
</Collection>

    I created a very simple HTML page to display the viewer (I plan to use Django for the final project). I created the viewer with the following code:

    var viewer = OpenSeadragon({
                id: "openseadragon1",
                prefixUrl: "openseadragon/images/",
                tileSources: "imagesources/dzc_output.xml",
                sequenceMode: true
            });

    I'm using python -m http.server to serve the folder that the html page is in. It worked fine for single images. However, with this dzc_output.xml file containing multiple images, the viewer displays "Unable to open [object Object]: Unable to load TileSource" when I load the page. Scrolling through the images produces this error: "Unable to open [object Object]: HTTP 404 attempting to load TileSource"

    I'm not sure what the problem is here. Any help would be good.

  • How to render previous resolution tiles while waiting for new tiles when zoomed out in open layers?

    I am using openlayers to render high resolution images in browser. I was able to render with the help of this answer. But when I zoom out very quickly to the last resolution, the tiles are disappearing while waiting for the new tiles to load. Instead I want to zoom out the previous tiles itself until I get the new tiles.

    I found this stackoverflow question. So I set loadTilesWhileAnimating and loadTilesWhileInteracting to true. I think this just makes the call to get new tiles sooner. So the time taken to get the new tiles has reduced compared to before when these options are not set (meaning the tiles disappeared for lesser time compared to before) but they still disappear.

    This is the code you can use to reproduce the issue.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Zoomify
        </title>
        <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
        <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
        <style>
            html, body, .map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script>
                var imgWidth = 54*256 + 206;
                var imgHeight = 40*256 + 41;

                var zoomifyUrl = 'https://openseadragon.github.io/example-images/duomo/duomo_files/{z}/{x}_{y}.jpg';

                var layer = new ol.layer.Tile({
                    source: new ol.source.Zoomify({
                    url: zoomifyUrl,
                    size: [imgWidth, imgHeight],
                    crossOrigin: 'anonymous'
                    })
                });

                layer.getSource().setTileUrlFunction(function(tileCoord) {
                    return zoomifyUrl.replace(
                    '{z}', tileCoord[0]+8
                    ).replace(
                    '{x}', tileCoord[1]
                    ).replace(
                    '{y}', -(tileCoord[2]+1)
                    );
                });

                var tileSize = ol.size.toSize(layer.getSource().getTileGrid().getTileSize(0));

                layer.getSource().setTileLoadFunction(function(imageTile, src) {
                    var img = document.createElement('img');
                    img.onload = function() {
                    var width = img.naturalWidth >= tileSize[0]-1 ? tileSize[0] : img.naturalWidth;
                    var height = img.naturalHeight >= tileSize[1]-1 ? tileSize[1] : img.naturalHeight;
                    var canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);
                    imageTile.getImage().src = canvas.toDataURL();
                    };
                    img.crossOrigin = 'anonymous';
                    img.src = src;
                });

                var extent = [0, -imgHeight, imgWidth, 0];

                var map = new ol.Map({
                    layers: [layer],
                    target: 'map',
                    view: new ol.View({
                        // adjust zoom levels to those provided by the source
                        resolutions: layer.getSource().getTileGrid().getResolutions(),
                        // constrain the center: center cannot be set outside this extent
                        extent: extent
                    }),
                });
                map.getView().fit(extent);
            </script>        
    </body>
</html>

    Copy paste the above code and open the html in browser. Try to zoom out as quickly as possible. Then you'll see that tiles disappear for sometime before reappearing. If you check in network calls, set the type to all. Then you'll see that once you complete zooming out (as quickly as possible), a call is made to get 0_0.jpg. While that call is still running the tiles disappear and reappear as soon as it's done. Now you can add loadTilesWhileAnimating: true, and loadTilesWhileInteracting: true in map creation options (map = new ol.map({})). Now you'll see that it still disappears for a fraction of second and the api call to get 0_0.jpg is made sooner. I don't want the tiles to disappear. I want to zoom out the previous tiles until I get the new ones.

  • Zoomify: Maximum zoom-in scale / detail

    I'm working on zoomify on large files with pixel perfect details. I wonder if there's a workaround to have zoomify zoom-in beyond the 1:1 scale? Currently the max toom level is 1:1 where you can't zoom in further than your screens resolution. I want to have a pixel in the zoomify image be as wide as a finger, for example.

    I scouted their FAQ and I tried fiddling with the source code to no avail.

    Any help is highly appreciated, thanks!