BeautifyMarker Demo

by Muhammad Arslan Sajid

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.css">
<script src="//marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.js"></script>
<script src="//marslan390.github.io/BeautifyMarker/leaflet-beautify-marker.js"></script>
Beautify Marker
<div id="map" style="height:410px; width:570px;"></div>

JavaScript

var map = L.map('map').setView([33.738045, 73.084488], 9);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.marker([33.89093747081252, 72.7734375], {
          icon: L.BeautifyIcon.icon(),
          draggable: true
        }).addTo(map).bindPopup("I'm Beautify");
        
        var options = {
          icon: 'bus',
          borderColor: '#b3334f',
          textColor: '#b3334f'
        };
        L.marker([33.89093747081252, 72.9107666015625], {
          icon: L.BeautifyIcon.icon(options),
          draggable: true
        }).addTo(map).bindPopup("I'm Beautify");

        options = {
          icon: 'plane',
          borderColor: '#8D208B',
          textColor: '#8D208B',
          backgroundColor: 'transparent'
        };
        L.marker([33.89093747081252, 73.0426025390625], {
          icon: L.BeautifyIcon.icon(options),
          draggable: true
        }).addTo(map).bindPopup("I'm Beautify");

        options = {
          icon: 'ambulance',
          borderColor: 'Red',
          textColor: 'Red',
          innerIconStyle: 'font-size:11px;padding-top:1px;'
        };
        L.marker([33.89093747081252, 73.17718505859375], {
          icon: L.BeautifyIcon.icon(options),
          draggable: true
        }).addTo(map).bindPopup("I'm Beautify");

        options = {
          icon: 'taxi',
          borderColor: 'red',
          textColor: 'Red',
          backgroundColor: '#FFF607',
          innerIconStyle: 'font-size:9px;padding-top:1px;'
        };
        L.marker([33.89093747081252, 73.32000732421875], {
          icon: L.BeautifyIcon.icon(options),
          draggable: true
        }).addTo(map).bindPopup("I'm Beautify");

        options = {
          isAlphaNumericIcon: true,
          borderColor: '#00ABDC',
          textColor: '#00ABDC',
          innerIconStyle: 'margin-top:0;'
        };
    ...