title: How to update content of index.html file from c# (Xamarin.Forms UWP) or How to call javascript function from c#?
body: <p>I have used Leaflet Map kit using webview in Xamarin.forms (UWP) app. For that I have to create index.html file, also I have to use javascript in that. Basically I'm loading constant co-ordinate in map first and I wanted to update it when I click GetLocationButton which I have created in UI.</p>
  <blockquote>
  <h3>The problem is when I am adding <code>newMarker()</code> function, the map not get loaded properly, it shows white blank screen. I have attached the screenshot here.</h3>
  </blockquote>
  <h3>index.html</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;LeafletMap&lt;/title&gt;
  
      &lt;script src=&quot;JS/leaflet.js&quot;&gt;&lt;/script&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;CSS/leaflet.css&quot; /&gt;
  
      &lt;style&gt;
          #map {
              width: 100%;
              height: 100vh;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  
      &lt;script type=&quot;text/javascript&quot;&gt;
      
          //Map initialization
          var mymap = L.map('map').setView([18.595133, 73.713448],5);
      
          //OpenStreetMap layer
          var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              attribution: '&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
          });
  
          osm.addTo(mymap);
  
          var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&amp;x={x}&amp;y={y}&amp;z={z}',{
                          maxZoom: 20,
                          subdomains:['mt0','mt1','mt2','mt3']
          });
  
          googleHybrid.addTo(mymap);
  
          var myIcon = L.icon({
              iconUrl: 'images/red_pin.png',
              iconSize: [40, 40],
          });
  
          //marker with popup dialog
          var mapPin = L.marker([18.5951, 73.7134], {icon: myIcon});
          var dialog = mapPin.bindPopup(&quot;Hello world&quot;);
          dialog.addTo(mymap);
  
          //Function to update location 
          function newMarker(lat, lon, texto) {
              var marker = L.marker([lat, lon], {icon: myIcon}]);
              var dialog2 = marker.bindPopup(texto);
              dialog2.addTo(mymap);
          }
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <hr>
  <h3>MainPage.xaml</h3>
  <pre class="lang-cs prettyprint-override"><code>&lt;ContentPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot;
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot; 
               xmlns:customrender=&quot;clr-namespace:LeafletMapKit.CustomRender&quot;
               x:Class=&quot;LeafletMapKit.MainPage&quot;&gt;
  
      &lt;StackLayout&gt;
          &lt;customrender:CustomWebView x:Name=&quot;webView&quot;
                                      HorizontalOptions=&quot;CenterAndExpand&quot;
                                      VerticalOptions=&quot;CenterAndExpand&quot;
                                      HeightRequest=&quot;500&quot;
                                      WidthRequest=&quot;600&quot;/&gt;
          &lt;Button Text=&quot;GetLocation&quot; VerticalOptions=&quot;Center&quot; HorizontalOptions=&quot;Center&quot;
                  Clicked=&quot;Button_Clicked&quot;/&gt;
      &lt;/StackLayout&gt;
  
  &lt;/ContentPage&gt;
  </code></pre>
  <hr>
  <h3>MainPage.xaml.cs</h3>
  <pre class="lang-cs prettyprint-override"><code>public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
          LoadMap();
      }
  
      public void LoadMap()
      {
              var source = new HtmlWebViewSource();
              source.BaseUrl = DependencyService.Get&lt;IBaseUrl&gt;().Get();
              var assembly = typeof(MainPage).GetTypeInfo().Assembly;
              Assembly assembly1 = Assembly.GetExecutingAssembly();
              var stream = assembly1.GetManifestResourceStream(&quot;LeafletMapKit.index.html&quot;);
  
              StreamReader reader = null;
  
              if (stream != null)
              {
                  try
                  {
                      reader = new StreamReader(stream);
                      source.Html = reader.ReadToEnd();
                  }
                  finally
                  {
                      if (reader != null)
                      {
                          reader.Dispose();
                      }
                  }
                  webView.Source = source;
              }
              else
              {
                  DisplayAlert(&quot;Warning!&quot;, &quot;Error loading map...&quot;, &quot;ok&quot;);
              }
      }
  
      public void Button_Clicked(object sender, EventArgs e)
      {
         webView.Eval(string.Format(&quot;newMarker({0}, {1}, {2})&quot;, &quot;\&quot;&quot; + &quot;18.70&quot; + &quot;\&quot;&quot;, &quot;\&quot;&quot; +
   &quot;73.90&quot; + &quot;\&quot;&quot;, &quot;\&quot;&quot; + &quot;New location&quot; + &quot;\&quot;&quot;));
      }
  }
  </code></pre>
  <hr>
  <h3>Output:</h3>
  <p><a href="https://i.stack.imgur.com/IaYNt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IaYNt.jpg" alt="enter image description here" /></a></p>