D3 Examples - rCharts + Leaflet + KML

rCharts + Leaflet + KML

This is a demo of using rCharts to create a Leaflet map using KML. It requires you to install the latest dev branch of rCharts, which can be done using install_github("rCharts", "ramnathv", ref = "dev"). The code to reproduce this chart is shown below

# download kml example file require(downloader) download( url = "http://harrywood.co.uk/maps/examples/leaflet/mapperz-kml-example.kml", destfile = "mapperz-kml-example.kml" ) # initialize leaflet chart and add kml L1 <- Leaflet$new() L1$addKML("mapperz-kml-example.kml") L1$save('index.html', cdn = TRUE)

Note that you will not be able to view the map as static HTML. So fire up a local server from the same directory where you saved your html file and the kml file.

$ python -m SimpleHTTPServer 8000

and navigate to http://localhost:8000/index.html

xxxxxxxxxx
 
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css'>
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.js' type='text/javascript'></script>
    <script src='https://rawgithub.com/leaflet-extras/leaflet-providers/gh-pages/leaflet-providers.js' type='text/javascript'></script>
    <script src='https://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/kml.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block;
      margin-left: auto; 
      margin-right: auto;
      width: 950px;
      height: 500px;
    }  
    </style>
    
  </head>
  <body>
    <div id='chart13a8c55dffe8d' class='rChart leaflet'></div>  
    
    <script>
  var spec = {
 "dom": "chart13a8c55dffe8d",
"width":            800,
"height":            400,
"urlTemplate": "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
"layerOpts": {
 "attribution": "Map data<a href=\"https://openstreetmap.org\">OpenStreetMap</a>\n         contributors, Imagery<a href=\"https://mapbox.com\">MapBox</a>" 
},
"id": "chart13a8c55dffe8d" 
}
  var map = L.map(spec.dom)
  
    if (spec.provider){
      L.tileLayer.provider(spec.provider).addTo(map)    
    } else {
      L.tileLayer(spec.urlTemplate, spec.layerOpts).addTo(map)
    }
     
    
    
    
    
    
    if (spec.circle2){
      for (var c in spec.circle2){
        var circle = L.circle(c.center, c.radius, c.opts)
         .addTo(map);
      }
    }
    
    
    
    
    
   
   
   var kmlLayer = new L.KML("mapperz-kml-example.kml", {async: true});
                                                              
   kmlLayer.on("loaded", function(e) { 
        map.fitBounds(e.target.getBounds());
   });
                                                
   map.addLayer(kmlLayer);
   
</script>
    
  </body>
</html>
    