Download MMAP als PDF Gratis

Hallo jongens, welkom terug. In de laatste video hebben we enkele coole functionaliteiten van Leaflet toegevoegd, zoals de schaal in de volledig scherm kaartweergave functie en ook de functie voor het weergeven van kaartcoördinaten. In deze video ga ik een andere functie toevoegen, genaamd de printfunctionaliteit van de kaart. Hiervoor wil ik gewoon een knop toevoegen hier, dus de knopnaam kan de knop zijn met de klasse misschien 'print map' en dan voeg ik de tekst 'print kaart' toe. Oké, nu kun je de print kaart knop zien, maar het doet nog niets. Dus we gaan deze functie hier toevoegen. Wanneer ik hierop klik, kunnen we in jQuery het element selecteren met behulp van de klassenaam met de dot-functie, misschien 'print map'. Ja, hier hebben we deze knop geselecteerd en dan 'print map.click', we kunnen deze klikfunctie vinden en dan moet het doen wat we willen. Wanneer we op de print kaart knop klikken, moet het 'window.print()' aanroepen. Dat betekent dat het de standaardfunctie van JavaScript is, dus we kunnen gewoon onze kaart afdrukken wanneer we de printmap functie klikken. Laten we het proberen. Ja, het werkt nu. Nu kunnen we een kaart afdrukken, maar door de grootte van de kaart op onze schermgrootte is het niet responsief. Dat betekent dat het op de tweede pagina verschijnt en we zagen alles binnen de kaart en ook de kaart is niet responsief, het raakt de rand, dus dat is niet het goede gedrag, maar we hebben het op de een of andere manier geïmplementeerd. Voor deze printfunctie hebben we eigenlijk een coole plugin genaamd 'leaflet-browser-print', dus misschien moeten we deze hier gebruiken. Ja, ik ga deze plugin gebruiken, dus daarvoor zal ik gewoon de code downloaden met git of je kunt gewoon de zip hier downloaden, dat is ook goed. Dus ik ga terug naar de downloadmap en ja, nu is het gedownload. Als ik naar de 'leaflet-browser-print' directory ga, betekent dat dat ik dit bestand al heb gedownload. We moeten wat documentatie lezen over hoe we deze plugin kunnen implementeren. Hiervoor moeten we deze 'browserprint.min.js' in onze code toevoegen, dus ik zal het handmatig van hieruit doen. Oké, hierin hebben we deze hoofdfunctie en ik zal dit bestand gewoon kopiëren en dan in de map plakken. Sorry, map en dan zal ik een directory maken genaamd 'leaf' en het hier plakken. Dus nu kan ik deze bibliotheek importeren. Dus na jQuery zal ik dit script importeren, src en dan './leaf' en dan 'leaflet-browser-print.js', zoiets. Dus na het importeren hiervan, wat we moeten doen is deze functie doorgeven, dus hier 'L.control.browserPrint().addTo(map)'. Oké, laten we het hier doen. Oké, kaart print. Ja, misschien kopieer ik dit gewoon en plak het hier. Oké, nu zal het automatisch ons printicoon toevoegen en dan kunnen we gewoon onze kaart afdrukken. Dus als er verschillende opties zijn, kunnen we gewoon de papieren grootte selecteren, of het staand of liggend is, of een aangepaste instelling. Misschien probeer ik eerst automatisch. Dus ja, het reageert niet goed. Goed geïmporteerd, ja, het is goed gekomen. Dus ja...