title: Creating custom markers with Leaflet.js add multiple markers on the map
body: <p>I'm writing an app and i'm trying to add custom markers using Leaflet.js .The code so far worked, and add custom markers to the map successfully, however the default markers exist too on the map.
      </p>
  
  <pre><code>   var mymap = L.map('mapid').setView([-1.3938636,36.7442377], 13);
     var mapdata =  $.ajax({
          url: '/data.json',
          dataType: 'text',
           success: function(data) {
              var geojson;
              geojson = $.parseJSON(data);
  
  
  
                  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                      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://mapbox.com"&gt;Mapbox&lt;/a&gt;',
                      maxZoom: 18,
                      id: 'mapbox.streets',
                      accessToken: 'ACCESS_TOKEN'
                  }).addTo(mymap);
  
                  //add external geojson to map
              var cordinates = L.geoJSON(geojson).addTo(mymap);
  
               //Add popups to markers
              function onEachFeature(feature,layer){
                 if (feature.properties &amp;&amp; feature.properties.popupContent) {
                      layer.bindPopup(feature.properties.popupContent);
                  }
              }
              L.geoJSON(geojson, { onEachFeature: onEachFeature }).addTo(mymap);
  
  
                  //Adding custom markers to maps
                  var HospIcon = L.icon({
                      iconUrl: '&lt;%= asset_path('red_MarkerH.png') %&gt;',
  
                      iconSize:     [20, 50], // size of the icon
                      shadowSize:   [50, 64], // size of the shadow
                      iconAnchor:   [22, 94], // point of the icon which will correspond to markers location
                      shadowAnchor: [4, 62],  // the same for the shadow
                      popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
                  });
  
                  var Custom_marker = L.geoJSON(geojson, {
                     pointToLayer : function(feature,latlng){
                        return L.marker(latlng, {icon: HospIcon}).addTo(mymap);
                     }
                  });
          }
  
  
      });
  
  
      var popup = L.popup();
  
      function onMapClick(e) {
          popup
              .setLatLng(e.latlng)
              .setContent("You clicked the map at " + e.latlng.toString())
              .openOn(mymap);
      }
  
      mymap.on('click', onMapClick);
  </code></pre>
  
  <p></p>
  
  <p>How can i solve this.Any help will be highly appreciated.<a href="https://i.stack.imgur.com/gqgQj.png" rel="nofollow noreferrer">This is what the maps look like,The blue markers are the default,the red markers are the custom markers</a></p>
  
  <p>Any help will be highly appreciated,Thanks in Advance.</p>