|
This is the first time i've posted on this website, so if i'm doing something wrong just let me know. Anyways, I'm having a problem getting my geolocation to work. I absolutely cannot figure out what the problem is. Without the geolocation bit of code, the default location, markers, and such work fine. Then when I try to add in the geolocation the map won't appear at all and just the button appears.
<pre><div id="map"> </div>
<script>
var map;
function initMap() {
var myLatLng = {lat: 41.413118, lng: -82.072537}
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 18
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'My Location'
});
var marker = new google.maps.Marker({
position: {lat: 41.412726, lng: -82.072047},
map: map,
title: 'PS Building',
label: {text:'PS Building'}
});
infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Your Location'
});
infoWindow.setPosition(pos);
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support
geolocation.');
infoWindow.open(map);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=
KEY&callback=initMap"
async defer></script>
<form>
<input type="button" onclick="GetLocation();" value="click"/>
</form>
|
|
|
|
|
Why are you repeating this question? It's been answered, below. (Though you may also need to put
'Error: Your browser doesn\'t support
geolocation.');
on one line first, if that's not just a formatting issue on this site.)
And your
onclick="GetLocation();" attached to the button won't do anything unless you define a function with that name in your script.
|
|
|
|
|
This is the first time i've posted on this website, so if i'm doing something wrong just let me know. Anyways, I'm having a problem getting my geolocation to work. I absolutely cannot figure out what the problem is. Without the geolocation bit of code, the default location, markers, and such work fine. Then when I try to add in the geolocation the map won't appear at all and just the button appears.
<pre><div id="map"> </div>
<script>
var map;
function initMap() {
var myLatLng = {lat: 41.413118, lng: -82.072537}
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 18
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'My Location'
});
var marker = new google.maps.Marker({
position: {lat: 41.412726, lng: -82.072047},
map: map,
title: 'PS Building',
label: {text:'PS Building'}
});
infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Your Location'
});
infoWindow.setPosition(pos);
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support
geolocation.');
infoWindow.open(map);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=
AIzaSyCyO4aFysnjiQ9DO5VSDSJ_DtPd6O9mkDI&callback=initMap"
async defer></script>
<form>
<input type="button" onclick="GetLocation();" value="click"/>
</form>
|
|
|
|
|
One glaring issue:
infoWindow = new google.maps.InfoWindow;
You never declare the variable, and you need the constructor when calling it, so...
var infoWindow = new google.maps.InfoWindow();
All of this should be visible as errors in your javascript console. Are you not using browser Dev tools to debug?
Edit: Stupids
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
modified 29-Oct-19 8:47am.
|
|
|
|
|
Javascript doesn't require that variables are declared before they're used, unless you enable "strict" mode[^].
It also doesn't always require the parentheses when calling a constructor. For example, foo = new Date; seems to work fine without any errors or warnings.
Basically, Javascript is the VB6 of the web. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Haven't worked outside of strict mode in ages, forgot about that bunk.
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
Your very final closing curly } is extraneous - just get rid of that and your code will work.
btwm, you ought to hide yor API key - or at least go to your Gogole account and restrict its use to your IP address. As it is, anyone can use it....
|
|
|
|
|
Hi, I have a Component called Dashboard which is opening a modal dialog, what I want is, I want to open an external url like google.com in that modal dialog, what user enters in the search textbox I want to capture it into my parent Window or component, is that possible, if it is not from google.com, then some other url, is it possible using React JS/React native?
Here is Dashboard component code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Modal } from './Modal';
class Dashboard extends React.Component {
state = { show: false };
showModal = () => {
this.setState({ show: true });
};
hideModal = () => {
this.setState({ show: false });
};
render() {
return (
<main>
<h1>React Modal</h1>
<Modal show={this.state.show} handleClose={this.hideModal}>
<p>Modal</p>
<p>Data</p>
</Modal>
<button type="button" onClick={this.showModal}>
open
</button>
</main>
);
}
}
export default Dashboard;
Here is my Modal js code
import React, { Component } from "react";
import './ModalSS.css';
export const Modal = ({ handleClose, show, children }) => {
const showHideClassName = show ? "modal display-block" : "modal display-none";
return (
<div className={showHideClassName}>
<section className="modal-main">
{children}
<button onClick={handleClose}>close</button>
</section>
</div>
);
}
Here is my CSS:
body {
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.modal-main {
position: fixed;
background: white;
width: 80%;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.display-block {
display: block;
}
.display-none {
display: none;
}
Any idea how can I load a new external url in this modal and when user enters values and clicks on search or submit, it closes the modal and sends some of the information to the end parent component. Is it possible, if yes how can I do it - any help please - thanks in advance.
|
|
|
|
|
I do stuff like that in WinForms using HTML Agility Pack or the Browser Object.
I know in .Net Core, I can probably NuGet HTML Agility Pack, and do it from the controller.
Like get the Url of the page, do a coded socket connection to that Url, and take the HTTP/200 response document.
Then Agility Pack the textbox for the query. But how do you trigger the page change to start the process in the client and send it to the API.
Well the query will be sent to Google, and be the querystring Q. You can get it there.
Someone is going to have to think it out clearly, and model and test it to come up with a solution. Doing it all on the client side would require some serious critical thinking, and I don't have a need for it.
Good Luck!
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
jkirkerx wrote: Good Luck!
Thanks
|
|
|
|
|
Hi, I am just checking, is the MS Blazor going to be the next Client-side programming tool from MS. I heard it uses C# to write even client side coding, if it is, will it come with Garbage Collection too, that, the current JS frameworks may leave memory leaks, will this Blazor do the memory cleaning as C# does with managed code? Any discussion or any opinions here buddies?
|
|
|
|
|
It's been my experience over the last 16 years of Webforms, Razor, pretty much any Microsoft Web GUI technology to not touch it even with a 10 foot pole. I'll wait for someone else to try it and talk about first and see what they say.
I suppose if one is still using Razor, and wants to get sort of Angular, React like in design, jumping to Blazer may offer a fast solution to learn and deploy.
But most developers haven't even adopted my thoughts of "JQuery is dead", and haven't transitioned to a non JQuery environment or framework. So I can't see those folks giving it up, or being able to pry JQuery out of their hands.
As far as Garbage collection goes, that's another subject that I'm not an expert on, and just OK at. I think Richard is the King of that!
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
jkirkerx wrote: But most developers haven't even adopted my thoughts of "JQuery is dead",
Is it dead?
Yeah I am also seeing that in various situations, they will fight till the end to prove jQuery is best - its OK, we all are the same, I am also like you, I will wait until it picks-up little bit in the market at least, its hard to jump-in here and there. Thanks for answering buddy
|
|
|
|
|
I go to these meet-ups, and listen to experts, and they say that modern browsers all support modern JavaScript. Modern browsers had a mandate to support certain features by a certain year, which was over 6 years ago I think. Modern Javascript does everything JQuery does and better. The argument is that there is no need to have a 4Mb payload to support JQuery, that adds to the initial first page download.
So using a popular library like popper, tether and animate that requires the huge JQuery payload can be replaced with a Modern JavaScript library that is much smaller like 14K, and JavaScript is builtin to the browser to support it.
JQuery was needed when it came out and made life easier, but it's no longer required. For me, making the transition from JQuery to JavaScript was really hard to do.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
This is a much bigger question than a simple forum post can really do justice to. Let's start by breaking down your statement:simpledeveloper wrote: is the MS Blazor going to be the next Client-side programming tool from MS
Given that it's due for version 1 release early next year, I would say that this is a fairly safe assumption to make.simpledeveloper wrote: I heard it uses C# to write even client side coding
That's correct, but possibly not in the way you are imagining here. We need to start here by understanding that Blazor is targeting web assembly, which we can think of as, effectively, assembly language for browsers. So the C# code targets web assembly (aka WASM), which runs in the browser.simpledeveloper wrote: will it come with Garbage Collection too
This is where things get tricky, and why thinking of C# in the way you are used to is more complicated. Blazor does load the garbage collector into wasm (unless things have changed recently, this is the Mono garbage collector), but that is only going to cope with the managed side of the application; what we don't get from web assembly is direct access to the DOM, so we have to rely on a JavaScript interop layer interacting with the DOM, and this is still susceptible to leaks,
|
|
|
|
|
Much better thank you so much my friend 
|
|
|
|
|
|
Hello JS experts.
I'm using below code to open base64 encoded pdf file using javascript. It works well with small pdf files below 1MB. But it doesn't work if the file size is greater than 2MB. Please let me know if you have a working code for similar scenario.
var base64 = "base64 content";
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + base64 + "'></iframe>");
|
|
|
|
|
Are you sure it's the base64 string size?
Think about this. If I were to put a 4 meg image of base64, it will display in a <img /> element.
Perhaps it's when the PDF has 2 or more pages, or an image or something and the browser doesn't know how to handle it.
Or how to handle it within a iFrame.
I think you need to look at the PDF, and study how others are doing it, and perhaps come up with a new plan instead of just asking for code.
Perhaps create a pdf object instead of using an iFrame or embed the object in the frame.
javascript - how to display base64 encoded pdf? - Stack Overflow
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 21-Oct-19 18:33pm.
|
|
|
|
|
|
I didn't know that. The Stack post is good info to know.
You just got me thinking about my latest design.
I just designed and coded my new image system on the back end of my experimental project, and used base64.
In the front I use Image Url's to a static location.
Like in my Mongo Document, I keep a copy of the image in base64. So I can drag and drop, or select an image, client script it to base64, and send that to the API for further image processing like square it up, flip it around (iPhone) and scale it down to 1024x1024, then write the base64 to a Mongo document, write it to the website and send the base64 back for preview.
What's cool about this, is that I'm hosting in a Docker container with Kubernetes support, so I can spawn more website containers, and my .Net Core API's will rewrite the images requested from Mongo to the newly created spawned container.
I'm just excited about it, because it's working pretty good so far and it's base64 talk.
At 1024x1024, I'm within the limits.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
var objbuilder = '';
objbuilder += ('<object width="100%" height="100%" data="data:application/pdf;base64,');
objbuilder += (base64PDF);
objbuilder += ('" type="application/pdf" class="internal">');
objbuilder += ('<embed src="data:application/pdf;base64,');
objbuilder += (base64PDF);
objbuilder += ('" type="application/pdf" />');
objbuilder += ('');
Then either add to the existing page or open a new window:
var win = window.open("","_blank","titlebar=yes");
win.document.title = "My Title";
win.document.write('');
win.document.write(objbuilder);
win.document.write('');
layer = jQuery(win.document);
|
|
|
|
|
I have a Web Api that is returning FileStreamResult, I want to download the file that's in zip format, I could able to download if Web Api is returning the raw byte array, but for some reason lead wanted it only from FileStreamResult, can somebody please help me how can I write to a file using the FileStreamResult - thank you. I am putting the code here, the Web Api method which is returning as FileStreamResult, but the client code of javascript functions and react events I am putting which is working but with bytes array, so that somebody can suggest me what modifications I can make to the client script to make work and download the zip file. I need some help please - thank you.
Below is my Web Api Code:
[EnableCors("AnotherPolicy")]
[HttpPost]
public FileStreamResult Post([FromForm] string communityName, [FromForm] string files)
{
var removedInvalidCharsFromFileName = removeInvalidCharsFromFileName(files);
var tFiles = removedInvalidCharsFromFileName.Split(',');
string rootPath = Configuration.GetValue<string>("ROOT_PATH");
string communityPath = rootPath + "\\" + communityName;
byte[] theZipFile = null;
FileStreamResult result = null;
using (MemoryStream zipStream = new MemoryStream())
{
using (ZipArchive zip = new ZipArchive(zipStream, ZipArchiveMode.Create, true))
{
foreach (string attachment in tFiles)
{
var zipEntry = zip.CreateEntry(attachment);
using (FileStream fileStream = new FileStream(communityPath + "\\" + attachment, FileMode.Open))
using (Stream entryStream = zipEntry.Open())
{
fileStream.CopyTo(entryStream);
}
}
}
theZipFile = zipStream.ToArray();
result = new FileStreamResult(zipStream, "application/zip") { FileDownloadName = $"{communityName}.zip" };
}
return result;
}
Here is my React event for the download
handleDownload = (e) => {
e.preventDefault();
var formData = new FormData();
formData.append('communityname', this.state.selectedCommunity);
formData.append('files', JSON.stringify(this.state['checkedFiles']));
let url = clientConfiguration['filesApi.local'];
axios({
method: 'post',
responseType: 'application/blob',
contentType: 'application/blob',
url: url,
data: formData
})
.then(res => {
console.log(res);
console.log(res.data);
let fileName = `${this.state['selectedCommunity']}`
const arrayBuffer = base64ToArrayBuffer(res.data);
createAndDownloadBlobFile(arrayBuffer, fileName, 'zip');
})
.catch(error => {
console.log(error.message);
});
};
Here are the common fuctions I have written in CommonFuncs.js file:
export function createAndDownloadBlobFile(body, filename, extension = 'pdf') {
const blob = new Blob([body]);
const fileName = `${filename}.${extension}`;
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
export function base64ToArrayBuffer(base64) {
const binaryString = window.atob(base64);
const bytes = new Uint8Array(binaryString.length);
return bytes.map((byte, i) => binaryString.charCodeAt(i));
}
Any help would be very helpful please- thanks in advance
modified 17-Oct-19 19:45pm.
|
|
|
|
|
Well, I had to Google around and read several different examples and explanations for how it works.
I basically searched "FileStreamResult" and this was the most popular answer for using "FileStreamResult".
According to the documentation, this will return a stream with the appropiate header info that will make it look like a download to the browser, and trigger the browser to prompt for a download.
return new FileStreamResult(stream, new MediaTypeHeaderValue("application/zip"))
{
FileDownloadName = "application.zip"
};
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Thank you jkikerx, I did it in the following way, its completed ready to demo (just in case if somebody wants implement this I am putting my implementation here) - thanks for jumping in to help me.
Here is Web Api code C#:
[EnableCors("AnotherPolicy")]
[HttpPost]
public FileStreamResult Post([FromForm] string communityName, [FromForm] string files)
{
var removedInvalidCharsFromFileName = removeInvalidCharsFromFileName(files);
var tFiles = removedInvalidCharsFromFileName.Split(',');
string rootPath = Configuration.GetValue<string>("ROOT_PATH");
string communityPath = rootPath + "\\" + communityName;
MemoryStream zipStream = new MemoryStream();
using (ZipArchive zip = new ZipArchive(zipStream, ZipArchiveMode.Create, true))
{
foreach (string attachment in tFiles)
{
var zipEntry = zip.CreateEntry(attachment);
using (FileStream fileStream = new FileStream(communityPath + "\\" + attachment, FileMode.Open))
{
using (Stream entryStream = zipEntry.Open())
{
fileStream.CopyTo(entryStream);
}
}
}
}
zipStream.Position = 0;
return File(zipStream, "application/octet-stream");
}
Then my client side React code is here:
handleDownload = (e) => {
e.preventDefault();
var formData = new FormData();
formData.append('communityname', this.state.selectedCommunity);
formData.append('files', JSON.stringify(this.state['checkedFiles']));
let url = clientConfiguration['filesApi.local'];
axios({
method: 'post',
responseType: 'arraybuffer',
url: url,
data: formData
})
.then(res => {
let extension = 'zip';
let tempFileName = `${this.state['selectedCommunity']}`
let fileName = `${tempFileName}.${extension}`;
const blob = new Blob([res.data], {
type: 'application/octet-stream'
})
saveAs(blob, fileName)
})
.catch(error => {
console.log(error.message);
});
};
this event is called when button is clicked or form submitted. Thanks for all the support the SO has given - thanks a lot.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
