In my Angular TypeScript web app, I am working with an array containing lat/lng coordinates.
const myArr = [
[lat, lng],
[lat, lng],
...500 lines of data
]
I would like to convert this array into a URL query parameter for users to share or revisit. Is there an algorithm that can hash the data so it's formatted appropriately for a URL? While one-way hashing using SHA-256 is common for passwords, are there two-way hashes more suitable for this scenario?
?mapSelection=myArrHash
After reviewing your inquiries, my suggestion would be to utilize rison-lib
npm install rison-lib
This particular library is designed to handle encoded strings that are well-suited for your specific application needs.
Let's engage in some quick calculations:
A latitude and longitude coordinate typically consists of 2 digits for the integer part, an optional negative sign, and around 3 to 5 digits for the fractional part, depending on precision. Let's estimate it as 7 characters per coordinate, with two coordinates per point and a separator character. With approximately 500 points, that totals to (7 + 7 + separator) * 500 = 7500 characters. While this may fit within the limit for certain browsers (assuming your domain isn't excessively long), there's a risk of exceeding the limit, especially if my assumptions are slightly optimistic.
Moreover, if you intend for people to share these links, having URLs as lengthy as multi-page articles might not be ideal.
Given these constraints, it seems unlikely that this approach will succeed. Your best bet is to reduce the number of latitude/longitude pairs (500 is quite substantial) and/or decrease the level of precision. As illustrated in the XKCD comic linked here: [link], simplifying the data may be necessary.
For instance, if only one significant digit is needed using Number.prototype.toFixed(1) (such as for city-to-city routes) and eliminating the decimal point (which can be compensated for during deserialization by dividing by 100) could bring the average down to 3 to 4 characters per coordinate, or roughly 7 characters per pair. If we halve the number of required pairs to 250, we end up with 250 * (7 + separator) = 2000 characters. This may still exceed limits, but it's a step in the right direction.
Lastly, ensure you choose a URL-friendly separator to avoid additional character inflation through percent encoding.
In conclusion, encoding such vast amounts of data into a URL may prove impractical. Nonetheless, this analysis should help in exploring ways to compress the information effectively.
I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...
After executing npm install @types/js-cookie@^2.2.0, an error occurred: npm install @types/js-cookie@^2.2.0 npm ERR! code E401 npm ERR! Unable to authenticate, need: Basic realm="https://pkgsprodsu3weu.app.pkgs.visualstudio.com/" npm ERR! A com ...
I have a ReactJS project where I am utilizing the continuous slider component from material-ui. My goal is to be able to control the slider's movement by clicking on a play button to start it and stop button to halt it. Below is the code snippet of th ...
I am facing issues displaying newly uploaded images in my Vue 3 project with Vite 4 on production after building. Despite trying various code snippets from the internet, I have not been successful so far. Specifically, I am attempting to display a user&apo ...
I am encountering an error that says 'unexpected identifier' and I can't pinpoint the cause of it. This is how I declared 'myData' var myData = { Id: @Model.Id, JobId: @Model.JobId, ItemId: @Model.ItemId, //error on this l ...
Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...
Currently, I am working on a web application using Express, MongoDB, and Handlebars as the templating engine. In this app, there is a form where users can create their unique usernames. I want to implement a feature where a tooltip pops up at intervals to ...
Hey there! I've run into a bit of a roadblock that I'm struggling to overcome. I know that I need to incorporate some JavaScript to solve this issue, but I'm having trouble grasping how to do so. Here's the script I'm working with: ...
In my server.js file, I am attempting to pass an Express response object to a different module. Here is how I have implemented it: const room = require('../controller/rooms_controller') app.post('/rooms', function(req, res){ var na ...
After successfully deploying my application on Heroku and setting up file serving using Express Js, I encountered a CORS issue when sending requests from the frontend (Angular). This problem only occurs with the route for sending files. Below is the Expre ...
Having trouble triggering a dropdownlist event. The dropdown in question: asp:dropdownlist id="ddlhello" Runat="server" AutoPostBack="True" onchange="javascript:return ChangeHeader();" An associated selectedindex change event has been added in the code ...
I have a CARD type that can be either a TEXT_CARD or an IMAGE_CARD: declare type TEXT_CARD = { type: "paragraph" | "h1" | "h2"; text: string; }; declare type IMAGE_CARD = { type: "img"; src: string; orient ...
I have implemented some visually appealing "checkboxes" using li, span, and bootstrap glyphicon elements. These checkboxes display an active state when checked by adding the .active class. Upon activation of the active class, a hidden div beneath the boot ...
Currently working on an Angular Ionic project with Firestore and encountering a problem. Here is the code snippet that I am struggling with: handler: data => { firebase.firestore().collection("categories").doc(`${data.name}`).get() .then((ds) ...
Having some trouble with a test function that uses two stubs. The stubs seem to be working fine, as I can see the spy objects inside when I console.log res.json or next. However, the spy is not being called when I make the assertion. The error message read ...
When I use the fetch() request, a JSON file is displayed. Here's an example of what I receive from the database: [ { "id": 3086206, "title": "General specifications" }, { "id": 3086207, "title": "Features ...
I have three different models and I need to fetch information from a MongoDB document based on sex, race, and age. The issue is that the find method operates asynchronously. How can I handle this situation effectively? Sex.find(function(err, sexModels) ...
Before this gets closed as a duplicate, I have searched through numerous threads on the forum that do not address my specific question. Please take the time to read. Here is the scenario: when a user clicks a button, JavaScript needs to validate whether t ...
I followed the example code for an interceptor from the Angular HTTP documentation, but I am having trouble getting the "requestError" and "responseError" functions to trigger. The "request" and "response" functions are working as expected. myApp.config([ ...
I am looking to implement a feature where clicking on a row in my table will load a specific component. In order to test this functionality, I have created a simple alert that pops up when a row is clicked displaying the message THIS ROW HAS CLICKED. This ...