Tutorial Leaflet – Polyline and Polygon

leaflet poyline and polygon

Tutorial Leaflet – Polyline and Polygon – Brilliansolution. In the former chapter, we learnt how to add colorful shapes similar as circles, polygons, blocks, polylines, etc. In this chapter, let us bandy how to addmulti-polygons, multirectangles, and polylines.

leaflet poyline and polygon

Multi-Polyline

To draw a multi-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 themulti-polyline.
// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 − Create a multi-polyline using the L.multiPolyline() function. Pass the locations as variable to draw a multi-polyline and an option to specify the color and weight of the lines.

// Creating multi polyline options
var multiPolyLineOptions = {color:'red'};

// Creating multi polylines
var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);

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

// Adding multi polyline to map
multipolyline.addTo(map);

Example

Following is the code to draw a multi-polyline covering the cities Hyderabad, Vijayawada, and Vishakhapatnam; and Kurnool, Bengaluru, and Chennai.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polylines</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 latlang = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         
         // Creating poly line options
         var multiPolyLineOptions = {color:'red'};
         
         // Creating multi poly-lines
         var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);
         
         // Adding multi poly-line to map
         multipolyline.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output −

Multi-Polyline Map

Multi Polygon

To draw a multi-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 multi polygon.

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 − Create a multi-polygon using the L.multiPolygon() function. Pass the locations as variable to draw the multi-polygon and an option to specify the color and weight of the lines.

// Creating multi polygon options
var multiPolygonOptions = {color:'red'};

// Creating multi polygon
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

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

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

Example

Following is the code to draw a multi-polygon touching the cities Hyderabad, Vijayawada, and Vishakhapatnam; and Kurnool, Bengaluru, and Chennai.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi 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 latlang = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         // Creating multi polygon options
         var multiPolygonOptions = {color:'red', weight:8};
         
         // Creating multi polygons
         var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
         
         // Adding multi polygon to map
         multipolygon.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output −

Multi Polygon Map

Polyline

A class for drawing polyline overlays on a map. Extends Path.

Usage example

// create a red polyline from an array of LatLng points
var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

You can also pass a multi-dimensional array to represent a MultiPolyline shape:

// create a red polyline from an array of arrays of LatLng points
var latlngs = [
    [[45.51, -122.68],
     [37.77, -122.43],
     [34.04, -118.2]],
    [[40.78, -73.91],
     [41.83, -87.62],
     [32.76, -96.72]]
];

Creation

FactoryDescription
L.polyline(<LatLng[]> latlngs, <Polyline optionsoptions?)Instantiates a polyline object given an array of geographical points and optionally an options object. You can create a Polyline object with multiple separate lines (MultiPolyline) by passing an array of arrays of geographic points.

Options

OptionTypeDefaultDescription
smoothFactorNumber1.0How much to simplify the polyline on each zoom level. More means better performance and smoother look, and less means more accurate representation.
noClipBooleanfalseDisable polyline clipping.

▶ Options inherited from Path▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

▶ Mouse events inherited from Interactive layer▶ Events inherited from Layer▶ Popup events inherited from Layer▶ Tooltip events inherited from Layer

Methods

MethodReturnsDescription
toGeoJSON(<Number|false> precision?)ObjectCoordinates values are rounded with formatNum function with given precision. Returns a GeoJSON representation of the polyline (as a GeoJSON LineString or MultiLineString Feature).
getLatLngs()LatLng[]Returns an array of the points in the path, or nested arrays of points in case of multi-polyline.
setLatLngs(<LatLng[]> latlngs)thisReplaces all the points in the polyline with the given array of geographical points.
isEmpty()BooleanReturns true if the Polyline has no LatLngs.
closestLayerPoint(<Pointp)PointReturns the point closest to p on the Polyline.
getCenter()LatLngReturns the center (centroid) of the polyline.
getBounds()LatLngBoundsReturns the LatLngBounds of the path.
addLatLng(<LatLnglatlng, <LatLng[]> latlngs?)thisAdds a given point to the polyline. By default, adds to the first ring of the polyline in case of a multi-polyline, but can be overridden by passing a specific ring as a LatLng array (that you can earlier access with getLatLngs).

▶ Methods inherited from Path▶ Methods inherited from Layer▶ Popup methods inherited from Layer▶ Tooltip methods inherited from Layer▶ Methods inherited from Evented

Polygon

A class for drawing polygon overlays on a map. Extends Polyline.

Note that points you pass when creating a polygon shouldn’t have an additional last point equal to the first one — it’s better to filter out such points.

Usage example

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];

var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polygon
map.fitBounds(polygon.getBounds());

You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape:

var latlngs = [
  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
  [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
];

Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape.

var latlngs = [
  [ // first polygon
    [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
    [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
  ],
  [ // second polygon
    [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
  ]
];

Creation

FactoryDescription
L.polygon(<LatLng[]> latlngs, <Polyline optionsoptions?)

Options

▶ Options inherited from Polyline▶ Options inherited from Path▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

▶ Mouse events inherited from Interactive layer▶ Events inherited from Layer▶ Popup events inherited from Layer▶ Tooltip events inherited from Layer

Methods

MethodReturnsDescription
toGeoJSON(<Number|false> precision?)ObjectCoordinates values are rounded with formatNum function with given precision. Returns a GeoJSON representation of the polygon (as a GeoJSON Polygon or MultiPolygon Feature).
getCenter()LatLngReturns the center (centroid) of the Polygon.

▶ Methods inherited from Polyline▶ Methods inherited from Path▶ Methods inherited from Layer▶ Popup methods inherited from Layer▶ Tooltip methods inherited from Layer▶ Methods inherited from Evented

Source : https://leafletjs.com/

keywords :

  • Leaflet Tutorial Beginer – Leaflet Marker
  • 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