Transform the xyz coordinate of a specific tile to its corresponding longitude and latitude values

I am trying to create a map using openlayers, but I want to center it in a unique way. For example, I have a z/x/y coordinate of 12/2045/-1362. Can someone help me convert this to longitude/latitude? It's the complete opposite of this: How to get X Y Z coordinates of tile by click on Leaflet map

I find it challenging to understand the logic in the link above and reverse engineer it. If anyone has experience or a ready-made formula for this, I would greatly appreciate it. Thank you.

Eventually, I will use this to render the center of my map like this:

var z = 12;
var x = 2045;
var y = -1362;

function convertXYZtoCoor(z, x, y) {
    // code here
    return [lng, lat];
}

var coor = convertXYZtoCoor(z, x, y);
var view = new ol.View({
                    center: ol.proj.transform(
                        [coor[0], coor[1]], 'EPSG:4326', 'EPSG:3857'),
                    zoom: z
            });

var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                target: 'map',
                view: view
          });

I hope my question is clear, thank you.

Edit: Added code

Answer №1

function calculateTileExtent(tileCoordinates){
    var zoom = tileCoordinates[0];
    var x = tileCoordinates[1];
    var y = tileCoordinates[2];
    var tileGridOrigin = getTileGridOrigin(zoom);
    var tileSizeAtResolution = getTileSize(zoom) * getResolution(zoom);
    return [
        tileGridOrigin[0] + tileSizeAtResolution * x,
        tileGridOrigin[1] + tileSizeAtResolution * y,
        tileGridOrigin[0] + tileSizeAtResolution * (x + 1),
        tileGridOrigin[1] + tileSizeAtResolution * (y + 1)
    ];
}

Try it out yourself at http://jsfiddle.net/eurx57s7/

Remember (borrowed from the ol3 example, but relevant here too): The tile coordinates follow ol3's normalized system (origin bottom left), not OSM's tile coordinate system (origin top left)

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

The UI-Grid feature in Angular, when set to right-to-left (RTL) mode, incorrectly displays data in the opposite order compared to the

In my _Layout.cshtml file, I have a CSS that sets all UI controls to right-to-left direction using the following code: * { direction: rtl; } Currently, I am working with Angular's UI-Grid, and in RTL Localization, the ...

What is the best way to display data in the User Interface when data is being received through the console in AngularJS?

I have created an HTML file and the corresponding controller logic for this page. I can see the data in the console, but it's not displaying on my UI. <div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController"> < ...

Display a thumbnail image using a v-for loop

Looking for help with implementing a photo preview in my code using BootstrapVue. The Vue devtools show that the form-file contains the image, but my 'watch' isn't functioning properly. Any assistance would be greatly appreciated! Here is ...

Error: The property 'rows' cannot be read because it is undefined

While working through the steps outlined in Getting started with Postgres in your React app, specifically when processing and exporting the getMerchants, createMerchant, and deleteMerchant functions, I encountered an error that says: "TypeError: Cannot rea ...

Injection of dependencies in ui.bootstrap

For some reason, the ui.bootstrap dependency injection is causing all the content on my single page to disappear. There are no errors showing up in the console log, and I'm not sure why it's happening. I followed all the necessary steps, but I th ...

How to locate the position of an element within a multi-dimensional array using TypeScript

My data structure is an array that looks like this: const myArray: number[][] = [[1,2,3],[4,5,6]] I am trying to find the index of a specific element within this multidimensional array. Typically with a 1D array, I would use [1,2,3].indexOf(1) which would ...

Utilize the power of AJAX and Laravel to seamlessly upload an Excel file

I am currently facing an issue with importing an Excel file using AJAX and Laravel in my application. The form of excel import is embedded within another form and I have observed that the error handling is not displaying the error messages correctly on the ...

Utilizing Selenium in Python to Scroll within Inner Div: A Guide

Curious about how to scroll through the chats on web.whatsapp.com? Check out the pseudo-code below: recentList = driver.find_elements_by_xpath("//div[@class='_2wP_Y']") driver.execute_script("window.scrollTo(0, 500);") I'm eager to find a ...

Why aren't the validations being set when creating Angular forms using formControl.values?

I had to structure the form in a specific way in my app.ts file -> courseNameControl = new FormControl("", [Validators.required,Validators.minLength(2)]); contentControl = new FormControl("", Validators.required); form = { cours ...

Ways to merge several getServerSideProps functions

Within my project, I have two important pages: index.js and other.js. In index.js, there exists a crucial method known as getServerSideProps: export async function getServerSideProps(context) { //code here } The challenge arises when I realize that I ...

Creating a variable to store the data retrieved from a package

Imagine you have a functioning code snippet like this: const myPackage = require('myPackage'); myPackage.internal_func(parameter).then(console.log); This outputs a JSON object, for example: { x: 'valX', y: 'valY' } ...

How can you toggle the visibility of a text based on the selection of a jQuery radio button?

Is it possible to dynamically enable or disable a field based on the selection of a radio button? Here are the rules: The field should only be active when the "Inactive" radio button is selected Check out the code snippet below for reference: Radio B ...

Retrieve the data from the file input field

I am attempting to dynamically change the value of an input type text based on the input type file selection. Despite my efforts with the code below, I have been unable to find a solution to this issue. HTML: <input type="text" name="imagem" class="fi ...

Trouble organizing a collection of destinations based on their geolocation and proximity

To address this issue, my approach has been to feed variables into the value attributes of an option list and then sort it based on these values. When manually assigning values, everything works smoothly, for example: <option id="link1" value="1">A& ...

Changing the bootstrap popover location

I'm looking to customize the position of a Bootstrap popover that appears outside of a panel. Here's my setup: HTML: <div class="panel"> <div class="panel-body"> <input type="text" id="text_input" data-toggle="popover ...

Retrieve ALL information from a third-party API request with a limit of 1000 calls

Challenge: Implementation of a third-party API call using Node.JS. The API link restricts the number of users per call to 1000, with an option to retrieve the next set by passing parameters in the URL (?firstResult=1001&maxResults=1000&orderBy=NAME ...

The attribute 'constructor' is not found on the 'T' type

I'm currently working on a project using Next.js and TypeScript. I've come across an issue where TypeScript is giving me the error "Property 'constructor' does not exist on type 'T'" in my generic recursive function. Here&apo ...

Getting the desired value from a CreatableSelect in React can be achieved by following these steps:

I have a form that includes a React library component called React Select. I'm struggling to retrieve the target value of this input field. Here's my code snippet: # CreatableSelect tag <CreatableSelect className={Astyle.selectInput} i ...

Tips for extracting individual lines from a Buffer using streams?

There seems to be an issue with the file stream I'm receiving from STDIN where line breaks disappear within the buffers. I am looking for a way to process and parse these lines using the Stream approach. Can someone help me out? util.inherits(Parse ...

Angular promise not accurately retrieving data from JSON API

Last Updated: 02/12/2015 After reading through the comments, I discovered that the issue stemmed from an Angular module modifying the object. By using toJSON, I was able to pinpoint the problem. I recently encountered a perplexing issue. I have a service ...