Uploaded image for project: 'Zeppelin'
  1. Zeppelin
  2. ZEPPELIN-4110

Zeppelin notebook not supporting leaflet polygon method

    XMLWordPrintableJSON

Details

    • Bug
    • Status: Open
    • Major
    • Resolution: Unresolved
    • 0.8.0
    • None
    • front-end, GUI
    • None
    • OS- Ubuntu 18.04

      RAM-16 GB

      CPU- Core i5 7th Gen

       

    Description

      I am working on a Zeppelin notebook with Spark. 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.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data © 
      <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<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.
       
       
      PS- Same issue I have wrote on stackoverflow https://stackoverflow.com/questions/55329765/zeppelin-notebook-not-supporting-leaflet-polygon-method , but did  not get an answer.

      Attachments

        Activity

          People

            Unassigned Unassigned
            Rajjat Rajjat
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:

              Time Tracking

                Estimated:
                Original Estimate - 72h
                72h
                Remaining:
                Remaining Estimate - 72h
                72h
                Logged:
                Time Spent - Not Specified
                Not Specified