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.
Related
I'm trying to convert a KML file with a lots of polygons into an image in order to put it into a PDF file with PHP. Is there any solution to achieve that ? I tried with Google Static Maps API but there are too much polygons. Thanks in advance.
It doesn't involve PHP, but you could load the KML file into Google Earth Pro, and use the "Save image" tool (or just a screenshot) to export an image version of the map with the KML polygons.
If you don't want the map as the background, you can overlay a large filled polygon behind your KML polygons to give them a solid background color (white or otherwise). May have to play with Draw Order settings in the KMLs to get them to overlay in the desired order.
I have a map created in My Maps, and I wand to embed it in a website, however I'd like to have InfoWindows on marker click instead of the default side panel, and change the description a bit.
From what I found, the only way to do so is to use a regular Google Maps API and add my data onto it with a KML layer. This is working, however, the icons (the pins) are highly pixelated and look terrible. When using the same map via embed (or simply opening it) they are OK.
Would really appreciate any help with the issue. Probably there is another way of adding a custom map to an API-powered map?
The answer I've come up with is: no way to achieve what I'm looking for.
When exporting KML layers, Google scales all icons to 32X32 px, and then scales them up (kml file contains scale 1.1 directive). Even if you change the scale, the files remain 32X32, so it does not help; you need to create another files, in other words: the kml exported from Google is not usable if you have custom png icons.
I ended up using regular markers instead of KML layer.
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.
I would like to display the map of the USA with state outlines in a web page. I also want to have predefined zones or parts of the map and have each part in a certain color. The parts do not change per request which means these parts could be defined by a single time process and what changes per request is just the solid color.
I am looking for an ASP.NET or Javascript Library or tool whcih produces such a map. The map can be a static image or interactive based on HTML5. Flash would be my last resort. The library should have an easy way to define the parts (polygons?). I am envisioning a desktop tool where I can trace over the map by hand to0 define the p0arts and the tool would create the data points to be used later in the drawn map.
D3 has been used to do these kinds of tasks pretty well:
http://d3js.org/
http://bl.ocks.org/mbostock/2206590
Inkscape is a desktop tool which can be used to load a map static image and to draw freehand polygons on the map for the regions. The final output (image + polygons) can be output to a single svg file which can be displayed in a web page.
I also used svg2vml to support IE8-.
We need to create a map of the small town from raster file. Our client deny usage of known API such as Google Maps, OSM, etc. There is little time before the deadline. What is the quickest way to create a small web map from the picture? Some kind of JavaScript framework?
Requires: drag, zoom and markers.
It is very desirable to do this without a big fat server such as MapServer or GeoServer, because we dont have a much time to redraw map in this format.
Absolutely easiest way is to create an OpenLayers map with Image layer. Here is an example of how it works.
Consider though that whole image is being loaded to the client before OpenLayers can manipulate it. So it's probably not the best option if it's a huge image.
Other option would be to create a tile pyramide with MapTiler which you can then simply host on your webserver(no need for MapServer or GeoServer) and then use TileCache layer in OpenLayers to display tiles on map. MapTiler creates OpenLayers example with all necessary settings when you tile image with it.