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

width undefined #32

Closed sommerbernd closed 7 years ago

sommerbernd commented 7 years ago

@rowanwins Me again. Updated demo is working. But when I try to save a map shown in my own app I get this error with Chrome debugger:

bundle.js:1 oops, something went wrong! TypeError: Cannot read property 'width' of undefined at e._resizeAndPrintMap (bundle.js:1) at bundle.js:1 at

Setting the width of the map container to 900px (instead of 96%) does not help. Can I do something else to make my app save the map? bsommer@bsommer.de

rowanwins commented 7 years ago

Can you show me a snippet of how you are initiating the plugin, eg what options you are passing?

sommerbernd commented 7 years ago

Attached is my code.js file.

This is the index.html - built with data from code.js - when I run the app directly with AppStudio on Windows desktop:

<!DOCTYPE HTML>

WoBinIch

Von: Rowan Winsemius [mailto:notifications@github.com] Gesendet: Donnerstag, 27. Juli 2017 22:36 An: rowanwins/leaflet-easyPrint leaflet-easyPrint@noreply.github.com Cc: sommerbernd bsommer@bsommer.de; Author author@noreply.github.com Betreff: Re: [rowanwins/leaflet-easyPrint] width undefined (#32)

Can you show me a snippet of how you are initiating the plugin, eg what options you are passing?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rowanwins/leaflet-easyPrint/issues/32#issuecomment-318479048 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF5h5X9i5ukzp7X_BOBsemd6Lp5s0dmRks5sSPS7gaJpZM4OlkB4 . https://github.com/notifications/beacon/AF5h5QDvW3Aril308oonZxm5oBzRHIYPks5sSPS7gaJpZM4OlkB4.gif

sommerbernd commented 7 years ago

This is the contents of code.js: mapNSB = L.map(mapContainer);

L.easyPrint({ title: 'Sie können auch als PDF drucken/speichern und die Karte als Anhang senden!', position: 'topleft', sizeModes: ['Current','A4Portrait', 'A4Landscape'], exportOnly: true, filename: 'MeinePositionKarte' }).addTo(mapNSB);

ShowMapBasicButton2.onclick = function() {

 mapNSB.locate({
     setView: true,
       enableHighAccuracy: true,
       maximumAge: 15000,
       timeout: 3000000
 });
 mapNSB.on("locationfound", onLocationFound);
     L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution: "<a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors",
     crossOrigin: true
 }).addTo(mapNSB);

};

function onLocationFound(e) {
var radius = e.accuracy / 2; L.marker(e.latlng).addTo(mapNSB).bindPopup("Befinde mich ungefähr im Radius von " + radius + "m um diesen Punkt.").openPopup(); L.circle(e.latlng, radius).addTo(mapNSB); breiteStr = e.latlng.lat.toString(); laengeStr = e.latlng.lng.toString(); TextAreaForm1.value = "Koordinaten " + breiteStr + " (Breite) und " + laengeStr + " (Laenge) kopieren und in Maps App zur Darstellung in Karte einfuegen.";
}

ShowMapToForm2Button.onclick=function(){ ChangeForm(Form2); txtBody.value = TextAreaForm1.value; }

rowanwins commented 7 years ago

Does it happen with any of the size modes in particular or all of them? What if you try the print mode?

sommerbernd commented 7 years ago

without „exportOnly: true,“

I get this, permanently circling – with any size mode:

and Chrome debugger will show:

bundle.js:1 oops, something went wrong! TypeError: Cannot read property 'width' of undefined at e._resizeAndPrintMap (bundle.js:1) at bundle.js:1 at

