embedded map not workingFORUMS HOME SEARCH FORUMS

Thanks Sasa - that's really helpful.

Hi,

sure. I made a quick video to illustrate the rather simple operation. 

My initial problem was that I wanted to import the code into my Media Gallery just like I would with a Youtube video using their iFrame code, but apparently it doesn't work the same way with the Plotaroute code. So instead you paste the code directly into eg. the text box's editor in Wordpress as shown in the video.

https://www.dropbox.com/s/yilraond8k5hcs8/Plotaroute_iframe_embed_.mp4?dl=0

best,
S

That's great. Would you mind sharing what the solution was in case anyone else has the same issue?

Alright, I solved the issue. I now just embedded the code the same way I did four years ago and now it works. Apparently you can embed the code in at least two different ways. I tried it the wrong way =)

Thanks for your time!

S

Ok, now I am confused. 

In your first reply you state:
"(...)you have assigned to the container div where you've inserted the embedded map". This css class seems to include a "position: absolute !important", but as I mention I only copy&pasted from poltaroute without altering the code which does not contain the bit position: absolute !important. So I have to assume wordpress (or the theme I use) modify the entered code. Right?

So how can I edit it if it doesn't contain the bit to begin with?

Now here comes the weird part. In this post https://kurkista.fi/2017/07/24/project-alps the embedded maps work like a charm. Why then and not now anymore?

S

You can edit the code from plotaroute in a text editor like Notepad before pasting it into your website.

Hi and thank you for the repsonse and taking your time to look into this.

When dealing with code I am moving on thin ice, but I try and learn. Now, what I did was I copied the embed code from plotaroute and pasted it into the oEmded section of Import Media (see screen shot). After that I have no control over the code and cannot accces nor modify the code, at least to my knowledge. 

I have no idea how to go about this and change the bit of code you suggest. What a pity.

Hi Sasa,

It looks like the problem is caused by the "fluid-object" css class you have assigned to the container div where you've inserted the embedded map. This css class seems to include a "position: absolute !important", which is overriding the "position: relative" in the plotaroute div. You could overcome this by changing the first part of the plotaroute embed code to say <div style="overflow:hidden;position:relative !important;"> but you may also need to change other formatting you have on the container div if this then affects the page layout. 

Hi, 

I embedded two plotaroute maps to my site through wordpress. None of them would however work.
https://kurkista.fi/2021/08/09/polkujuoksu-uutela-5k/
https://kurkista.fi/2021/08/09/polkujuoksu-mustavuori-10k/

My site has no issues running embedded content from eg. Youtube or Thinglink, but Plotaroute for some reason doesn't work.

My main browser is Safari (14.1.1), but tested it with Brave (1.27.111), Chrome (92.0.4515.131) and Opera (78.0.4093.112) too.

Any idea?

Thanks!

S

Hello again and a happy new year!

With the last update of Vivaldi browser everything is working finde as long as third party cookies are allowed now.
Still it's needed to allow those cookies - but that's the case in Firefox too. So it seems that they're really needed...

Regards, 

Lucas

Mhh, interesting. 

something seems to be wrong with Vivaldi-Browser then. As I have tried every privacy setting now and it doesn't work I've posted the problem in Vivaldi forums.

But concerning the cookies I have to say that I can reproduce the problem in Firefox when blocking thrid-party cookies there. So I guess that something is special about cokies here as Vivaldi and Firefox don't share much code as far as i know...

This map works fine for us here Lucas.

No problem:

http://lucas.sichardt.net/index.php?Seite=eigene_Strecken

Thanks for investigating!

Reading your hints I have investigated a bit more too. I tried if disabling the option to send "do not track" hints to websites changes behaviour. But it seems that this doesn't change anything - even disabling third party cookies while also disabling "do not track" hints does not work...

I think the third party cookies was probably a red herring, as this isn't a requirement for our mebedded maps, but it's possible that by changing this setting you changed something else - for example, we do depend on the HTTP referer being sent (the identity of the website making the request), which can be removed by some security software. or browser add-ons.

Can you share a link to your embedded map and we'll have a look at the menu button issue?

Hi again, 

has something changed in these days? Now I have the problem that the menu buttons for showing the route description or disabling the km markers etc. do not work anymore for embedded routes. Otherwiese on plotaroute website they work. It seems to be a problem in webkit based browsers, not in mozilla browsers.

By the way: Allowing third party cookies is of course not  something users like to do. Do we really need cookies for showing embedded maps?

Regards, 

Lucas

Glad you sorted it out.  Thanks for sharing this Lucas.

Hi again, 

I've done some more invesigation now. And I found the problem: In the browser settings third party cookies have to be activated to make the widget working.

I've added a hint on this on my website for the visitors to know about it.

Thanks for your hints nevertheless!

Regards, 

Lucas

Hi, 

thanks for your reply. I have tried this. But it doesn't change anything.

Any other suggestions?

On another website I administrate I had to do some trick a few weeks ago concerning an iframe with an openstreetmap widget. It stopped working suddenly after some update (webserver update I think). And as I found out the problem was that the iframe source was not located on the same domain as the website itself was. I had to copy some script from the internet to make it working - the script gets the iframe source as url-parameter and is called as iframe source. This the code of this:

<?php

$url = isset($_GET['url']) ? $_GET['url'] : '';

if($url)

{

    $url_parts = parse_url($url);

    /* Get the full URL as base and set this script bevor, because we need to load embedded files over this script */

    $base_url = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '?url=' . $url_parts['scheme'] . '://' . $url_parts['host'];

    /* Split the path in parts */

    $path = preg_split('#/#', dirname($url_parts['path']));

    /* Generate array to map relative URLs into absolute URLs */

    $replace_last = $base_url;

    $search[] = './';

    foreach($path as $i => $a)

    {

        $search[] = $search_last = $search_last . '../';

        $replace[] = $replace_last = $replace_last . $a . '/';

    }    

    /* Remove the last */

    array_pop($search);

    /* And reverse it */

    $search = array_reverse($search);

    /* Get the header and send correct content type */

    $header = get_headers($url, true);

    header('Content-type: ' . $header['Content-Type']);

    /* Get the content */

    $content = file_get_contents($url);

    /* Replace relative URLs with absolute URLs */

    $content = str_replace($search, $replace, $content);

    /* Output the content */

    echo $content;

}

I've tried this for the plotaroute widget too. But it didn't work... But in fact I don't really understand what the script is doing exactly. Do you?

Regards, 

Lucas

Hi Lucas - try disabling any browser add-ons you have to see if this helps. It sounds like something you have installed is interfering with page requests and masking where the request is coming from. 

Hello, 

I want to embed a route on my own website. But when doing so by the SHARE code provided here I only get the static image - when clicking on play then the image of the route vanishes and an empty area remains - the route playback will not start.

When trying the same with the preview button, everything works. When doing it as IFrame nothing works.

Do you know a trick on this?

Regards, 

Lucas