Challenges with Displaying Oversized Images in Mapbox GL JS

I have encountered an issue while using Mapbox GL JS to overlay satellite data over Texas. Despite using accurate geo-coordinates, the image does not align correctly over the state. To resolve this problem, I had to divide the image into 6 separate long images spanning east to west and stack them vertically as individual overlays :

https://i.sstatic.net/keSNB.jpg

Dividing the image in this manner yielded the desired outcome :

https://i.sstatic.net/6BQnh.jpg

The placement of the clouds was precisely perfect when using these 6 stacked image overlays (each covering 2 degrees in height). However, creating multiple overlays posed processing constraints and was not an ideal solution.

When I attempted to merge all the images into a single large picture and overlay it with the same coordinates, the result was inaccurate. Even though the content of the image remained unchanged, the coastline highlights showed misalignment. This discrepancy would be unacceptable for my target audience of storm chasers. Despite trying manual adjustments, days were spent troubleshooting this issue, ultimately leading me to attribute it to Mapbox. Other potential causes such as software bugs were ruled out.

Here is the faulty output achieved with one overlay compared to the vertically split approach :

https://i.sstatic.net/zLXKY.jpg

I am seeking insights into what might be causing this problem and any possible solutions as I am currently at a loss.

javascriptmapboxgeospatialmapbox-gl-js

Answer №1

Although I resolved this issue some time ago, it seems like many others are still facing the same problem and could benefit from a solution shared here. The underlying problem pertains to projection. It is crucial that images are accurately sliced and diced based on coordinates that align with the projection of the map they will be overlaid on. In the context of Mapbox, web mercator is utilized, so images need to be reprojected to EPSG:3857.

One useful tool for converting images (such as geoTIF files) to this projection is GDAL (). A typical command using GDAL tools to convert an image would resemble the following:

gdalwarp -t_srs EPSG:3857 input.tif input-projected.tif

Hopefully, this explanation sheds light on the matter. Understanding these concepts is considered fundamental knowledge within the GIS community. If you are planning to work with similar data, my recommendation would be to invest time in learning basic GIS tools and their functionalities. It will undoubtedly prove beneficial in the long run.

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

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

javascriptjqueryhtmlcss

What is the best way to specify the CSS :hover state within a jQuery selector?

I am trying to change the background color of a div element when hovered using jQuery, but for some reason the following code is not working as expected: $(".myclass:hover div").css("background-color","red"); Can someone provide guidance on how to achiev ...

javascriptjqueryhtmlcss

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface

Challenge with JSON stringification and JSON decoding

Looking at the HTML code: <input type="hidden" name="test[]" id="test" value= "" /> For the JavaScript part: jQuery(document).on('click', '#target', function () { var jsArr = ["val1", "val2", "val3"]; jQuery('input ...

javascriptphpjson

Tsyringe - Utilizing Dependency Injection with Multiple Constructors

Hey there, how's everyone doing today? I'm venturing into something new and different, stepping slightly away from the usual concept but aiming to accomplish my goal in a more refined manner. Currently, I am utilizing a repository pattern and l ...

javascriptnode.jstypescriptdependency-injectiontypeorm

Guide: Initiating an action in NuxtJs

I am attempting to trigger an action in my Vue component from my Vuex store. Below is the content of my aliments.js file in the store: import Vue from 'vue'; import Vuex from 'vuex'; import axios from 'axios'; Vue.use(Vuex, ...

javascriptvue.jsvuexnuxt.js

Search for elements with a specific substring in their class names using the querySelectorAll() method

I'm working with a custom component in app.js return ( {cards.map((index) => { return <Card key={index} /> ) Within the Card component, I assigned a specific className return ( <ListItem id="root" className="find-card"&g ...

javascriptreactjsmaterial-uireact-hooks

Encountering issues with app functionality following update to Ionic RC4 version

Since upgrading from Ionic rc3 to rc4, I've been facing difficulties running my app smoothly. The app compiles without any errors when I use ionic-app-scripts build --prod, but when I try to run it on my iPhone, all I get is a blank screen and an err ...

javascriptiosangularionic2angular2-aot

Will the package versions listed in package-lock.json change if I update the node version and run npm install?

Imagine this scenario: I run `npm install`, then switch the node version, and run `npm install` again. Will the installed packages in `package-lock.json` and `node_modules` change? (This is considering that the packages were not updated on the npm regist ...

javascriptnode.jsnpmnpm-installpackage-lock.json

What could be causing the issue with npm install packages not functioning properly?

Currently, I am in the process of setting up and deploying a particular git repository locally: https://github.com/maxie112/gatsby-ecommerce-theme I am strictly adhering to the instructions provided for Mac OS. Here are the encountered error logs; maxden ...

javascriptnode.jsreactjsnpm

Struggling to reset the jscrollpane scroller

When using jscrollpane in my horizontal division to enable scrolling, I encounter an issue when loading data with ajax. The scrollbar doesn't appear until the browser width is changed. To address this, I currently utilize the following method to rein ...

javascriptajax

Displaying AJAX response with AngularJS

My Angular script structure is shown below: var myapp = angular.module("Demo",["ngRoute"]) .config(function($routeProvider){ $routeProvider .when ...

javascriptjqueryangularjsajax

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

In order to dynamically add a class to a specific div element higher up the DOM hierarchy when a radio button is clicked, I am in need of assistance. There are multiple instances of these div elements with different radio buttons, so it is crucial that on ...

javascriptjqueryhtml

Implement an event listener on the reference obtained from the React context

Within the React context provider, a ref is established to be utilized by another component for setting a blur event listener. The issue arises when the blur event fails to trigger the listener. The following is a snippet of code from the context provider ...

javascriptreactjsreact-hooksaddeventlistener

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

javascriptjqueryhtmlcssrepaint

transferring the value of a textbox into another textbox

I am trying to extract the value from one textbox and transfer it to another textbox. Here is my current code: <input type="text" value="Keyword" id="one" /> <input type="text" value="Search" id="two" /> <a href="#" id="btn">button</ ...

javascriptjquery

Leveraging jQuery.ajaxSetup for customizing beforeSend function and modifying outgoing data for AJAX requests

My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...

javascriptjqueryajax

Unconventional way of assigning class properties in Typescript (Javascript): '?='

Recently, I came across the ?= assignment expression within a class property declaration. Can anyone provide some insight into what this means? I am familiar with the new Optional Chaining feature (object?.prop), but this particular syntax is unfamiliar t ...

javascripttypescriptexpression

Issue with Next.js hook: Uncaught TypeError - Unable to define properties of undefined (setting 'type')

Encountered an error while attempting to build my nextjs app. Strangely, this error wasn't present in the previous version of the app. I didn't make any changes to the config files, just added a few animation libraries and that's all, along ...

javascriptreactjstypescriptwebpacktypes

Generate final string output from compiled template

Check out this template I created: <script type="text/ng-template" id="validationErrors.html"> <div id="validationErrors"> <div id="errorListContainer"> <h2>Your order has some errors:</h2> ...

javascriptangularjs