Programatically export Openlayers maps to static image file

Programatically export Openlayers maps to static image file

As far as I understand this example from the OpenLayers page and the linked source code for this example, OpenLayers3 now has the offical ability to save maps as static image files.

However, the saving is done via a button on the website (and I do not fully understand how as I am not too much into Javascript).

Is there also a possibility to do this programatically in the following way?

  1. Programatically create a webpage with an embedded OpenLayers3 map, displaying data from whatever sources
  2. Export the webpage's canvas (all layers that would be displayed when opening the page in a browser) into a static image file

I think that creating the webpage would not be that difficult. However, the question is more on whether it is possible to use theexportingwithout a clickable button but by calling it via a script, command-line or similar.

I did some testing with this approach using PhantomJS to save a screenshot of the webpage. However, I have not managed yet to get this working properly (map object from my webpage not found, when found then rendering is started before all tiles have been loaded, size parameters are ignored.

Removed the OpenLayers3 dependency from the title, solutions using OpenLayers2 are also welcome.

Are you using GeoServer as a backend?
You could construct a GetMap request via JavaScript and use a HTML GET request to get that image.
I use this same approach to programmatically embed static maps into reports in Ms-Access.
I use PostgreSQL to store my data, and GeoServer handles the rendering and serving of that data.
To embed static maps in Ms-Access reports I first get the BoundingBox of the area I'd like a map of. This is done purely in SQL via a custom function to query my PostgreSQL database.
You could get the same answers using ol.extent and its methods (e.g. ol.extent.getBottomLeft()) to get your BoundingBox.
Here is my VBA Code constructing the request.

GetMapString = "http://" + GeoServerHost + "/geoserver/wms?request=GetMap&service=WMS&version=1.1.3" & _ "&layers=" + GeoServerWorkspace + ":" + LayerName & _ "&styles=" & _ "&srs=EPSG:27700" & _ "&bbox=" & x1 & "," & y1 & "," & x2 & "," & y2 & _ "&width=1200&height=1200" & _ "&format_options=dpi:300;antialiasing:on" & _ "&format=image%2Fpng8"

Building an equivalent GetMapString in JavaScript, then sending that with the HTML GET request, should return a PNG8 image.
Be sure to check & change the SRS parameter as you probably wouldn't want your image projected in British National Grid.

The following approach works for me to save static maps to png files from a webpage with an embedded OpenLayers2 map (I see no reason why it should not work with OpenLayers3 though).

The following code is based on the example given at I slightly modified it to integrate the code given by user cjoudrey on GitHut/Gist. This was the best working approach that I found to make phantomJS wait for the complete page to load (including all geodata and map tiles) before saving the map to an image file - otherwise, one would often get an image with the geodata plotted without the basemap tiles. Besides, I preferred hardcoding the necessary parameters instead of passing them from the command-line.

  1. Install phantomJS on your system as described on the official page. phantomJS is a headless browser kit which lets you access webpages from the command line without any GUI, controlling the webpage navigation with a JavaScript file. Moreover, it has a rendering function which lets you save screenshots from either complete webpages or only specific HTML elements.

  2. Create the following JavaScript file (naming it and make sure to modify the first three lines according to the webpage you want to query.mapIDrefers to thesection on your webpage that embeds the OpenLayers map, respectively to the ID used in the map constructor, e.g.var map = new OpenLayers.Map("mymapid");.


// modify these parameters accordingly! var url = 'http://localhost:8000/OL.html'; var mapID = 'mymapid'; var outputFilename = 'map.png">as described on the homepage. Start a command-shell, navigate to the folder where your files are stored and typepython -m http.server(Python 3.x) orpython -m SimpleHTTPServer(Python 2.x). Then, you can access your file viahttp://localhost:8000/OL_testpage.html

Drawbacks from this approach: To my current knowledge, this approach has two drawbacks. 1. The image is only rendered in correct size if the map was created with width and height given in absolute pixels (as in my example above, lineswidth: 1600px;andheight: 1200px;). If width and height are given as percentage of the browser's windows as many people do (e.g.width: 100%;) then the resulting image is quite small and has some quadratic format. 2. Using phantomJS worked fine for me when applying it to maps with rather few features. I am still experimenting to execute this on maps which load a large number of features into a vector layer (e.g. a street network with 900k lines). This makes phantomJS crash each time.

Programatically export Openlayers maps to static image file - Geographic Information Systems

I am the one GIS guy (started last week, imposter syndrome is real. I learned on ArcGIS but am using ArcPro/AGOL) and want to make maps available to my coworkers so they can view attribute tables and stuff, rather than giving them static PDFs. I have ArcPro and AGOL. Idk what level but I can make maps there but can’t publish web layers from ArcPro, if that gives you a hint.

I made a group in AGOL and wanted to have my coworkers make AGOL accounts just to join the group and view the maps no need to create stuff. Idk what data is public or not so I wanted to hide it behind a group and just let people I know into it. However, it seems like they need a paid version of AGOL just to join my group and view it? Letting them view stuff in my AGOL group seems like the cleanest option but getting them each an account or a shared account if there is a cost may be a headache.

If I know the data is public, can I make a map on AGOL that can be accessed by people without a paid account/ without logging in, or is the ability to view all AGOL content paywalled requiring a paid account of some sort?

Any good alternatives to AGOL like Google Earth/Maps?

1) Can I let coworkers view maps in my AGOL group with any sort of free (not a trial) AGOL account?

2) Can I make AGOL maps with non-sensitive data viewable to everyone even with no AGOL accounts?

3) Alternatives to AGOL, and do they have the option for me to control who can access the maps there if I need to use data that is not public?

Watch the video: Openlayers 6 Tutorial #5 - Raster BaseMap Layers