Platz benutzerdefinierte Markierungen für leaflet.draw Markereigenschaft

Question

Ich verwende leaflet.draw Plugin des Benutzer zu platzieren Markierungen auf der Karte zu ermöglichen, aber nicht sicher, wie configure in drawControl bieten benutzerdefiniertes Symbol zu nehmen, benutzerdefinierte Breite und Höhe versuchte dabei es wie unten

var drawControl = new L.Control.Draw({ 
      draw : { 
       position : 'topleft', 
       polygon : { 
       shapeOptions: { 
        color: 'red' 
       } 
       }, 
       marker:{ 
        iconUrl: 'http://joshuafrazier.info/images/firefox.svg' 
       }, 
       polyline : false, 
       rectangle : { 
        shapeOptions: { 
         color: 'blue' 
        } 
       }, 
       circle : false 
      }, 
      edit: { 
      featureGroup: editableLayers, //REQUIRED!! 
       remove: true 

     } 


     }); 

gezeigt, aber noch bin ich immer die Standard-Marker und mir bitte im doc Punkt http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-latlngutil wo soll ich über die Konfiguration sehen wissen, und wie es tun

Answer 1

Sie müssen Marker zuweisen Optionssymboleigenschaft ein Markierungssymbol.

1. Erstellen Sie Ihr individuelles Markierungssymbol Leaflet L.Icon Klasse.

   var customMarker= L.Icon.extend({ 
       options: { 
        shadowUrl: null, 
        iconAnchor: new L.Point(12, 12), 
        iconSize: new L.Point(24, 24), 
        iconUrl: 'http://joshuafrazier.info/images/firefox.svg' 
       } 
   }); 
   

2. assign customMarker zu Markierungssymbol Eigenschaft

   var drawControl = new L.Control.Draw({ 
       draw : { 
       position : 'topleft', 
       polygon : { 
        shapeOptions: { 
        color: 'red' 
        } 
       }, 
       marker: { 
        icon: new customMarker() //Here assign your custom marker 
       }, 
       polyline : false, 
       rectangle : { 
        shapeOptions: { 
        color: 'blue' 
        } 
       }, 
       circle : false 
       }, 
       edit: { 
       featureGroup: editableLayers, //REQUIRED!! 
       remove: true 
       } 
   });