change default marker

[MB HH]

Is there a way to change the default marker in the marker cluster plugin?
I like to use a different sized icon without the shadow image.

[Bryan McBride]

http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-custom.html

[Ross McDonald]

The example Bryan provided changes the style of the cluster marker and not the style of the default blue pin marker.  This tutorial on the leaflet page (http://leafletjs.com/examples/custom-icons.html) explains how to create and use a custom marker.  I guess what MB HH wants to know (and I do too) is how to use a custom icon on individual points within the marker cluster plugin.

Is it possible to define a new icon (using a PNG image) and then apply that new icon to the Marker Cluster Group or the GeoJSON features?

[Ross McDonald]

Just answered my own question and, hopefully, MB HH's:

// define the new icon
        var lightIcon = L.icon({
            iconUrl: 'images/streetlight14x14.png',
            iconSize: [14, 14],
            popupAnchor: [17, 7]
            });

        //define the marker cluster       
        var markers = new L.MarkerClusterGroup();

//define the new layer (geojson in this case) and apply a style to the pointToLayer
        var geoJsonLayer = L.geoJson(stlight, {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: lightIcon})
                },
            onEachFeature: function (feature, layer) {
                layer.bindLabel(feature.properties.LOC);
            }
        });

markers.addLayer(geoJsonLayer);

     map.addLayer(markers);

       
          map.fitBounds(markers.getBounds());

[MB HH]

Am Freitag, 7. Dezember 2012 13:29:42 UTC+1 schrieb Ross McDonald:

Just answered my own question and, hopefully, MB HH's:

Ross, thank you for your Help.
Unfortunately it doesn't work for me. I am working on this plugin example:
 http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.388.html

my own icon is defined like this:

var Haus1 = L.icon({
iconUrl: '../marker/haus.png',
iconSize: [40, 27],
iconAnchor: [12, 12],
popupAnchor: [0, -18],
labelAnchor: [5, 0]
});

Is it possible to change the Icon in this case to?

[Koteswara Siva Kumar Devineni]

Dear MB HH,

Its simple...

Please see the parameters declared are in order.... and you will get it.. here is the order...

L.marker(new L.LatLng(a[6], a[7]), {icon: lightIcon},{ title: title });

icon should be the second parameter.

i declared the icon like this before

 var lightIcon = L.icon({

            iconUrl: 'cubbon_police.png',

            iconSize: [14, 14],

            popupAnchor: [17, 7]

            });