|
I'm working on a project in which i'm capturing map screenshot (using dom-to-image library) and sending it to an external api which is returning back some co-ordinates(x,y,w,h) after processing the sent image. These co-ordinates(rectangles) i'm trying to draw on leaflet.
As the captured image size is bigger than width and height of captured area (don't know why), I need to do scaling the co-ordinates.
Now the problem is Leaflet rectangles are not drawing on accurate position which external API is returning.
However, I'm sure that the external API is returning correct co-ordinates (x,y,w,h) with correspond to send image's width & height.
Something wrong i'm doing on scaling coordinates.
Below is the code snippet i'm trying:
domtoimage.toPng(document.querySelector("#map"))
.then(function (dataUrl) {
var boundsOnly = map.getBounds();
let topLeft = boundsOnly.getNorthWest();
let topRight = boundsOnly.getNorthEast();
let bottomLeft = boundsOnly.getSouthWest();
let bottomRight = boundsOnly.getSouthEast();
var currBBOXpoints = { x1y1: map.latLngToLayerPoint(topLeft), x2y2: map.latLngToLayerPoint(topRight), x3y3: map.latLngToLayerPoint(bottomRight), x4y4: map.latLngToLayerPoint(bottomLeft) };
var pW = currBBOXpoints.x2y2.x - currBBOXpoints.x1y1.x;
var pH = currBBOXpoints.x3y3.y - currBBOXpoints.x1y1.y;
currBBOXpoints.pW = pW;
currBBOXpoints.pH = pH;
var i = new Image();
i.onload = function () {
$.ajax({
type: 'post',
url: '/externalapi',
data: JSON.stringify(dataUrl),
contentType: "application/json",
dataType: "json",
success: function (resultData) {
resultData["iW"] = i.width;
resultData["iH"] = i.height;
resultData["currBBOXpoints"] = currBBOXpoints;
drawRects(resultData);
}
});
};
i.src = dataUrl;
});
function drawRects(rectData) {
var scale = Math.max(rectData.currBBOXpoints.pW / rectData['iW'], rectData.currBBOXpoints.pH / rectData['iH']);
var shifted_x = rectData.currBBOXpoints.pW / 2 - rectData['iW'] / 2 * scale;
var shifted_y = rectData.currBBOXpoints.pH / 2 - rectData['iH'] / 2 * scale;
rectData.od.forEach(rc => {
var modifiedX = Number(rc['x']) * scale + shifted_x;
var modifiedY = Number(rc['y']) * scale + shifted_y;
var modifiedW = (modifiedX + rc['w'])
var modifiedH = (modifiedY + rc['h'])
let point3 = map.layerPointToLatLng(L.point(modifiedX, modifiedY));
let point4 = map.layerPointToLatLng(L.point(modifiedW, modifiedH));
var rectBounds = [[point3.lat, point3.lng], [point4.lat, point4.lng]];
var boundingBox = L.rectangle(rectBounds, { color: "yellow", weight: 1, name: "rect", fillOpacity: 0.10 });
map.addLayer(boundingBox);
});
}
|
|
|
|
|
Maybe it has something to do with the monitors screen resolution, dpi, 100% vs 125% view magnification.
When you draw an image is say Illustrator, at 100 x 100, it's 100 pixels x 100 pixels. But when you output that Illustrator file to JPEG or PNG, and then load it up, we think it's still 100 x 100, but it may actually be smaller or larger on the screen.
look at the scale, try a 1 to 1 scale manually.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
let sum = () => {
a=prompt();
b=prompt();
return a+b;
}
console.log(sum());
I don't understand why the hell concatenate two numbers instead of sum them. Less understand why only a summary is a problem and multiply, extraction, dividing is OK. Can you help me please?
|
|
|
|
|
Most likely because the prompt returns a string rather than an integer. You need to convert the input to integers with parseInt :
a = parseInt(prompt());
b = parseInt(prompt());
|
|
|
|
|
Thank you! I'm very grateful
|
|
|
|
|
|
let object_literal1 ={
fullName : "shanu1",
name : () => {
return this.fullName
},
greeting : (message) => console.log(message + " "+ this.name())
}
object_literal1.greeting("Welcome")
I want to access the value of object literal's property(here fullName) inside the object literal's function(here greeting). But while doing so I am getting error. Please let me know where I am going wrong and how to do that?
|
|
|
|
|
Member 13954890 wrote: But while doing so I am getting error. What is the error?
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Same question as below with different wording. Which line errors and what error?
|
|
|
|
|
greeting : (message) => console.log(message + " "+ this.name())
^
TypeError: this.name is not a function
|
|
|
|
|
|
The "function" version works so just use it.
|
|
|
|
|
let person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
}
console.log(person.fullName())
When I am using arrow function here then I am getting undefined undefined as my output. Could anyone please let me know why this is happening. Below is my code with arrow function.
let person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : () => {
return this.firstName + " " + this.lastName;
}
}
console.log(person.fullName())
|
|
|
|
|
Arrow functions do not have access to this. They are not meant to be used the way you are doing here.
JavaScript Arrow Function[^]
Quote: with arrow functions there are no binding of this.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
I am in the process of building a website in Squarespace, I am using Javascript to create a multi-lingual website in English and French. I differentiate between English and French using the URL/Slug
Example
www.websitename.com/en/home
or
www.websitename.com/fr/home
Everything is translating, almost. I am having issues with the footer translating.
Here are some images
https://i.stack.imgur.com/rLjn1.png[^]
https://i.stack.imgur.com/ruE24.png[^]
https://i.stack.imgur.com/Bz1cx.png[^]
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var defaultLanguage = 'en';
var lang = location.pathname.split("/")[1];
var defaultClass = 'lang-'+defaultLanguage+'';
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
if (lang == "" || lang.length > 2 ){
var lang = defaultLanguage;
}
$('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
var langType = $(this).attr('href').split("/")[1];
var multiLanguageClass = 'multilanguage lang-' + langType + '';
if (undefined !== langType && langType.length <= 2)
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
});
$('nav button').each(function () {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
if (undefined !== langTypeFolder && langTypeFolder.length <= 2)
$(this).addClass(multiLanguageClass);
});
if (lang == "fr") {
$('a[href="/"]').attr("href", "/fr/home/");
}
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');
$('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
$('body').prepend('<div class="language"><a href="/en/home" class="lang-en"></a> <a href="/fr/home/" class="lang-fr"></a></div>');
});
</script>
[JavaScript] MULTI-LANGUAGE Javscript for Website - Pastebin.com[^]
|
|
|
|
|
Just debug your code and figure out what you're doing wrong. Should be pretty simple.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
function textToBinary(text) {
let alphabet;
let letter;
let binary = "";
let value;
alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (letter in text) {
if (alphabet.includes(text[letter].toUpperCase())) {
if (text[letter] === text[letter].toUpperCase()) {
binary += "010";
} else {
binary += "011";
}
value = alphabet.indexOf(text[letter].toUpperCase()) + 1;
if (value >= 16) {
binary += "1";
value -= 16;
} else {
binary += "0";
}
if (value >= 8) {
binary += "1";
value -= 8;
} else {
binary += "0";
}
if (value >= 4) {
binary += "1";
value -= 4;
} else {
binary += "0";
}
if (value >= 2) {
binary += "1";
value -= 2;
} else {
binary += "0";
}
if (value >= 1) {
binary += "1";
value -= 1;
} else {
binary += "0";
}
} else {
binary += "00100000";
}
}
console.log(binary);
}
textToBinary("this is written in BINARY");
|
|
|
|
|
|
Any tips?
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
For Numbers and BigInts toString() takes an optional parameter radix the value of radix must be minimum 2 and maximum 36.
By using radix you can also convert base 10 numbers (like 1,2,3,4,5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number ...
So your entire series of if (value >= ...) blocks can be replaced with a single call to toString , along with a call to padStart[^] to add any leading zeros:
value = alphabet.indexOf(text[letter].toUpperCase()) + 1;
binary += value.toString(2).padStart(5, "0");
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yeah, get rid of the semicolons
|
|
|
|
|
I am using npm module xlsx to write and read JSON data.
I want to write this JSON to excel
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
Later when I read back I want to get same JSON from excel file
If you already solved, any suggestion or help will be of great help
Here is what I have tried
```
var XLSX = require("xlsx");
console.log("Node Version: " + process.versions.node);
console.log("XLSX Version: " + XLSX.version);
/* GENERATE TEST FILE */
(function() {
// create workbook
var wb = XLSX.utils.book_new();
var ws = XLSX.utils.json_to_sheet([
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
], {header:["name","class","address","street","city"]});
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "testfile.xlsx");
let worksheet = wb.Sheets['Sheet1'];
let jsonArray= XLSX.utils.sheet_to_json(worksheet);
console.log(JSON.stringify(jsonArray));
})();
```
This returns
```
Node Version: 8.12.0
XLSX Version: 0.16.2
[{"name":"John","class":1}]
But I was expecting
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
```
Any help or suggestion will be of great help
|
|
|
|
|
I am creating a program where if an action occurs then a message box through visual basic script (.vbs). I plan to do I through a fstream file.
if (statement)
{
open fstream file }
|
|
|
|
|
I think that this one is a bit misplaced in the "Javascript" section
|
|
|
|
|
Unless things have changed, only IE will support running vb script files which means this won't work in FireFox, Chrome, or any other browser, probably not even Edge.
But you are writing this in C++ so I am confused as to what you are actually doing. How and why does vbs come into play with C++ code?
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|