Support Questions
Find answers, ask questions, and share your expertise
Announcements
Alert: Welcome to the Unified Cloudera Community. Former HCC members be sure to read and learn how to activate your account here.

Zeppelin notebook not supporting leaflet polygon method

Highlighted

Zeppelin notebook not supporting leaflet polygon method

New Contributor

I am working on a Zeppelin notebook with Spark and Angularjs. I am using Leaflet for creating map visualization and also for creating the polygon. This is the example that I want to run on Zeppelin notebook:-

%angular 
<!DOCTYPE html>    
   <html>
   <head>
   <title>Quick Start - Leaflet</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
   </head>
   <body>
   <div id="mapid" style="width: 600px; height: 400px;"></div>
   <script>
   var mymap = L.map('mapid').setView([51.505, -0.09], 13);
               L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94Ii              wiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
               maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributor s, ' +
              '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
              'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
               id: 'mapbox.streets'
   }).addTo(mymap);

   L.marker([51.5, -0.09]).addTo(mymap)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

   L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

   L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
   ]).addTo(mymap).bindPopup("I am a polygon.");


 var popup = L.popup();

</script>
</body>
</html>

Only the marker property is working fine whereas circle and polygon APIs are not showing any output on the map. There was no error on the console log. I also went through this link http://datasystemslab.github.io/GeoSpark/download/zeppelin/ where it says "there is an issue in Leaflet JS with Zeppelin". I have no clue what is happening here since there are no error logs.