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

print button doesn't appear #55

Closed hikarym closed 6 years ago

hikarym commented 6 years ago

The print button doesn't appear and display the next error on the browser: Uncaught TypeError: L.easyPrint is not a function

My code is:

ZOOM_INITIAL_LEVEL = 15;
ZOOM_MAX_LEVEL = 18;
ZOOM_MIN_LEVEL = 10;
var map = L.map("map", {
    center: [-23.60, -46.55], // center map in this position
    zoom: ZOOM_INITIAL_LEVEL, // initial zoom level
    maxZoom: ZOOM_MAX_LEVEL, // maximum zoom level
    minZoom: ZOOM_MIN_LEVEL // minimum zoom level
});
var layerOSM = L.tileLayer(urlOSM, {attribution: copyOSM});
layerOSM.addTo(map);

var printer = L.easyPrint({
    tileLayer: layerOSM,
    sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
    position: 'topleft',
    filename: 'myMap',
    exportOnly: true,
    hideControlContainer: true
}).addTo(map);

function manualPrint () {
    printer.printMap('CurrentSize', 'MyManualPrint')
}
rowanwins commented 6 years ago

Hi @hikarym

How are you adding leaflet-easyPrint to your application?

Depending on your setup you either need to add it via a script tag (after you've added leaflet) or require the module if you're using a bundling tool like Webpack.

hikarym commented 6 years ago

Hi @rowanwins I am using html, javascript and leaflet without a bundling tool. Into the html file i put:

I thought that to add the printing control to my map it was only necessary to write this one: L.easyPrint({ tileLayer: layerOSM, sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], position: 'topleft', filename: 'myMap', exportOnly: true, hideControlContainer: true }).addTo(map);

rowanwins commented 6 years ago

In the head of your document I you need to add the bundle.js file from the dist folder of this repo, you need to add it after leaflet has been added

 <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
 <script src="dist/bundle.js"></script>

or you could use rawgit which means you grab the files directly via the web rather than having to download them

 <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
 <script src="https://cdn.rawgit.com/rowanwins/leaflet-easyPrint/gh-pages/dist/bundle.js"></script>
hikarym commented 6 years ago

Thanks @rowanwins I solved the problem :)