Leaflet Tutorial Beginer – Leaflet Marker

Leaflet Tutorial Beginer – Leaflet Marker – Brilliansolution. To mark a single position on the chart, pamphlet provides labels. These labels use a standard symbol and these symbols can be customized. In this chapter, we will see how to add labels and how to customize, amp , and remove them.

Contents

Adding a Simple Leflet Marker

To add a marker to 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 − Instantiate the Marker class by passing a latlng object representing the position to be marked, as shown below.

// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

Step 5 − Add the marker object created in the previous steps to the map using the addTo() method of the Marker class.

// Adding marker to the map
marker.addTo(map);

Example

The following code sets the marker on the city named Hyderabad (India).

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</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: [17.385044, 78.486671],
            zoom: 10
         }
         // 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 a marker
         var marker = L.marker([17.385044, 78.486671]);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output −

Leaflet Tutorial Beginer - Leaflet Marker

Binding Pop-ups to the Marker

To bind a simple popup displaying a message to a marker, 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 − Instantiate the Marker class by passing a latlng object representing the position to be marked.

Step 5 − Attach popup to the marker using bindPopup() as shown below.

// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

Step 6 − Finally, add the Marker object created in the previous steps to the map using the addTo() method of the Marker class.

Example

The following code sets the marker on the city Hyderabad (India) and adds a pop-up to it.

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</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: [17.385044, 78.486671],
            zoom: 15
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);         // Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);    // Creating a Marker
         
         // Adding popup to the marker
         marker.bindPopup('This is Tutorialspoint').openPopup();
         marker.addTo(map); // Adding marker to the map
      </script>
   </body>
   
</html>

It generates the following output

Marker Options

While creating a marker, you can also pass a marker options variable in addition to the latlang object. Using this variable, you can set values to various options of the marker such as icon, dragable, keyboard, title, alt, zInsexOffset, opacity, riseOnHover, riseOffset, pane, dragable, etc.

To create a map using map options, you need to 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 variable for markerOptions and specify values to the required options.

Create a markerOptions object (it is created just like a literal) and set values for the options iconUrl and iconSize.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

Step 5 − Instantiate the Marker class by passing a latlng object representing the position to be marked and the options object, created in the previous step.

// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

Step 6 − Finally, add the Marker object created in the previous steps to the map using the addTo() method of the Marker class.

Example

The following code sets the marker on the city Hyderabad (India). This marker is clickable, dragable with the title MyLocation.

<html>
   <head>
      <title>Marker Options Example</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: [17.385044, 78.486671],
            zoom: 10
         }
         // 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 a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output

Marker Custom Icons

Instead of the default icon provided by the Leaflet library, you can also add your own icon. You can use the following steps to add a custom icon to the map instead of the default one.

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 variable for markerOptions and specify values to the required options −

iconUrl − As a value to this option, you need to pass a String object specifying the path of the image which you want to use as an icon.
iconSize − Using this option, you can specify the size of the icon.

Note − In addition to these, you can also set values to other options such as iconSize, shadowSize, iconAnchor, shadowAnchor, and popupAnchor.

Create a custom icon using L.icon() by passing the above options variable as shown below.

// Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

// Creating a custom icon
var customIcon = L.icon(iconOptions);

Step 5 − Create a variable for markerOptions and specify values to the required options. In addition to these, specify the icon by passing the icon variable created in the previous step as a value.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

Step 6 − Instantiate the Marker class by passing a latlng object representing the position to be marked and the options object created in the previous step.

// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

Step 7 − Finally, add the Marker object created in the previous steps to the map using the addTo() method of the Marker class.

Example

The following code sets the marker on the location of Tutorialspoint. Here we are using the logo of Tutorialspoint instead of the default marker.

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</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: [17.438139, 78.395830],
            zoom: 10
         }
         // 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);
         
         // Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
         // Creating a custom icon
         var customIcon = L.icon(iconOptions);
         
         // Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
         // Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);
         
         // Adding popup to the marker
         marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

It generates the following output

Marker

L.Marker is used to display clickable/draggable icons on the map. Extends Layer.

Usage example

L.marker([50.5, 30.5]).addTo(map);

Creation

Factory	Description
`L.marker(<LatLng> latlng, <Marker options> options?)`	Instantiates a Marker object given a geographical point and optionally an options object.

Options

