Full Screen Control feature helps to view maps in full-screen mode. The full-screen control button is placed at the corner of the map, it allows you to go full-screen or exit full-screen. There are some third-party plugins available to extend OpenStreetMap functionality with Leaflet. Use the leaflet.fullscreen plugin to add full screen control in OpenStreetMap with Leaflet using JavaScript.

Open Street Map provides a marker icon by default. You can change the default marker icon image and customize the icon size in OpenStreetMap. Customizing the marker icon helps to match the OpenStreetMap with the website UI. This guide will show you how to customize the OpenStreetMap marker icon using JavaScript.

The window.print() method is the easiest solution to print HTML content in JavaScript. The Window print() method opens the browser’s default print dialog to print the current document. You can use this method to print dynamic HTML content using JavaScript. By default, the page orientation is set to portrait in the print dialog. You can change page orientation in the print dialog by adding CSS to the document header.

It’s always recommended for developers to use dynamic year in the copyright section so that the year can be changed automatically and updated with the current year. You can get the current year and add the dynamic year in HTML using JavaScript. Create a Date object and call the getFullYear() method to get the current year in JavaScript.

It’s always a good idea to add client-side validation before uploading file to the server. The client-side validation adds a great user experience to the file upload section. The file size validation can be added to the file upload field using JavaScript and jQuery. In this example code snippet, we will show you how to validate file size while uploading file using jQuery or JavaScript.

The display property is used to control the visibility of HTML elements with CSS. Sometimes we may require to change the visibility of elements dynamically in JavaScript. The element ID or class can be used to select and Show/Hide DIV using JavaScript. Use the Document:getElementsByClassName() method to show and hide element by class name using JavaScript.

The JavaScript setTimeout() method sets a timer to execute a function or specific code after a predefined time. If you want to refresh the page automatically after some specific time, the setTimeout() method is useful to do it in JavaScript. The location.reload() method helps to reload the current URL. Use these methods together to reload the page after 5 seconds using JavaScript.

Scroll to Div functionality is used to scroll the page to a specific element automatically. The page will navigate to a specific section of the page without scrolling manually. The scroll to HTML element feature can be integrated using JavaScript. Use scrollIntoView() method to scroll to an element in JavaScript.

Mostly, the value attribute of the option tag is used in the select box. Besides the option value, custom attributes can be defined in the option tag of the select dropdown. You can also get the custom attribute value from the select box with JavaScript. The attribute value of the selected option can be retrieved using JavaScript easily.