Modified leaflet example for Rich

Leaflet example modified

<script type='text/javascript'>
    var markers = [
       {
         "name": "Canada",
         "url": "https://en.wikipedia.org/wiki/Canada",
         "lat": 56.130366,
         "lng": -106.346771
       },
       {
         "name": "Anguilla",
         "details": "favoriteMusic: <a href=\"#\" rel=\"nofollow\">80s Rock</a>",
         "url": "https://en.wikipedia.org/wiki/Anguilla",
         "lat": 18.220554,
         "lng": -63.068615
       }
    ];
    var map = L.map( 'map', {
      center: [20.0, 5.0],
      minZoom: 2,
      zoom: 2
    })

    L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      subdomains: ['a', 'b', 'c']
    }).addTo( map )

    var myIcon = L.icon({
      iconUrl:  'maps/images/pin24.png',
      iconRetinaUrl:  'maps/images/pin48.png',
      iconSize: [29, 24],
      iconAnchor: [9, 21],
      popupAnchor: [0, -14]
    })

    for ( var i=0; i < markers.length; ++i )
    {
     L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
      .bindPopup( '<a href="' + markers[i].url + '" target="_blank">' + markers[i].name + '</a><br/>' + markers[i].details )
      .addTo( map );
    }
</script>