{"id":7538,"date":"2021-06-21T11:12:44","date_gmt":"2021-06-21T09:12:44","guid":{"rendered":"https:\/\/www.bitfactory.io\/de\/?p=7538"},"modified":"2021-06-30T09:54:59","modified_gmt":"2021-06-30T07:54:59","slug":"how-we-used-leaflet-to-show-floor-plans-in-combination-with-react-next-js-typescript-and-cloud-storage-from-google","status":"publish","type":"post","link":"https:\/\/www.bitfactory.io\/de\/dev-blog\/how-we-used-leaflet-to-show-floor-plans-in-combination-with-react-next-js-typescript-and-cloud-storage-from-google\/","title":{"rendered":"How we used Leaflet to show floor plans in combination with react, next.js, typescript  and cloud storage from google"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Currently a customer challenged us with the topic of displaying large and pretty detailed pdfs in the browser. The requirement was not only to just show it \u2013 this would be just possible out of the box \u2013 they also want to work with it. That means not only zooming in and out of the plan, they also want to easily switch between different pdfs or add markers to free selectable positions and keep all of the functionality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As you have maybe experienced yourself, dealing with pdfs in the browser is not very convenient. Currently there is no easy way to show it inline, it will mostly open in a new tab or will be downloaded to your filesystem by clicking it. This is a way different behavior as on mobile devices, for example an Apple iPad. There you can just easily show the pdf and work with it, like you would do with an image. But could we not do it with an iframe? You will find a lot of other blog posts about why this would not be a good idea. But above all how would you add markers or enable other features? So we were developing a different solution, which we will talk about in the following paragraphs.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Currently a customer challenged us with the topic of displaying large and pretty detailed pdfs in the browser. The requirement was not [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":7542,"comment_status":"closed","ping_status":"open","sticky":false,"template":"pages\/single-dev-blog-post.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/posts\/7538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/comments?post=7538"}],"version-history":[{"count":9,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/posts\/7538\/revisions"}],"predecessor-version":[{"id":11397,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/posts\/7538\/revisions\/11397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/media\/7542"}],"wp:attachment":[{"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/media?parent=7538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/categories?post=7538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bitfactory.io\/de\/wp-json\/wp\/v2\/tags?post=7538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}