Leaflet Example

Spread the love

Preparing your page

Before writing any code for the map, you need to do the following preparation steps on your page:

  • Include Leaflet CSS file in the head section of your document:
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
  • Include Leaflet JavaScript file after Leaflet’s CSS:
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  • Put a div element with a certain id where you want your map to be:
    <div id="map"></div>
  • Make sure the map container has a defined height, for example by setting it in CSS:
    #map { height: 180px; }

Now you’re ready to initialize the map and do some stuff with it.

Mode Detail Check here : https://leafletjs.com/examples/quick-start/


Example 1

Quick Start – Leaflet
Marker
I am a standalone popup.

Code

<html lang="en">
   <head>
      <base target="_top">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Quick Start - Leaflet</title>
      <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
      <style>
         html, body {
         height: 100%;
         margin: 0;
         }
         .leaflet-container {
         height: 400px;
         width: 600px;
         max-width: 100%;
         max-height: 100%;
         }
      </style>
   </head>
   <body class="">
      <div id="map" style="width: 600px; height: 400px; position: relative; outline-style: none;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">
         <div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(25px, 43px, 0px);">
            <div class="leaflet-pane leaflet-tile-pane">
               <div class="leaflet-layer " style="z-index: 1; opacity: 1;">
                  <div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 19; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" src="https://tile.openstreetmap.org/13/4093/2723.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(56px, -91px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4094/2723.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(312px, -91px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4093/2724.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(56px, 165px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4094/2724.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(312px, 165px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4092/2723.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-200px, -91px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4095/2723.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(568px, -91px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4092/2724.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-200px, 165px, 0px); opacity: 1;"><img alt="" src="https://tile.openstreetmap.org/13/4095/2724.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(568px, 165px, 0px); opacity: 1;"></div>
               </div>
            </div>
            <div class="leaflet-pane leaflet-overlay-pane">
               <svg pointer-events="none" class="leaflet-zoom-animated" width="720" height="480" viewBox="-85 -83 720 480" style="transform: translate3d(-85px, -83px, 0px);">
                  <g>
                     <path class="leaflet-interactive" stroke="red" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f03" fill-opacity="0.5" fill-rule="evenodd" d="M141.20355555554852,171.94704600190744a42,42 0 1,0 84,0 a42,42 0 1,0 -84,0 "></path>
                     <path class="leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2" fill-rule="evenodd" d="M358 163L474 219L550 153z"></path>
                  </g>
               </svg>
            </div>
            <div class="leaflet-pane leaflet-shadow-pane"><img src="https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" alt="" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(300px, 247px, 0px);"></div>
            <div class="leaflet-pane leaflet-marker-pane"><img src="https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(300px, 247px, 0px); z-index: 247;"></div>
            <div class="leaflet-pane leaflet-tooltip-pane"></div>
            <div class="leaflet-pane leaflet-popup-pane">
               <div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(300px, 125px, 0px); bottom: -7px; left: -97px;">
                  <div class="leaflet-popup-content-wrapper">
                     <div class="leaflet-popup-content" style="width: 147px;">I am a standalone popup.</div>
                  </div>
                  <div class="leaflet-popup-tip-container">
                     <div class="leaflet-popup-tip"></div>
                  </div>
                  <a class="leaflet-popup-close-button" role="button" aria-label="Close popup" href="#close"><span aria-hidden="true">×</span></a>
               </div>
            </div>
            <div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(1.04803e+06px, 697336px, 0px) scale(4096);"></div>
         </div>
         <div class="leaflet-control-container">
            <div class="leaflet-top leaflet-left">
               <div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in" aria-disabled="false"><span aria-hidden="true">+</span></a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out" aria-disabled="false"><span aria-hidden="true">−</span></a></div>
            </div>
            <div class="leaflet-top leaflet-right"></div>
            <div class="leaflet-bottom leaflet-left"></div>
            <div class="leaflet-bottom leaflet-right">
               <div class="leaflet-control-attribution leaflet-control">
                  <a href="https://leafletjs.com" title="A JavaScript library for interactive maps">
                     <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" class="leaflet-attribution-flag">
                        <path fill="#4C7BE1" d="M0 0h12v4H0z"></path>
                        <path fill="#FFD500" d="M0 4h12v3H0z"></path>
                        <path fill="#E0BC00" d="M0 7h12v1H0z"></path>
                     </svg>
                     Leaflet
                  </a>
                  <span aria-hidden="true">|</span> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>
               </div>
            </div>
         </div>
      </div>
      <script>
         const map = L.map('map').setView([51.505, -0.09], 13);
         
         const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         	maxZoom: 19,
         	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map);
         
         const marker = L.marker([51.5, -0.09]).addTo(map)
         	.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
         
         const circle = L.circle([51.508, -0.11], {
         	color: 'red',
         	fillColor: '#f03',
         	fillOpacity: 0.5,
         	radius: 500
         }).addTo(map).bindPopup('I am a circle.');
         
         const polygon = L.polygon([
         	[51.509, -0.08],
         	[51.503, -0.06],
         	[51.51, -0.047]
         ]).addTo(map).bindPopup('I am a polygon.');
         
         
         const popup = L.popup()
         	.setLatLng([51.513, -0.09])
         	.setContent('I am a standalone popup.')
         	.openOn(map);
         
         function onMapClick(e) {
         	popup
         		.setLatLng(e.latlng)
         		.setContent(`You clicked the map at ${e.latlng.toString()}`)
         		.openOn(map);
         }
         
         map.on('click', onMapClick);
         
      </script>
   </body>
</html>

1 thought on “Leaflet Example”

  1. Pingback: How to Implement Leaflet Maps in PHP: A Step-by-Step Guide » Woolocker

Leave a Comment

Scroll to Top