ABSYZ ABSYZ

  • Home

    Welcome to ABSYZ

  • About us

    Who We Are

  • Our Expertise

    What We Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

Customizing the Markers in your Leaflet map

Home / Article & Blogs / Report / Customizing the Markers in your Leaflet map

Customizing the Markers in your Leaflet map

By nagensahu inReport, Salesforce, UI/UX

So you now have a leaflet map on a lightning component. Great !

But let’s say, you want to be able to differentiate between the many markers on the map, for e.g. your Accounts are put on a map, but you want to be able to color code them, or possibly use icons to show the type of business they are or prioritize them by color.

The usual leaflet Marker is blue. Like so:

Screen Shot 2018-01-21 at 3.26.07 AM

Now we want to change that boring blue marker. The documentation for Leaflet provides a way to override markers:  http://leafletjs.com/reference-1.3.0.html#icon

The object L.icon defines the marker icon and needs to be overridden with your custom icon definition for this. There are a number of options that need to be set.

var myIcon = L.icon({
iconUrl: 'my-icon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: 'my-icon-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

There is a useful github repo I found which has other colour Markers that can be directly used in lightning component code:

Leaflet Color Markers

Simple straightforward usage. You’ll then see colored markers.

Screen Shot 2018-01-21 at 3.37.47 AM.png

But what if there was also the need to use icons on these markers ? I found an amazing Github repo called Awesome Markers by Lennard Voogdt: Leaflet Awesome Markers

This code uses either of jQuery, Font Awesome or Ionicons to generate the icons on the markers.

The code however cannot be directly used in lightning components. For my example, I settled on Font Awesome as the source for icons and came up with a result like this:

Screen Shot 2018-02-15 at 10.52.57 AM.png

The approach to implementing this is in a Lightning component is broken down into:

  1. Using the Fontawesome library as a static resource. Remember to add the webfonts and css in the static resource. Both are needed to create the icons.
  2. Have the code dynamically generate the custom marker. Fontawesome generates icons using an html syntax like this
    <i class="fas fa-user"></i>

    This is essentially done dynamically within the L.Icon.extend function that will override your boring blue icon and add the Fontawesome icon in it. Most of the code in Leaflet-Awesome-Markers can be re-used as it is to generate our icons. I created a function that generates an icon (parameterized) and returns it for use.

  3. Use the function to generate a new marker at a location using the L.marker function. E.g. –
    //Add Marker with leaf Icon
    var leafIcon = helper.getIcon(
    {icon: 'leaf',
    markerColor: 'red'}
    );
    L.marker(["43.527414", "-96.741249"], {icon: leafIcon}).addTo(map)
    .bindPopup('The Location');

And that should be it ! You now have custom markers on your leaflet map.

The exact implementation code is in this github repo  Here

leaflet google mapLightning component
38
Like this post
5 Posts
nagensahu

Search Posts

Archives

Categories

Recent posts

Top 5 Factors to evaluate before choosing a Salesforce Integrator

Top 5 Factors to evaluate before choosing a Salesforce Integrator

Significance of UI/UX Design

Significance of UI/UX Design

Cyber-security in an uncertain world

Cyber-security in an uncertain world

The world of AR and VR

The world of AR and VR

The in-and-out of ML

The in-and-out of ML

  • Previous PostReturn Requested Data from Salesforce Multiple Data Sources using MuleSoft
  • Next PostSnap-Ins Chat for Web

Related Posts

REST API call from Einstein Analytics Dashboard
Apex REST Salesforce Salesforce Einstein Wave Analytics

REST API call from Einstein Analytics Dashboard

Create/Update Salesforce Picklist definitions using metadata API
Integration Metadata API Salesforce

Create/Update Salesforce Picklist definitions using metadata API

Leave a Reply (Cancel reply)

Your email address will not be published. Required fields are marked *

*
*

ABSYZ Logo
  • Home
  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

ABSYZ Software Consulting Pvt. Ltd.
USA: 49197 Wixom Tech Dr, Wixom, MI 48393, USA
M: +1.415.364.8055

India: 6th Floor, SS Techpark, PSR Prime, DLF Cyber City, Gachibowli, Hyderabad, Telangana – 500032
M: +91 79979 66174

Copyright ©2020 Absyz Inc. All Rights Reserved.

youngsoft
Copy