Von: Rowan Winsemius [mailto:notifications@github.com] Gesendet: Sonntag, 30. Juli 2017 11:54 An: rowanwins/leaflet-easyPrint leaflet-easyPrint@noreply.github.com Cc: sommerbernd bsommer@bsommer.de; Author author@noreply.github.com Betreff: Re: [rowanwins/leaflet-easyPrint] width undefined (#32)

Does it happen with any of the size modes in particular or all of them? What if you try the print mode?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rowanwins/leaflet-easyPrint/issues/32#issuecomment-318890826 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF5h5ZlgpX6A8WyBY3B85xgr7_7PQjdYks5sTFLLgaJpZM4OlkB4 . https://github.com/notifications/beacon/AF5h5cuc7lHx0i9JrZslYVrz-3gaFm-Uks5sTFLLgaJpZM4OlkB4.gif

rowanwins commented 7 years ago

Hi @sommerbernd

I've just published v2.1.0 to npm so perhaps try and install that and see how you go. I've also included a sourcemap so hopefully that should give you a more meaningful look at where the error is coming from.

Let me know how you get on

sommerbernd commented 7 years ago

Thanks. Demo v2 is working fine. My adaptation is not:

Uncaught TypeError: Cannot read property 'isLoading' of undefined

at bundle.js:1

(anonymous) @ bundle.js:1

bundle.js:1 Uncaught TypeError: Cannot read property 'isLoading' of undefined

at bundle.js:1

(anonymous) @ bundle.js:1

Is it still bundle.js (think so, because your demo runs with bundle.js) or, as you write:

Usage

Step 1. Include the required js files in your document.

    <script src="dist/leaflet.easyPrint.js"></script>

Bernd

Von: Rowan Winsemius [mailto:notifications@github.com] Gesendet: Dienstag, 1. August 2017 14:15 An: rowanwins/leaflet-easyPrint leaflet-easyPrint@noreply.github.com Cc: sommerbernd bsommer@bsommer.de; Mention mention@noreply.github.com Betreff: Re: [rowanwins/leaflet-easyPrint] width undefined (#32)

Hi @sommerbernd https://github.com/sommerbernd

I've just published v2.1.0 to npm so perhaps try and install that and see how you go. I've also included a sourcemap so hopefully that should give you a more meaningful look at where the error is coming from.

Let me know how you get on

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rowanwins/leaflet-easyPrint/issues/32#issuecomment-319352941 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF5h5U_0_hznD-1soAdLO4-g7TOYwrwKks5sTxangaJpZM4OlkB4 . https://github.com/notifications/beacon/AF5h5d4pSe6KMJTXm6_drPCTqI-4QN4Fks5sTxangaJpZM4OlkB4.gif

rowanwins commented 7 years ago

Hey @sommerbernd ,

yeah sorry I forgot to update that bit of the docs so thebundle.js is correct.

So if I understand correctly you're getting this error when you try to integrate an leaflet app with the plugin into AppStudio. If I look at the AppStudio website it looks like it's being deprecated. I don't really have any idea about AppStudio or it's development so I probably can't provide any assistance sorry.

sommerbernd commented 7 years ago

Hi @rowanwins

Thanks. The one and only problem in my case seems to be: how to get “width” (of what?) defined so that bundle.js can handle it.

Sorry that I did not deliver the precise url: https://www.nsbasic.com/ .

In the beginning they called the tool “nsbasic”. It translated a sort of Basic into JavaScript. Now it is “NSB/AppStudio” and one (me) usually writes code directly in JavaScript/HTML/….

Bernd

Von: Rowan Winsemius [mailto:notifications@github.com] Gesendet: Mittwoch, 2. August 2017 06:18 An: rowanwins/leaflet-easyPrint leaflet-easyPrint@noreply.github.com Cc: sommerbernd bsommer@bsommer.de; Mention mention@noreply.github.com Betreff: Re: [rowanwins/leaflet-easyPrint] width undefined (#32)

Hey @sommerbernd https://github.com/sommerbernd ,

yeah sorry I forgot to update that bit of the docs so thebundle.js is correct.

So if I understand correctly you're getting this error when you try to integrate an leaflet app with the plugin into AppStudio. If I look at the AppStudio website https://appstudio.windows.com/en-us it looks like it's being deprecated. I don't really have any idea about AppStudio or it's development so I probably can't provide any assistance sorry.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rowanwins/leaflet-easyPrint/issues/32#issuecomment-319562968 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF5h5S7b8amW7nTIadaqNM8vpuD24Z-cks5sT_iOgaJpZM4OlkB4 . https://github.com/notifications/beacon/AF5h5Uia-3zvCglb5fi1LrIeRsMFfGiUks5sT_iOgaJpZM4OlkB4.gif

rowanwins commented 7 years ago

Hmm ok, so looking at your config you aren't passing in a tile layer which is why you might be getting this issue bundle.js:1 Uncaught TypeError: Cannot read property 'isLoading' of undefined

So I'd probably have code look something like


var tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "<a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors",
    crossOrigin: true
}).addTo(mapNSB);

L.easyPrint({
        title: 'Sie können auch als PDF drucken/speichern und die Karte als Anhang senden!',
        tileLayer: tiles,
        position: 'topleft',
        sizeModes: ['Current','A4Portrait', 'A4Landscape'],
        exportOnly: true,
        filename: 'MeinePositionKarte'
       }).addTo(mapNSB);

Notice that I've added the tileLayer property to the options.

This is a bug in my code that means it's looking for this config option even though it's not mandatory. So I'll release a fix but the above should hopefully get you past the bug for the timebeing.

sommerbernd commented 7 years ago

Thanks so much.

I tried this. Always error with “width … undefined”.

I am sure that it is a problem with my code. Don’t worry.

Kind regards

Bernd

Von: Rowan Winsemius [mailto:notifications@github.com] Gesendet: Mittwoch, 2. August 2017 09:36 An: rowanwins/leaflet-easyPrint leaflet-easyPrint@noreply.github.com Cc: sommerbernd bsommer@bsommer.de; Mention mention@noreply.github.com Betreff: Re: [rowanwins/leaflet-easyPrint] width undefined (#32)

Hmm ok, so looking at your config you aren't passing in a tile layer which is why you might be getting this issue bundle.js:1 Uncaught TypeError: Cannot read property 'isLoading' of undefined

So I'd probably have code look something like

var tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png https://%7bs%7d.tile.openstreetmap.org/%7bz%7d/%7bx%7d/%7by%7d.png ", { attribution: "OpenStreetMap contributors", crossOrigin: true }).addTo(mapNSB);

L.easyPrint({ title: 'Sie können auch als PDF drucken/speichern und die Karte als Anhang senden!', tileLayer: tiles, position: 'topleft', sizeModes: ['Current','A4Portrait', 'A4Landscape'], exportOnly: true, filename: 'MeinePositionKarte' }).addTo(mapNSB);

Notice that I've added the tileLayer property to the options.

This is a bug in my code that means it's looking for this config option even though it's not mandatory. So I'll release a fix but the above should hopefully get you past the bug for the timebeing.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rowanwins/leaflet-easyPrint/issues/32#issuecomment-319593118 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF5h5YwKLSx3lKi_O16oA1WSFyPdzGarks5sUCbegaJpZM4OlkB4 . https://github.com/notifications/beacon/AF5h5cI73cHyKo1_dLrhYYJyKiy515qrks5sUCbegaJpZM4OlkB4.gif