title: Mapbox change marker location and color
body: <p>The following code shows a marker and a popup that shows the lat and long whenever I click on the map. </p>
  
  <p>I want the marker to change color from blue to red, and I want the popup to be above the marker so that it doesn't cover the marker. How can I do that? Thank you.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Quick Start - Leaflet&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  
      &lt;link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/&gt;
      &lt;script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mapid" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
  &lt;script&gt;
  
      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 &amp;copy; &lt;a href="https://www.openstreetmap.org/"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
              '&lt;a href="https://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
              'Imagery © &lt;a href="https://www.mapbox.com/"&gt;Mapbox&lt;/a&gt;',
          id: 'mapbox.streets'
      }).addTo(mymap);
  
      L.marker([40.7127837, -74.0059413]).addTo(mymap)
          .bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br /&gt;I am a popup.").openPopup();
  
      var popup = L.popup();
  
      function onMapClick(e) {
          L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap)
          popup
              .setLatLng(e.latlng)
              .setContent("You clicked the map at " + e.latlng.toString())
              .openOn(mymap);
      }
  
      mymap.on('click', onMapClick);
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>