title: Use leaflet in an android application to show online map
body: <p>is there any samples project who shows how to use leaflet properly to show an online map in an android application. Because I tried many samples but every time i have an empty webview in my application.
  this is my code: </p>
  
  <pre><code>private WebView mWebView;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      mWebView= (WebView)findViewById(R.id.map);
      mWebView.setWebChromeClient(new WebChromeClient());
      mWebView.loadUrl("file:///android_asset/www/map.html");
  
  }
  </code></pre>
  
  <p>and this is the HTML object:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
      &lt;link rel="stylesheet" href="css/leaflet-0.5.css" /&gt;
      &lt;script&gt;L_PREFER_CANVAS = true;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="js/leaflet-src-0.5.js"&gt;&lt;/script&gt;            
      &lt;style&gt;
          body {
              padding: 0;
              margin: 0;
          }
          html, body, #map {
              height: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  
      &lt;script&gt;
  
          var map = L.map('map');
  
          L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
              attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;',
              maxZoom: 18
          }).addTo(map);
          map.locate({setView: true, maxZoom: 16});
          function onLocationFound(e) {
              var radius = e.accuracy / 2;
  
              L.marker(e.latlng).addTo(map)
              .bindPopup("You are within " + radius + " meters from this point").openPopup();
  
              L.circle(e.latlng, radius).addTo(map);
          }
  
          map.on('locationfound', onLocationFound);
          function onLocationError(e) {
              alert(e.message);
          }
  
          map.on('locationerror', onLocationError);
  
  
  
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>