cssRules from Google Maps

[miko866]

Hello, thank you for that plugin. I have an issue when I will make a screenshot from Google map. The issue is with Google Fonts. I tried to link the css files directly to the project but it didn't help.

I use your plugin with Vue.js and Vue2Leaflet.

Issue: Error while reading CSS rules from https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans:400,500,700 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

CodeSandbox: https://codesandbox.io/s/lealfet-google-map-screenshot-so8u9?file=/src/App.vue

[grinat]

@miko866 try add crossorigin="anonymous" to the stylesheet in your $nextTick method

Expected: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans:400,500,700" rel="stylesheet" crossorigin="anonymous">

[miko866]

@grinat Thank you for your answer, but I cannot add the link tag into Vue.js code. I tried to link it directly via index.html but even that didn't help. Then I tried to add it via @import in the style component but it didn't help either. Would you have an idea of how this could be solved?

[grinat]

@miko866 but you can modify:

   getElementsByTagName('link')
      .filter(el => el.href.indexOf('fonts.googleapis.com') > -1)
      .every(el => el.setAttribute('crossorigin', 'anonymous'))

[miko866]

@grinat Doesn't work.

Always the same error.

[grinat]

@miko866 you wait for dom updates after modify link attributes? Need smt like that:

   getElementsByTagName('link')
      .filter(el => el.href.indexOf('fonts.googleapis.com') > -1)
      .every(el => el.setAttribute('crossorigin', 'anonymous'))

   setTimeout(() => {
      this.simpleMapScreenshoter
        .takeScreen(...
   }, 0)

Or try to remove all fonts.googlepais link and use local fonts: https://www.npmjs.com/package/roboto-fontface

[miko866]

Thanks for your time, I tried the booth options but it doesn't work. The first solution: crossOrigins is there but does nothing. The second solution: It doesn't work for me. I removed the links with google URL and added the new ones from the local folder. But the same issue.

And I don't understand why.

[miko866]

Here is the solution. https://codesandbox.io/s/lealfet-google-map-screenshot-m4myt?file=/src/App.vue

I must thank for help mikeu