Tutorial Leaflet – Polyline 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.

Contents

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 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 −

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

Factory	Description
`L.polyline(<LatLng[]> latlngs, <Polyline options> options?)`	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

Option	Type	Default	Description
`smoothFactor`	`Number`	`1.0`	How much to simplify the polyline on each zoom level. More means better performance and smoother look, and less means more accurate representation.
`noClip`	`Boolean`	`false`	Disable 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

Method	Returns	Description
`toGeoJSON(<Number\|false> precision?)`	`Object`	Coordinates 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)`	`this`	Replaces all the points in the polyline with the given array of geographical points.
`isEmpty()`	`Boolean`	Returns `true` if the Polyline has no LatLngs.
`closestLayerPoint(<Point> p)`	`Point`	Returns the point closest to `p` on the Polyline.
`getCenter()`	`LatLng`	Returns the center (centroid) of the polyline.
`getBounds()`	`LatLngBounds`	Returns the `LatLngBounds` of the path.
`addLatLng(<LatLng> latlng, <LatLng[]> latlngs?)`	`this`	Adds 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

Factory	Description
`L.polygon(<LatLng[]> latlngs, <Polyline options> options?)`

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

Method	Returns	Description
`toGeoJSON(<Number\|false> precision?)`	`Object`	Coordinates values are rounded with `formatNum` function with given `precision`. Returns a `GeoJSON` representation of the polygon (as a GeoJSON `Polygon` or `MultiPolygon` Feature).
`getCenter()`	`LatLng`	Returns 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

Categories:LeafletLeaflet

brillian

Tutorial Leaflet – Polyline and Polygon

Multi-Polyline

Example

Multi Polygon

Example

Polyline

Usage example

Creation

Options

Events

Methods

Polygon

Usage example

Creation

Options

Events

Methods

Like this:

Related

Leave a Reply Cancel reply

Multi-Polyline

Example

Multi Polygon

Example

Polyline

Usage example

Creation

Options

Events

Methods

Polygon

Usage example

Creation

Options

Events

Methods

Share this:

Like this:

Related

Related Posts

Tutorial Leaflet Beginner – Leaflet Quick Start

Leaflet Tutorial Intermediate – How to Create Legends

Tutorial Leaflet Intermediate – Leaflet Polygon

Tutorial Leaflet Expert – Leaflet GeoJson

Cara Sederhana Membuat Peta Tematik / Choropleth Menggunakan Leaflet JS -Leaflet

Membuat Marker dengan Leaflet / Open Street Map

Leave a Reply Cancel reply