In this tutorial we are focusing on the Leafletjs basic shapes used for mapping. Leaflet.js can add together various shapes such as circles, polygons, rectangles, polylines, points or markers etc. hither, we will talk over how to apply the shapes provided by Google Maps. If you are not familiar with Leaflet.js, you tin can visit our another weblog Leaflet js – Getting Started – create Map Application. Besides if you lot already take geojson files, you can load the geojson files with leafletjs as a map.

Mark or Point

To depict point overlay on a map using leaflet javascript library, follow the steps beneath-

      • Create a Map object by passing a <div> element (Cord or object) and map options (optional).
      • Create a Layer object past passing the URL of the desired tile.
      • Add the layer object to the map using the addLayer() method of the Map class.
      • Create a latlangs variable for the point to draw indicate or marker, as shown below. 
                                  Var indicate = [38.9188702,-77.0708398];
      • Create a point or marker using the L.marker() . To draw the marker, pass the location equally variable. 
                                                                  L.marker([38.9188702,-77.0708398]).addTo(newMap);

        Polyline

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

      • Create a Map object by passing a <div> element (String or object) and map options (optional).
      • Create a Layer object past passing the URL of the desired tile.
      • Add the layer object to the map using the addLayer() method of the Map class.
      • Create a latlangs variable to concord the points to draw polyline, as shown below. 
                                                                  var latlngs = [ [38.91,-77.07], [37.77, -79.43], [39.04, -85.2]];
      • Create a polyline using the L.polyline() . To draw the polyline, laissez passer the locations as variable and an option to specify the colour of the lines. 
                                                                  var polyline = Fifty.polyline(latlngs, {color: 'red'});
      • Add the polyline to the map using the addTo() method of the Polyline course.

        Polygon

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

      • Create a Map object past passing a <div> element (String or object) and map options (optional).
      • Create a Layer object by passing the URL of the desired tile.
        Add together the layer object to the map using the addLayer() method of the Map grade.
      • Create a latlangs variable to hold the points to draw the polygon. 
                                                                  var latlngs = [                                                              [17.385044, 78.486671],                                                              [sixteen.506174, eighty.648015],                                                              [17.686816, 83.218482]                              ];
      • Create a polygon using the L.polygon() . Laissez passer the locations/points as variable to draw the polygon, and an option to specify the color of the polygon. 
                                                                  var polygon = Fifty.polygon(latlngs, {color: 'carmine'});
      • Add the polygon to the map using the addTo() method of the Polygon class.

shape-polygon

Rectangle

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

      • Create a Map object by passing a <div> element (Cord or object) and map options (optional).
      • Create a Layer object past passing the URL of the desired tile.
        Add the layer object to the map using the addLayer() method of the Map class.
      • Create a latlangs variable to hold the points to describe a rectangle on the map. 
                                                                  var latlngs = [[18.739046, lxxx.505755], [15.892787, 77.236081]];
      • Create a rectangle using the 50.rectangle() function. Pass the locations/points as a variable to draw a rectangle and rectangle Options to specify the colour and weight of the rectangle. 
                                  var rectOptions = {color: 'Cerise', weight: one}                  var rectangle = Fifty.rectangle(latlngs, rectOptions);
      • Add the rectangle to the map using the addTo() method of the rectangle grade. 
                                                                  rectangle.addTo(map);

shape-rect

Circumvolve

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

      • Create a Map object by passing a <div> element (String or object) and map options (optional).
      • Create a Layer object by passing the URL of the desired tile.
        Add the layer object to the map using the addLayer() method of the Map class.
      • Create a latlangs variable to hold the eye of the circle every bit shown below. 
                                                                  var circleCenter = [40.72, -74.00];
      • Create a variable circleOptions to specify values to the options color, fillColor and, fillOpacity as shown below. 

                                                                  var circleOptions = {                                                              color: 'red',                                                              fillColor: '#f03',                                                              fillOpacity: 0                              }
      • Create a circumvolve using L.circumvolve(). Pass the center of the circle, radius, and the circle options to this function. 

                                                                  var circle = L.circle(circleCenter, 50000, circleOptions);
      • Add the above-created circle to the map using the addTo() method of the Polyline class. 
                                                                  circumvolve.addTo(map);

shape-circle

This article contains the basic shapes created and used in the leaflet js scripting library. If you have any questions related to leaflet.js, delight permit us know in the annotate section.

Owner and Manager of a Private Limited company which serves individual to large calibration industries in the field of Maps and GIS. He is a Gold Medalist in Chiliad.Tech(Spatial Information technology) and owns some famous Engineering science blogs and website... Know more View all posts by Akshay Upadhyay