Sylvenas / leaflet.magicMarker

Magic marker animation.
MIT License
25 stars 5 forks source link

How to get this to work for divicon? #2

Open kalnode opened 7 years ago

kalnode commented 7 years ago

I have Magic Marker installed and working for single test markers, but I haven't been able to integrate it into my function which creates dynamic text inside icons. To create custom icons with dynamic text, I'm using divicon.

Below is my existing working function which creates a custom divicon. In my case, it looks up number of events for a location, and uses that number inside the icon. This function is run on each marker before being added to the map layer.

function markerCustom (feature, latlng) {
            var markerTotal = 0;

            var obj = dataFiltered.Events;

                for (k in obj) {
                    if (obj[k].LocationID == feature.properties.id) {
                        markerTotal = markerTotal + 1;
                    }
                }

            var smallIcon = new L.DivIcon({
                html: '<div><span>' + markerTotal + '</span></div>',
                className: 'leaflet-div-icon2',
                iconSize: new L.Point(25, 41),
                iconAnchor:  [12, 41],
                popupAnchor: [1, -34],
            });  

               return L.marker(latlng, {icon: smallIcon});

// Instead of the above line, this is where I should probably be invoking magic marker.
// Something like:
//        return L.marker.magic(latlng, {icon: smallIcon, magic: 'vanishIn'});
// However, this conflicts with what magic marker is expecting for input.
// Does magic marker need additional code for divicon situations?

}

Here is my main function which adds markers my map:

function addDataToMap(data, map) {
    dataMarkers.clearLayers();
    dataLayer = [];

    dataLayer = L.geoJson(data,{
        pointToLayer:
        function(feature, latlng) {
            return markerCustom(feature, latlng);
        },
        onEachFeature:onEachFeature});

    dataMarkers.addLayer(dataLayer);
    mymap.addLayer(dataMarkers);

// As a test, I'm adding a single test magic marker. It works!
    var magicMarker = new L.marker.magic([43.6652, -79.42042], {
        iconUrl: '../public/images/marker-icon.png',
        magic: 'vanishIn'
    }).addTo(mymap);
}
Sylvenas commented 7 years ago

Hi,@TheMangoTrain, L.setOptions will replaces the options(html) of the L.DivIcon,so I wrap the options html with a div,which class is magic, please check the test folder, there is an example.