Skip to content

Plugin for adding arbitrary HTML markers to a Leaflet map

Notifications You must be signed in to change notification settings

john-landgrave/LeafletHtmlIcon

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 

Repository files navigation

Leaflet HTML Icon

Plugin for adding arbitrary HTML markers to a Leaflet map

Usage

Include LeafletHtmlIcon.js in your page somewhere after the leaflet.js is included.

<script type="text/javascript" src="/media/path/LeafletHtmlIcon/LeafletHtmlIcon.js"></script>

Now you can create an icon containing arbitrary HTML as follows:

var markerLocation = new L.LatLng(51.5, -0.09); // London

var helloLondonHtmlIcon = new L.HtmlIcon({
    html : "<div style='background:white;color:red;'>Hello, London</div>",
});

var marker = new L.Marker(markerLocation, {icon: helloLondonHtmlIcon});
map.addLayer(marker);

Or, you can define a class to reuse the same HTML element:

var markerLocation = new L.LatLng(51.5, -0.09); // London

var CustomHtmlIcon = L.HtmlIcon.extend({
    options : {
        html : "<div style='background:white;color:red;'>Custom Html Icon!</div>",
    }
});

var customHtmlIcon = new CustomHtmlIcon(); 

var marker = new L.Marker(markerLocation, {icon: customHtmlIcon});
map.addLayer(marker);

Add events as you normally would to a marker:

// ...
var marker = new L.Marker(markerLocation, {icon: helloLondonHtmlIcon});
marker.on("click", function(e) {
    alert("zing!");
});
map.addLayer(marker);

Aftermath

Leaflet Html Icon

About

Plugin for adding arbitrary HTML markers to a Leaflet map

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%