search

rowanwins / leaflet-easyPrint

A leaflet plugin which adds an icon to print the map - Demo @ http://rowanwins.github.io/leaflet-easyPrint/
MIT License
248 stars 137 forks source link

ELEMNTS TO HIDE #66

Open aizquierdo021 opened 6 years ago

aizquierdo021 commented 6 years ago

In previous version, the pluggin was able to hide easily elemnts (elementsToHide: 'p, h2, .leaflet-control-zoom') In the last version I cannot find this option. I know that exist the option "hiden" but it hide all the controls. Actually I need to hide only zoom bar since I need to show some texts and the scale bar. Is ther any option to choose what I want to show? Could you write a simple example? Thanks so much

rowanwins commented 6 years ago

Hi @aizquierdo021

There is an option now called hideClasses,

so for example

L.easyPrint({
    title: 'My awesome print button',
    position: 'bottomright',
    sizeModes: ['A4Portrait', 'A4Landscape'],
        hideClasses: ['leaflet-control-zoom']
}).addTo(map);

Does that help?

aizquierdo021 commented 6 years ago

But I cannot show some text that I added to the map (map title and a little description that I would like to show when the map is printed)

Thanks so much!

rowanwins commented 6 years ago

So you want to print content outside of the map?

aizquierdo021 commented 6 years ago

for example something like this

image

I try with an easy example where I add an scale bar and despite of writing

hideClasses: ['leaflet-control-zoom'],

when I print I cannot see may scale bar image

The written code is... image

and finally...why if my map doesn´t fill the full page, 

#map {
    width: 700px;
    height: 700px; }
</style

when I print it appears some gray colors?

image

original map

image

thanks so much!

rowanwins commented 6 years ago

For the grey area can you try and set the tileWait option to a value like 1000 or 2000, that should force the print operation for the tiles to be rendered, oh and also pass in the tileLayer option too!

To add text to the map you might be able to add listen to an some of the events triggered by the plugin and move some of your dom on to the map. For example there are events that get fired easyPrint-start and easyPrint-finished

I'll take a look into the hideClasses thing and see what I can work out there.

rowanwins commented 6 years ago

And also add hideControlContainer option to false, I think that'll keep your scale bar in place

aizquierdo021 commented 6 years ago

I don´r undertand you about how can I text something in the map...

About hideclasses option...If I Hide controlcontainer and hide only controol zoom, the result is the same ; Nothing shown to print

Here is my code `<!DOCTYPE html>

`

brittbaker commented 6 years ago

Hi, Has any progress been made on only showing certain controls on the map? I am having this problem too (In addition to the font changing from the sans-serif font family to serif and messing up the legend formatting in Chrome). Thank you for any help you can provide.

L.easyPrint({ title: 'Export to png file', position: 'topleft', exportOnly: 'true', filename: 'VectorDatabaseMap', hideControlContainer:false, hideClasses: ['leaflet-control-zoom'] }).addTo(map);

Output: vectordatabasemap 79

tapiamcclung commented 6 years ago

After searching bundle.js, I found that neither the hideClasses option nor the _toggleClasses function are defined, whereas the src does https://github.com/rowanwins/leaflet-easyPrint/blob/75b3193cbe40b1e90c7f677a63d0405ad9e906f2/src/index.js#L14 https://github.com/rowanwins/leaflet-easyPrint/blob/75b3193cbe40b1e90c7f677a63d0405ad9e906f2/src/index.js#L111 https://github.com/rowanwins/leaflet-easyPrint/blob/75b3193cbe40b1e90c7f677a63d0405ad9e906f2/src/index.js#L200 https://github.com/rowanwins/leaflet-easyPrint/blob/75b3193cbe40b1e90c7f677a63d0405ad9e906f2/src/index.js#L429

Maybe some other things have been left out of your build.