Community Articles
Find and share helpful community-sourced technical articles
Announcements
Alert: Welcome to the Unified Cloudera Community. Former HCC members be sure to read and learn how to activate your account here.
Labels (2)
New Contributor

This article will give a quick demonstration to add Leaflet maps to an Angular paragraph in Zeppelin.

Background: Leaflet Maps

Leaflet is an open-source JavaScript library for interactive maps. Leaflet is designed with simplicity, performance and usability in mind.

Step 1: Adding a map to a Zeppelin notebook.

13931-screen-shot-2017-03-22-at-114134-am.png

Code Source:

%angular 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<div id="map" style="height: 800px; width: 100%"> </div>
<script type="text/javascript">
function initMap() {
    var map = L.map('map').setView([33.415, -111.831], 6);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 15,
        minZoom: 3
    }).addTo(map);
    var geoMarkers = L.layerGroup().addTo(map);
   
}
if (window.L) {
    initMap();
} else {
    console.log('Loading Leaflet library');
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js';
    sc.onload = initMap;
    sc.onerror = function(err) { alert(err); }
    document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>

Step 2: Adding markers to the map manually.

13932-screen-shot-2017-03-22-at-114134-am.png

Code Source:

%angular 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<div id="map" style="height: 800px; width: 100%"> </div>
<script type="text/javascript">
function initMap() {
    var map = L.map('map').setView([33.415, -111.831], 12);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 15,
        minZoom: 3
    }).addTo(map);
    var geoMarkers = L.layerGroup().addTo(map);
    var lat = 31.603513;
    var long = -94.655487;
    var lat1 = 38.381572;
    var long1 = -121.49440;
    var LJIcon = L.icon({
    iconUrl: 'https://upload.wikimedia.org/wikipedia/en/f/ff/SFA_Athletics_logo.png',
    iconSize: [38, 38],
    });
    var goldIcon = L.icon({
    iconUrl: 'http://www.pngmart.com/files/3/Lakshmi-Gold-Coin-PNG-Transparent-Image.png',
    iconSize: [20, 20],
    });
   var marker = L.marker([ lat, long ],{icon: LJIcon} ).bindPopup("Nacogdoches, Tx" +" : " + "21ABC").addTo(map);
    var marker1 = L.marker([ lat1, long1 ],{icon: goldIcon} ).bindPopup("Sacramento, Ca" +" : " + "34DGC").addTo(geoMarkers)
}
if (window.L) {
    initMap();
} else {
    console.log('Loading Leaflet library');
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js';
    sc.onload = initMap;
    sc.onerror = function(err) { alert(err); }
    document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>

Step 3: Adding map markers from a GeoJSON file.

13933-screen-shot-2017-03-22-at-114441-am.png

Code Source:

%angular 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<div id="map" style="height: 800px; width: 100%"> </div>
<script type="text/javascript">
function initMap() {
    var map = L.map('map').setView([33.415, -111.831], 8);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 15,
        minZoom: 3
    }).addTo(map);
    var geoMarkers = L.layerGroup().addTo(map);
    
      $.getJSON("https://raw.githubusercontent.com/BrooksIan/DS_GTDB/master/json/Mesa.geojson",function(data){
          L.geoJson(data).addTo(map);
      });
}
if (window.L) {
    initMap();
} else {
    console.log('Loading Leaflet library');
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js';
    sc.onload = initMap;
    sc.onerror = function(err) { alert(err); }
    document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>

5,887 Views
Comments
Super Guru

have you connected to data from SQL?

New Contributor

I haven't tried that yet. I have got markers from an existing file working at this point in time.

New Contributor

This is soooo cool!

New Contributor

I've found that in Zeppelin 0.7.0 the geoJSON needs to be obtained without credentials, otherwise an access control error results : "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'" which is I guess new behaviour in Zeppelin.

As there doesn't seem to be a way to configure $.getJSON to do this, load it as follows :

$.ajax({ 
  url: "https://raw.githubusercontent.com/BrooksIan/DS_GTDB/master/json/Mesa.geojson",
  dataType: "json",
  xhrFields: { withCredentials: false }
})
.done( function( data ) {
  L.geoJson( data ).addTo( map );
});

Hope this helps, Simon

New Contributor

I've also found that a Zeppelin style hides any geoJSON boundary type overlays. The offending rule seems to be the following, removing this in chrome dev tools makes the overlay appear. YMMV...

..\zeppelin-web\src\app\notebook\paragraph\paragraph.css

.paragraph div svg {
    width: 100%;
}
Don't have an account?
Coming from Hortonworks? Activate your account here
Version history
Revision #:
2 of 2
Last update:
‎08-17-2019 01:41 PM
Updated by:
 
Contributors
Top Kudoed Authors