Save Leaflet Screenshot a form - javascript

I have researched this endlessly but cannot find exactly what I am after, so hopefully, I can get some advice here. I am pretty new to coding and learning by doing, so please forgive any errors in the request.
I have built a Leaflet map using various libraries where the user draws a polygon on over an area and they have the option to save the map.
The map all works and currently the user can either download the map or it saves as a screenshot by creating a new image container in the body of the page.
There is a form that the user completes with some supplementary information that is then sent to me. My problem is I do not want the user to have to download the file and then reupload it as a file to the form.
I would like to basically put the screenshot into the form and that gets sent to me and/or it gets saved automatically to a folder on the backend somewhere. I am stuck with how to put an image into a form without the need to upload it. Therefore if I can work out how to save the image to a folder that would be perfect.
I am by no means expecting someone to do my project for me, but if someone could point me in the correct direction to start that would be great. If any more info is required or snippets of code I can add if required.

Related

Upload Image and stay on page

I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

I am trying to do Element Control, Redirection and Form Submission Processing with WIX Code but I am unable to find a suitable method

I'm kind of a beginner to WIX Code. I have this site which I have made i.e www.rat-store.com. I am facing three problems which I know might get solved with some code but I don't know how to do it. Here are the problems:
In manual payment, I need to accept some form input from the user on a page and only if the user agrees to the terms and enters the correct date should the submit button get activated following which an otherwise collapsed image should also reveal (it's the QR code to make payment; Image 1) (www.rat-store.com/manual-pay-rat)
Image 1
I'm trying to link a repeater background to a page but it's not working. I have to create a button inside the repeater to do this. Any workarounds? I know an image will work but the thing is that the motive is to create a kind of a list which will keep on incrementing in the future and I can't just keep on drag-dropping images, text and then group them up and link. (Image 2) (www.rat-store.com/shop-by-events)
Image 2
Since WIX Stores doesn't have an inbuilt cancellation feature I built a form to substitute for the same but I want that no two same order cancellations are submitted i.e. a customer can only submit his/her cancellation request for a particular order number once. The next time s/he tries to do that it should show that the request already exists. (Image 3 and Image 4) (www.rat-store.com/cancel-orders)
Image 3
Image 4
Some help with the code and approach would really be great. I'm almost finished with my site; Only these last few things bother me. I'm attaching a screenshot of each page, serially w.r.t the question number. P.S: The order number is the number generated for each order by the Wix store app itself. I have nothing to do with that. The customer needs to enter his/her number and if that is valid we will process the request. Apologies for the length of the post.

Access input forms of an existing page using Javascript?

I'm playing around with Google Chrome Extensions and wanted to make one where you fill out a form beforehand. Then whenever, a certain URL is opened, it fills in the information you filled out. I can save the information, and track the tab URL with one of Google's packages. However, when the URL is loaded, how can I tell what form to put the saved strings into? I know how to use var.document.getElementById(""), and can see the ids when I inspect element, but since it's not my webpage, I can't link it to my JavaScript file, so it doesn't help. I've seen this been done before but just can't find the right tools. Any guidance to an answer would be appreciated.

Google Maps API - Search XML Markers

EDIT: Just some background information - the system is set up using mySQL to store each marker's info, which is then converted into an XML file by some PHP code, which then displays it via the Maps javascript file. I currently have about 10 markers, which are stored in the mySQL database. Upon loading the map, all the markers are loaded.
I am currently using the Maps API v3 to display markers, and to display their infoWindows in a div. That's all good so far.
What I'd like to do it add a search functionality.
From what I understand, the API does have a search function, but when I tried it on the example in the documentation, it did a search across the whole map. I want it to only search amongst my markers.
EDIT: As I mentioned in the EDIT at the top, all markers are displayed at the initialize() - therefore, when someone searches for a location, the closest match would be selected. In the case of my map, the infowindow is displayed and split across 2 'html' sections, outside the map area (i.e., there is no bubble display on the actual map)
EDIT: Initially, I was worried that someone would come along and copy my idea if I posted the URL, but I'm sure it's been done already! Scr*w it - CityMap Prototype
So, I guess I'd need to find/create some sort of system that searches the XML file. Initially, the user would only be able to search for locations by name. Later, I'm sure I could come up with creative uses for the search.
Can anyone point me in the right direction?
EDIT:
After posting this, I found a tutorial on W3C - PHP Example - AJAX Live Search. It searches for links from an XML file, and then displays them in the temporary search results under the bar, as you type. Does anyone know how I can link this search function to the markers?
From what I can understand, I'd need to somehow link to each marker via XML, but that's the extent to my guess.
Thanks
From my understanding the api's search functionality is not for local files but for the whole map(world), if you are doing php I would recommend for the time being utilizing the tutorial you found and then linking the search functionality to performing some sort of javacript response which would perform the action which you are looking for upon search. I am not sure what this functionality is as you already would have the markers plotted on the map from the sound of your question. Let me know if you need more on this not sure if you are in a php/ruby/asp environment. (or if you are in a truly html environment) hth

Categories