I have an ASP.NET page using a leaflet map. I have a filter being applied to some map icons.
When I apply the filter, which is an ASPX control. when the result of the filter comes back, since ASP resends the entire page back to the client, i loose the current zoomed in region I was looking at.
I have saved off the values of the last bound coordinates the user was looking at but exclude the possibility of the most zoomed out case since that's what i'm trying to avoid. I'm trying something like
string temp = "<script language=\"Javascript\">
myMAP.fitBounds([[RA[0],RA[1}][RA[2],RA[3]]);
</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "resetZoom", temp);
but I'm still seeing the map get reset like when the page gets sent back. am I calling the wrong leaflet method or is there a better way to implement what I'm trying to do? Please advise...
.fitBounds() method is having a coma between points, so I will be something like this:
.fitBounds([
[RA[0], RA[1]],
[RA[2], RA[3]]
]);
(source)
Is it fixing your problem?
Related
First question but I really am in a jam.
I have a webpage render which is working perfectly. However, I need to be able to control the initial display position (almost like a href #anchors in HTML) but without any access to the site content.
From as far as i can see i have no access to the scrollBars other than the bool to enable / disable..
Is there anything i can do to even force a scroll down of 20% for example, and then I can create a form to adjust later on.
Any assistance would be HUGELY appreciated although from what I have researched it seems unlikely.
I have the regular windows WebBrowser Render
private System.Windows.Forms.WebBrowser m_webBrowser;
Thanks !
--This is for c# standalone application.. Not WebBased.
Have you tried using jquery?
I personally use the animate method from jquery to scroll to certain elemnts in my webpage.
Example:
$('html, body').animate({scrollTop: $('#the-element-you-want-to-scroll-to).offset().top}, 1000);
PS: For the last parameter you can control the time it will use to scroll to destination, that offering you a nice effect.(in milliseconds)
I managed to resolve it using a strange method..
I basically injected some javascript into the rendered HTML manually.. Then the rest was easy.
i used something like this :
string updatedSource = WebBrowser.DocumentText.Replace("Google", "Foogle");
string extraSource =
"<html><body>Script goes here <br/>" +
"<div><p>BLA BLA BLA</p></div></body></html>";
WebBrowser.DocumentText = extraSource + updatedSource;
WebBrowser.Update();
Maybe it will help someone.
I recently started working on a project that has been in development for some time now. The problem is this - in the web site page, a have a frame (amongst 4 others) in a frameset which contains the SVG map object (the whole site is GIS based). Also, in the same frame, there is a icon for opening the form in which user can choose a number of filters, and after he presses a button, the map refreshes and the area of influence around some key points on the map are drawn.
What i need to do is to open that form in a new (popup) window and not in the same frame where the map is. I did that this way:
onclick="window.open('zi.aspx','form1','width=700,height=500,left=350,top=100')"
This works fine. But then, when i enter the filters and hit Generate button, i get this error:
'parent.frames.map' is null or not an object
with the reference to zi.aspx. Now i know that this error is because i changed the form from opening in the same frame as map to opening it in a popup window, but i just can't find anywhere in the code where can i modify it. Before my changes, the code was just this:
onclick="showZi();"
and that is the function i can't find anywhere. Any ideas? How can i make this work, to make a map with filters drawn after the user has chosen appropriate ones from the popup window form? I should mention that this image link is in the ASP.NET table, with standard runat="server" command.
Okay, so you're opening a new window from javascript. Your problem is that you're trying to access the parent window by using the 'window.parent' property. This is wrong, you'll need to instead use 'window.opener' property. E.g.:
window.opener.frames.map
So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps
Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).
Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.
Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.
I am using a generateimage.aspx page which is used as an image source for an image.
When this page is called i am passing a querystring and then using a Session["abc"] var whoes value is being retruned as a jpg image.
The GenerateImage page is called from another page test.aspx like GenerateImage.aspx?text=P as image source under the img tag .And the value returned is then dislayed i the form of image.
PROBLEM: some time this page is called and some time not.
Thus when the page is not called then the image value that is being returned is that which is assigned to the Session["abc"] var in previous Session.
Please let me know what might be the reason that the page is called sometime and sometime not
And how can I handle this problem.
I think this is a caching issue. By appending a timestamp or a random number to the end of the request url as a querystring will solve this.
Something like
GenerateImage.aspx?text=P&dynstr=" + (new Date()).getTime();
You can disable caching this way:
Response.Cache.SetExpires(DateTime.Now.AddDays(-1));
I agree with #pulse, HTML images are commonly cached by most browsers. So you have two options: 1. Append a random string to the source (not my favorite as it's just a hack) 2. Set the page to force no cache by setting a response header (much better IMO).
Another thing is that I would switch to a handler (ashx page) instead of a standard aspx page for image handling as it has a much lighter footprint/lifecycle and can be easily reused.
I've got your average e-Commerce app, I store ITEM_IMAGE_NAME in the database, and sometimes managers MISSPELL the image name.
To avoid "missing images" (red X in IE), every time I display the list of products, I check the server for the image related to the product, and if that file doesn't exist - I replace it with default image.
As far as i can tell this doesn't affect performance, but I was wondering if there are any alternatives to fix a "missing image" problem.
I'm using ASP.NET + C# (.NET 3.5)
Some code:
foreach (Item item in Items)
{
string path = Path.Combine("~/images/", item.categoryImage);
item.categoryImage = File.Exists(Server.MapPath(path)) ? item.categoryImage : GetImageDependingOnItemType();
}
You might consider something with javascript
<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'">
Edit: Or program a 404.aspx returning a default image, if a nonexisting image was requested.
<style>
.fallback { background-image: url("fallback.png"); }
</style>
<img class="fallback" src="missing.png" width="400" height="300">
If missing.png loads, it will cover the space allocated for it, as if the fallback were not specified. (Assuming it's not transparent.)
If missing.png fails to load, the space will instead be filled with fallback.png. You'll still get a little "broken image" icon, but I prefer it that way... a little hint that says "fix me".
If your images aren't all the same size, you'll notice that the background tiles by default. You can use background-repeat: no-repeat; if you don't like that.
I like Erik's solution, but without removing the event after the first execution, because if you are using that code in, let's say, an MVC partial view, this will work only the first time it is loaded. So I'd go with:
<img src="image.jpg" onerror="this.src='default.jpg';" />
In case you have many images in the same situation, like a grid, you can do this instead:
$("img").on("error", function () {
$(this).attr('src', 'default.jpg');
});
Of course, you may want to use a more specific jQuery selector.
You can specify on the server what image should be returned for all requests to non-existent image files. That way the user can get a "2 AWESUM 2 SHO" lolcat instead of a red x.
I think your way is pretty much OK. I'd do it in a function or do in .categoryImage accessor.
I think I would find a way to make the data consistent rather than allowing users to enter inconsistent data. Perhaps your management app could allow the manager to select an existing image or upload a new one, then set the name of the image based on this input so that you'd be assured that the image will exist. Only remove an image when all references to it have been removed from the database. Restrict the interaction with the data to your app so that people can't make those sorts of mistakes.
Another way to handle this would be to have a handler (or a controller in ASP.NET MVC) that does the image lookup based on id and returns the image data. Coupled with caching this could be very efficient and would allow you to do image replacement as well.