I have a div on my website in which I have created a GoogleMap. I've added markers and implemented MarkerClusterer.
I want to allow the user to click a button and download an image of the currently viewed map as they see it after any zooming or moving including markers:
I tried to use html2canvas and that doesn't work at all.
After searching for how to do this for the last hour, I've come up with absolutely nothing useful.
Is this even possible to capture the div as the user sees it? Or is creating a static google map and saving the image the only way to do this?
SOLUTION
I went with PhantomJS in the end. I created a Map view which takes input through the querystring and uses that data to add markers to a map. I then used PhantomJS to take screenshots from the map view. I then output the screenshot image as a Base64 string.
SnapshotControl is suggested by google in such situations. The limitation is that SnapshotControl supports only URL of upto 2048 characters. So it can be used if there are not much layers drawn on map.
For phantom js, when user clicks on download, the layer data drawn on map should be send to server (through say downloadServlet). This data will be passed to a JSP that can render a map and plot point. Phantomjs will be executed by downloadServlet passing the URL of this jsp.
I have used phantomjs in my application as I draw around 4-5 different layers at a time. Only thing to note here is that the server where phantomjs would be executed needs to have internet connectivity otherwise maps will not be drawn.
Your best solution is Static Google Maps.
See https://developers.google.com/maps/documentation/static-maps/intro for plenty of examples.
Create an image in your div, I would then recommend using concatenation to produce a dynamic url from your marker/LatLng/Polyline etc variables. Then use JS to set the image's src equal to that url.
Following that, there are plenty of JS libraries that will allow the user to download the image.
Related
I am using a WordPress plugin for a Store Locator, and it does a lot of good things. But there are a few things that I need to tweak and I do not want to modify the plugin's code. I was wondering if there was any way to get ahold of the current map that it outputs and all of its settings so that I could manipulate them, or add to them? I would do this in my own JS file.
The ID of the div that contains the map is #wpsl-gmap and one thing I want to do is after loading the results I need to trigger a resize on the map because the area that it is loaded into increases and the tiles do not load for the new section. I would also like to center the map if possible.
I have a site where I'm using Maps Javascript API to print several polygons to the screen and manage hover/click events, but I don't need to see the underlying map. At the moment I've just styled all of the map elements to white, and it works, but I'd rather eliminate the requests, since it's currently downloading ~40 seperate blank white squares.
Happy to try a different plugin / API if it works, but I had a look for alternate applications without much luck.
It is not possible to automate the clicks on the map elements which are svg nodes (they do not have specific x-paths which selenium relies on).We tried clicking on features which also fails as it is also set as a svg element. Is there a solution for this?
I have finally found a solution for this (at least for point feature types). It is done using issuing a request to the DB to get the feature coordinates and then using the following method to get the pixel values for the x,y coordinates for the points.
OpenLayers.getPixelFromLonLat()
After that the Open Layers click controller is used to issue a request to the given pixel. It works on all window sizes as well.
I have a weird issue on Mapbox with js.
We are loading in geoJson files to get all the pins, which works fine most of the time with no errors. But every so often the json just simply does not seem to load and no pins appear.
Does not seem to be a browser specific problem, or cache or cross domain (as its from the same server and it would never work).
Guessing it could be something in our GEOJSON or js, but then it would never ever work.
Our next step is to add a callback and then try the loop again, but I was wondering if there was something simple we are overlooking in the way map box and geoJSON play together?
So it turns out that the issue here was having a series of objects on the map from within map box (a pin, some drawn boxes). Then we load in the geojson.
So loading was not an issue, it was adding a layer that was being flatly ignored.
I've created a Google map with circle overlays, much like this one. I want to include this map in a PDF (along with some other graphics) that will be created on the server side. It seems the easiest way to do this would be to convert the map to a single image and upload it to the server. Is it possible to do this with JavaScript?
Alternatively, I could try to convert it to an image and create the PDF on the client-side, but it seems this would be a lot more difficult.
Anyhow, the first step is converting the map to an image. I've considered using the static maps API to generate the image, but it seems this API does not support the circle overlays.