Showing Stationary Pictures at Full Size in OpenLayers

I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variables. Despite reading numerous forum entries, I seem to be misunderstanding something crucial.

You can view a demo where incorrect image sizes are being displayed. The reference image is 128x128 pixels, yet the displayed image appears slightly larger at zoom level 0.

The example provided by OpenLayers here works perfectly when integrated into my demo. It suggests that setting the extent variable as [0,0,wid,len] and zoom: 2 should result in 100% display. However, this approach does not work consistently for all images.

Can anyone guide me on how to ensure that static images are reliably shown at 100% of their pixel size?

Thank you in advance for your assistance.

var extent = [0,0,128,128]  // Image size is 128x128 px
var projection = new ol.proj.Projection({
    code: 'local_image',
    units: 'pixels',
    extent: extent
});

var map = new ol.Map({
    target: 'map',
    view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 0,
    }),
    controls: [],
});

var im_layer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        url: 'http://img4.wikia.nocookie.net/__cb20071014061100/freeciv/images/1/1c/Crystal_128_penguin.png',  // Image size is 128x128 px
        projection: projection,
        imageExtent: extent
    })
})
map.addLayer(im_layer)
javascriptcssimageopenlayers-3

Answer №1

After much research and testing, I have discovered a solution to this issue. Instead of relying on the "zoom" variable in the map view, it is better to utilize the "resolution" parameters.

By incorporating the following adjustments along with the aforementioned change, you will achieve an image displayed at 100%:

var map = new ol.Map({
    view: new ol.View({
        resolution: 1,        // crucial for 100% image size!
        maxResolution: 2,     // should be greater than or equal to 1
        //minResolution: .5,  // can also be adjusted if needed
        //zoom: 0,            // avoid using this parameter
        ...
    })
    ...
})

You can view the updated demonstration on this fiddle link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing data retrieved from an asynchronous call in AngularJS to a variable

Here is the code where I am attempting to utilize promise to store data from an asynchronous call in a variable, but it's not functioning as expected. I am relatively new to promises and after some research, I learned that promises can be helpful in s ...

javascriptangularjsasynchronousdeferredangular-promise

Typescript array iteration using dual parameters

I seem to be struggling with the logic behind this seemingly straightforward iteration question. My task involves iterating through an array of data based on id and code, removing data only when the code is not associated with the given id's. Let&ap ...

javascriptarraysangulartypescript

Choosing the perfect gradient shade for a progress bar canvas illustration: Tips and tricks

I am trying to customize the appearance of the usage bar in my Google Chrome extension by utilizing the features of the HTML5 canvas. Currently, the bar consists of a basic DIV element: <div id="idUsgBar"></div> accompanied by this CSS stylin ...

javascripthtmlgoogle-chromecanvas

Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

I've run into an issue trying to incorporate LocalStorage with the buttons that change colors as themes in JavaScript. I'm new to coding and eager to add this feature to my personal blog. $(document).ready(function () { $(".header--theme-button ...

javascripthtmlcsslocal-storage

Guidance on loading JSON array information into highcharts using AngularJS

I am working on a project in Play Framework (play-java) where I need to display a bar graph using Highcharts. The Java API returns data in JSON format with a field called 'name' containing values like 'Data', 'Gadgets', ' ...

javascriptangularjshighcharts

Incorporate information into a JSON structure within SAPUI5

While diving into SAPUI5, I decided to challenge myself by creating a basic form. Unfortunately, my attempts are falling short as the new entry I'm trying to add to my JSON model isn't showing up in the file when I run my code. No error messages ...

javascriptjsonxmlsapui5

Transmitting flawless data to the Angular controller

In my Angular application, I have some checkboxes that are pre-checked and in the ng-pristine state. How can I receive these inputs in my controller without marking them as dirty when the form is submitted? <input type="checkbox" name="c1" name="favor ...

javascripthtmlangularjsforms

Navigating through cards in HTML: A guide to filtering techniques

I'm currently in the process of developing a platform that enables users to browse through different profiles based on their first names. I've attempted to utilize bootstrap's "data-title" for searching purposes, but unfortunately, it's ...

javascripthtml

Clear the cache of a query in React Query without having to fetch it again

Within my React app, I have implemented React Query in the following manner: const { data, status } = useQuery(key, queryFunc, { staleTime: 1 * 60 * 1000 }); In order to invalidate a specific key in the cache based on the value of the data, specifical ...

javascriptreactjsreact-query

Using Angular JS to manage multiple views with a single controller

Would it be considered best practice to use one controller, yet have two distinct HTML file templates that present the same data in different formats? Essentially, I require a slightly altered template for displaying content in a modal dialog and another ...

javascriptangularjsdesign-patterns

When a link is right-clicked, the window.opener property becomes null

Currently, I am utilizing the window.opener property in JavaScript to update the parent window from a child window. The parent window simply consists of a table with data and a link to open the child window. When the child window is launched, a JavaScript ...

javascripthtmljspwindow.openercross-origin-opener-policy

In JavaScript, when using the fetch function with JSON, it is possible to skip the

Here's an example of fetching review data from within a 'for loop': fetch('https://api.yotpo.com/products/xx-apikey-xx/{{product.id}}/bottomline') In this case, some products may not have reviews and will return a 404 response. Th ...

javascriptjson

Retrieving Angular URL Parameters Containing Slashes

I'm currently in the process of developing a single page angular application. This app retrieves a token from the URL and then sends it to an API. At the moment, my URL structure is as follows: www.example.com/?token=3d2b9bc55a85b641ce867edaac8a9791 ...

javascriptangularjsurlroutes

Step-by-step guide on building an admin dashboard for your React application

Recently, I built an online store website using React. Currently, the data is being loaded from a local .json file. However, I am in need of creating an admin panel to allow the site administrator to manage and update cards and data on their own. Is there ...

javascriptreactjsdatabasewordpressexpress

What could be the reason for my function failing to return true?

I have a function that can check if a script is loaded: function checkURLExistence(url){ $.ajax({ url: url, success: function(data){ //alert(url + ' exists'); console.log(url + ' exists'); return ...

javascriptjquery

Using $watch to monitor the existence of a variable within the AngularJS scope

I'm working on a directive that displays alerts, and I want to set up a timeout function to run whenever the 'show' variable changes. How can I achieve this? When I tried invoking the link function, all the variables - show, message, and ty ...

javascriptangularjsangularjs-directiveangularjs-watch

React Issue: Footer not staying attached at the bottom of the page

I'm currently developing a website with react, but I'm struggling to keep the footer at the bottom. When there isn't enough content, the footer ends up right after the content instead of staying at the bottom. I've tried various solutio ...

htmlcssreactjsjsx

Tips for creating a custom script in my React Native application

My React Native app requires a script to generate static files during the release process. The app is a game that utilizes pre-computed boards, which are resource-intensive to compute. Therefore, I am developing a script that will create these boards and s ...

javascriptnode.jsreactjstypescriptreact-native

utilizing Javascript to insert a class with a pseudo-element

Witness the mesmerizing shining effect crafted solely with CSS: html, body{ width: 100%; height: 100%; margin: 0px; display: table; background: #2f2f2f; } .body-inner{ display: table-cell; width: 100%; height: 100%; ...

javascripthtmlcss

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width https://i.sstatic.n ...

javascriptcssbrowsercross-browserpixel