Save Openstreetmap, Openlayers output as .png or .svg, server-side - svg

I'm currently building a web application with Openlayers that draws routes en points of interest on a map. This map needs to be saved to a file on the server (.png of .svg), so it can be embedded in a .pdf file. The route and POI information is available as KML file.
What is the easiest way to do this?

You have several options:
Directly export your OpenLayers map to a PNG or even a PDF on the client-side (see these two examples: png export and pdf export).
Use wkhtmltopdf to export a HTML page containing an OpenLayers map to a PDF (on the server-side).
Use MapFish Print 3 which is a print server to generate PDF reports containing maps. You would create a report template and configuration and then send a print request containing the geo-data that you want to print (e.g. tile layers or GeoJSON data).

Related

Nodejs muhammara insert SVG to pdf, or read exist PDF with PDFmake content and save it as other

I am using NodeJS and I want to modify uploaded PDF file by add svg.
I tried to use Muhammara/Hummus and it is great to edit but it can not handle SVG, only JPEG.
I also Tried PDFmake, but as far i know, I can not read PDF with this tool, just create PDF from documentData obj.
Is there any possibility accomplish mentioned goal in Nodejs?
Regards

Nuxtjs including images from assets using the content module

I am trying to use the nuxt.js Nuxt.js content module. Is there a way to display images we refer to in our blogpost.md file? I know that we can put images in the front matter, but I want the create of the articles to put images inside their created .md file. Lets say we have a file:
-- start of .md file --
# some text
some description
![Image of test](../../assets/images/test.jpg)
![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)# some text
some description
-- end of .md file --
I end up seeing the image that is linked using https. But the other image is not displayed?? When checking the page I see an <img> tag is created, but no image to be seen...
When I check the structure using any other markdown editor, I see the image.
Including links to images does display images. But I need to include locally stored images.
any help greatly appreciated
Partially solving the issue, some images can be added using metadata (like cover images), those cannot be added within the content itself, just above or bellow actual content.
---
title: Sample
image: test.jpg
---
Here the markdown (without images)
In the view you can render that image after or before the content using something like:
<img :src="require(`~/assets/images/${ page.image }`)">
<nuxt-content :document="page"/>

Load image from JS to Phaser Game

I'm doing a custom game which I'd like to change the background and a character picture according to a file they upload.
The input file is outside phaser. If possible, I'd like to show the picture directly without uploading to the server.
If you use a file loader to get the base64 encoding of the image, you can use this.textures.addBase64 to load the image into the texture manager, after that loads you can create new objects with that image tag, or set existing images to that texture.
Working Example =>
https://stackblitz.com/edit/phaser-use-uploaded-image

rendering Html forms as pdf

I have two html tables(containing dynamic content stored in variables) along with headings and paragraphs. When the user clicks the download PDF button, he/she should be able to download one PDF of two pages containing the two tables.
I have read a lot of articles but I found no definite answer to this issue.Should I use jspdf or react-pdf for this scenario?
I am using react frontend and Nodejs backend.
https://github.com/MrRio/jsPDF
JSPDF is a perfect solution for converting tables into PDF in client-side. But if you want to do something from backend
Or you can refer to
https://www.npmjs.com/package/html-pdf
for rendering it in the backend, and make express download it.
Looks like you can call the window.print() method in componentDidMount() to print the complete div, though removing the footer through the script can be a challenge.
Using html2canvas with jspdf has a major drawback that the pdfs are blurred and their clarity varies with the page zoom, as it takes the screenshot of that portion. Hence, you must configure it correctly or compromise on quality.

Autodesk Viewer load saved markups from SVG file

I'm currently working with the Autodesk Viewer API to display and add markups to DWG files. I now can add markups and retrieve them.
I saved one markup as a svg file and now, I'm looking for a way to load the SVG file to display the markup on my viewer.
Do you have any idea on how I could do that?
Thanks.
Markups can be loaded using the loadMarkups method. Here's an example: https://developer.api.autodesk.com/viewingservice/v1/viewers/docs/tutorial-feature_markup.html#saving-and-loading-markups.

Resources