Leaflet js is a light weight JavaScript library which is used for deploying maps on a web page. It consists of a JavaScript library with absolutely no dependencies, making it unique than other libraries.

It provides access to a range of functions which will allow you to present a map.

Features: –
1. It supports most desktops and mobile platforms.
2. It consists of 34KB of JavaScript which is mapped with a HTML file.
3. It is an open source library and has a vibrant and active community.
4. It is equally popular to OpenLayers and Google Maps API
5. Leaflet is used mostly by GIS developers as it is known for its accuracy in determining location.

Example: –

Getting Started with Leaflet:
Let’s start by creating a simple map with the help of Leaflet with just few lines of code.
As it is a web map, it is mandatory that it will be hosted with the help of a web page. Hence, pre-requisite for a leaflet map is knowing how to create an HTML file.

Create a file named “map.html”

Steps to Create a Map
Step 1: – Reference the Leaflet.js library and the CSS file
Referencing the Leaflet library can be done in two ways.
First, by using the hosted version or CDN (Content Delivery Network) and second one is to download the leaflet.js library and host it on your own web server.

Accessing Leaflet.js via CDN:

Downloading the Leaflet.js library
For that, the user needs to download the appropriate package from the official website.
After downloading the pre-built package, it is linked to the appropriate path (link and script tags).
Step 2: – Creating a div element for the map
Create a div element of map with id attribute which provides styling features with appropriate height and width.

Step 3: – Creating a map object
It is important to create a Map Object with the help of which it will be easier to display the view of map or add overlays to the same.

The variable mymap is a map object created by using setView function which accepts 3 parameters latitude, longitude and zoom level.
Later, a new layer is being added to the map named tileLayer.
The TileLayer object’s constructor takes as its first parameter a URL which specifies the application where to get the data from.
• The {s}, {z}, {x}, and {y} in the URL represent the following:
• {s} allows one of the subdomains of the primary domain to serve tile requests, enabling our application to make multiple requests simultaneously, and thereby download tiles much faster.
• {x} and {y} define the tile coordinates.
• {z} represents the zoom level.
Finally, Tilelayer.addTo() method is called which includes the map object where we want the layer to appear.
Output: –

GeoJSON:
It is an extension of JSON (JavaScript Object Notation) which gives the complete geometrical details of all geographical area which we want to cover and display on the map.
With the help of these geometries and figures, a developer can create an overlay with polylines and polygons. GeoJson is like a boon to all developers who associate maps and their data in programming.
It is considered as a highly convenient way of displaying geospatial features i.e. their attributes and other data in a portable way.
Example: –

{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
        "properties": {"prop0": "value0"}
        },
      { "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
        "properties": {
          "prop0": "value0",
          "prop1": 0.0
          }
        },
      { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         }
       ] }

Importing External Data
Step 1: Create a database namely “homedb”.

create DATABASE homedb;

Step 2: Create a table “worlddata”. The structure of the table is represented as below:

Step 3: Insert the records in this specified table. These records will be fetched to display map

INSERT INTO `worlddata` (`name`, `latitude`, `longitude`) VALUES
(‘New York’, ‘41’, ‘-74’),
(‘Boston’, ‘42’, ‘-71’),
(‘Atlanta’, ‘35’, ‘-79’),
(‘Miami’, ‘26’, ‘-80’),
(‘Houston, ‘30’, ‘-95’),

The result of search query:
Select * from worlddata;
Output: –

Step 4: Connect with database with PHP script and fetch the records

";
                if ($x ";
                if ($x 
Output: -
Step 5: HTML page which will display the map

Output: –

// ]]>

The post Get Started With Leaflet JS appeared first on Eduonix Blog.