Leaflet Tutorial – Vector Layers

leaflet vector layers

Leaflet Tutorial – Vector Layers – Brilliansolution. In the former chapter, we learned how to use labels in Leaflet. Along with labels, we can also add colorful shapes similar as circles, polygons, blocks, polylines, etc. In this chapter, we will bandy how to use the shapes handed by Google Charts.

leaflet vector layers

Polyline Vector Layers

To draw polyline overlay on a chart using Leaflet JavaScript library, follow the way given below −

  • Step 1 − produce a Chart object by passing a element( String or object) and chart options( voluntary).
  • Step 2 − produce a Subcaste object by passing the URL of the asked pipe.
  • Step 3 − Add the subcaste object to the chart using the addLayer() system of the Map class.
  • Step 4 − produce a latlangs variable to hold the points to draw polyline, as shown below.

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.000538, 81.804034],
   [17.686816, 83.218482]
];

Step 5 − Create a polyline using the L.polyline(). To draw the polyline, pass the locations as variable and an option to specify the color of the lines.

// Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});

Step 6 − Add the polyline to the map using the addTo() method of the Polyline class.

// Adding to poly line to map
polyline.addTo(map);

Example Vector Layers

Following is the code which draws a polyline, covering the cities Hyderabad, Vijayawada, Rajamahendrawaram and, Vishakhapatnam (India).

DOCTYPE html>
<html>
   <head>
      <title>Leaflet Poly lines</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 7
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.000538, 81.804034],
            [17.686816, 83.218482]
         ];
         // Creating a poly line
         var polyline = L.polyline(latlngs, {color: 'red'});
         
         // Adding to poly line to map
         polyline.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output

Polyline

Polygon

To draw a polygon overlay on a map using Leaflet JavaScript library, follow the steps given below −

Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional).

Step 2 − Create a Layer object by passing the URL of the desired tile.

Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

Step 4 − Create a latlangs variable to hold the points to draw the polygon.

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];

Step 5 − Create a polygon using the L.polygon(). Pass the locations/points as variable to draw the polygon, and an option to specify the color of the polygon.

// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

Step 6 − Add the polygon to the map using the addTo() method of the Polygon class.

// Adding to polygon to map
polygon.addTo(map);

Example Vector Layers

Following is the code to draw a polygon covering the cities Hyderabad, Vijayawada, and Vishakhapatnam (India).

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 7
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
         // Creating a polygon
         var polygon = L.polygon(latlngs, {color: 'red'});
         
         // Adding to polygon to map
         polygon.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output −

Polygon

Rectangle

To draw a Rectangle overlay on a map using Leaflet JavaScript library, follow the steps given below

Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional).

Step 2 − Create a Layer object by passing the URL of the desired tile.

Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

Step 4 − Create a latlangs variable to hold the points to draw a rectangle on the map.

// Creating latlng object
var latlngs = [
   [17.342761, 78.552432],
   [16.396553, 80.727725]
];

Step 5 − Create a rectangle using the L.rectangle() function. Pass the locations/points as a variable to draw a rectangle and rectangleOptions to specify the color and weight of the rectangle.

// Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}

// Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);

Step 6 − Add the rectangle to the map using the addTo() method of the Polygon class.

// Adding to rectangle to map
rectangle.addTo(map);

Example

Following is the code to draw a rectangle on the map using Leaflet JavaScript library.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Rectangle</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [16.506174, 80.648015],
            zoom: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         // Creating latlng object
         var latlngs = [
            [17.342761, 78.552432],
            [16.396553, 80.727725]
         ];
         var rectOptions = {color: 'Red', weight: 1}   // Creating rectOptions
        
         // Creating a rectangle
         var rectangle = L.rectangle(latlngs, rectOptions);
         rectangle.addTo(map);   // Adding to rectangle to map
      </script>
   </body>
   
</html>

It generates the following output −

Rectangle

Circle

To draw a circle overlay on a map using Leaflet JavaScript library follow the steps given below.

Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional).

Step 2 − Create a Layer object by passing the URL of the desired tile.

Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

Step 4 − Create a latlangs variable to hold the center of the circle as shown below.

// Center of the circle
var circleCenter = [17.385044, 78.486671];

Step 5 − Create a variable circleOptions to specify values to the options color, fillColor and, fillOpacity as shown below.

// Circle options
var circleOptions = {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0
}

Step 6 − Create a circle using L.circle(). Pass the center of the circle, radius, and the circle options to this function.

// Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);

Step 7 − Add the above-created circle to the map using the addTo() method of the Polyline class.

// Adding circle to the map
circle.addTo(map);

Example

Following is the code to draw a circle with the coordinates of the city Hyderabad as its radius.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Circle</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);        // Adding layer to the map
         var circleCenter = [17.385044, 78.486671];     // Center of the circle
         
         // Circle options
         var circleOptions = {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0
         }
         // Creating a circle
         var circle = L.circle(circleCenter, 50000, circleOptions);
         circle.addTo(map);     // Adding circle to the map
      </script>
   </body>
   
</html>>

It generates the following output −

Circle

Source : https://leafletjs.com/

keywords :

  • Leaflet Tutorial – Vector Layers
  • leaflet marker
  • leaflet markercluster
  • leaflet custom marker
  • react leaflet marker
  • maps marker pro
  • leaflet multiple markers
  • leaflet maps marker
  • custom marker leaflet
  • leaflet filter markers
  • marker react leaflet
  • mapsmarker leaflet
  • text marker
  • wordpress leaflet maps marker
  • leaflet map multiple markers
  • custom leaflet markers
  • leafletmaps

brillian

Leave a Reply

%d bloggers like this:
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Adblockers perform their job via blocking communication with ad-forcing servers, and by hiding the webpage elements containing commercial content. By referring to filter lists containing the addresses of ad servers, ad blockers seek matches in website elements and define what should be blocked.

Adblocking detection in its turn is performed through “bait content”. Invisible to the user, such bait is implemented the way adblockers recognize it as commercial content. As soon as the webpage finishes loading, the detection algorithm calls to the properties of the bait. If the bait is hidden, the algorithm recognizes that there’s an active adblocker. Although baits are different and have different levels of complexity, it’s not that hard to disable adblock detection.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock