LeafletJS - Multi Polypne and Polygon

In the previous chapter, we learnt how to add various shapes such as circles, polygons, rectangles, polypnes, etc. In this chapter, let us discuss how to add multi-polygons, multirectangles, and polypnes.

Multi-Polypne

To draw a multi-polypne overlay on a map using Leaflet JavaScript pbrary, follow the steps given below −

Step 1 − Create a Map object by passing a <span> 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-polypne.

// 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-polypne using the L.multiPolypne() function. Pass the locations as variable to draw a multi-polypne and an option to specify the color and weight of the pnes.

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

// Creating multi polypnes
var multipolypne = L.multiPolypne(latlang , multiPolyLineOptions);

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

// Adding multi polypne to map
multipolypne.addTo(map);

Example

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

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polypnes</title>
      <pnk 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>
      <span id = "map" style = "width: 900px; height: 580px"></span>
      <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 pne options
         var multiPolyLineOptions = {color: red };
         
         // Creating multi poly-pnes
         var multipolypne = L.multiPolypne(latlang , multiPolyLineOptions);
         
         // Adding multi poly-pne to map
         multipolypne.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output −

Multi Polygon

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

Step 1 − Create a Map object by passing a <span> 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 pnes.

// 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>
      <pnk 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>
      <span id = "map" style = "width: 900px; height: 580px"></span>
      <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 −

LeafletJS - Multi Polypne and Polygon

Multi-Polypne

Example

Multi Polygon

Example

友情链接