Option	Type	Default	Description
`icon`	`Icon`	`*`	Icon instance to use for rendering the marker. See Icon documentation for details on how to customize the marker icon. If not specified, a common instance of `L.Icon.Default` is used.
`keyboard`	`Boolean`	`true`	Whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
`title`	`String`	`''`	Text for the browser tooltip that appear on marker hover (no tooltip by default). Useful for accessibility.
`alt`	`String`	`'Marker'`	Text for the `alt` attribute of the icon image. Useful for accessibility.
`zIndexOffset`	`Number`	`0`	By default, marker images zIndex is set automatically based on its latitude. Use this option if you want to put the marker on top of all others (or below), specifying a high value like `1000` (or high negative value, respectively).
`opacity`	`Number`	`1.0`	The opacity of the marker.
`riseOnHover`	`Boolean`	`false`	If `true`, the marker will get on top of others when you hover the mouse over it.
`riseOffset`	`Number`	`250`	The z-index offset used for the `riseOnHover` feature.
`pane`	`String`	`'markerPane'`	`Map pane` where the markers icon will be added.
`shadowPane`	`String`	`'shadowPane'`	`Map pane` where the markers shadow will be added.
`bubblingMouseEvents`	`Boolean`	`false`	When `true`, a mouse event on this marker will trigger the same event on the map (unless `L.DomEvent.stopPropagation` is used).
`autoPanOnFocus`	`Boolean`	`true`	When `true`, the map will pan whenever the marker is focused (via e.g. pressing `tab` on the keyboard) to ensure the marker is visible within the map’s bounds

Draggable marker options

Option	Type	Default	Description
`draggable`	`Boolean`	`false`	Whether the marker is draggable with mouse/touch or not.
`autoPan`	`Boolean`	`false`	Whether to pan the map when dragging this marker near its edge or not.
`autoPanPadding`	`Point`	`Point(50, 50)`	Distance (in pixels to the left/right and to the top/bottom) of the map edge to start panning the map.
`autoPanSpeed`	`Number`	`10`	Number of pixels the map should pan by.

▶ Options inherited from Interactive layer▶ Options inherited from Layer

Events

Event	Data	Description
`move`	`Event`	Fired when the marker is moved via `setLatLng` or by dragging. Old and new coordinates are included in event arguments as `oldLatLng`, `latlng`.

Dragging events

Event	Data	Description
`dragstart`	`Event`	Fired when the user starts dragging the marker.
`movestart`	`Event`	Fired when the marker starts moving (because of dragging).
`drag`	`Event`	Fired repeatedly while the user drags the marker.
`dragend`	`DragEndEvent`	Fired when the user stops dragging the marker.
`moveend`	`Event`	Fired when the marker stops moving (because of dragging).

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

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Method	Returns	Description
`getLatLng()`	`LatLng`	Returns the current geographical position of the marker.
`setLatLng(<LatLng> latlng)`	`this`	Changes the marker position to the given point.
`setZIndexOffset(<Number> offset)`	`this`	Changes the zIndex offset of the marker.
`getIcon()`	`Icon`	Returns the current icon used by the marker
`setIcon(<Icon> icon)`	`this`	Changes the marker icon.
`setOpacity(<Number> opacity)`	`this`	Changes the opacity of the marker.

Other 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 marker (as a GeoJSON `Point` Feature).

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

Properties

Interaction handlers

Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see Handler methods). Example:

marker.dragging.disable();

Property	Type	Description
`dragging`	`Handler`	Marker dragging handler (by both mouse and touch). Only valid when the marker is on the map (Otherwise set `marker.options.draggable`).

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

Tags:leaflet leaflet marker marker markers

brillian

Leaflet Tutorial Beginer – Leaflet Marker

Adding a Simple Leflet Marker

Example

Binding Pop-ups to the Marker

Example

Marker Options

Example

Marker Custom Icons

Example

Marker

Usage example

Creation

Options

Draggable marker options

Events

Dragging events

Methods

Other methods

Properties

Interaction handlers

Like this:

Related

Leave a Reply Cancel reply

Adding a Simple Leflet Marker

Example

Binding Pop-ups to the Marker

Example

Marker Options

Example

Marker Custom Icons

Example

Marker

Usage example

Creation

Options

Draggable marker options

Events

Dragging events

Methods

Other methods

Properties

Interaction handlers

Share this:

Like this:

Related

Related Posts

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

Membuat Marker dengan Leaflet / Open Street Map

Leaflet Tutorial Intermediate – How to Create Legends

Tutorial Leaflet Beginner – Leaflet Popup and Tooptip

Membuat Peta dan Marker dengan Leaflet

Tutorial Leaflet Expert – Leaflet GeoJson

Leave a Reply Cancel reply