Another compatibility issue with leaflet 1.x

[andesim]

Uncaught TypeError: Cannot read property '1' of undefined at e._calculateTransforms (leaflet.smoothmarkerbouncing.js:878) at e.L.Marker._setPos (leaflet.smoothmarkerbouncing.js:932) at e.update (leaflet.js:5) at e.onAdd (leaflet.js:5) at e.L.Marker.onAdd (leaflet.smoothmarkerbouncing.js:941) at e._layerAdd (leaflet.js:5) at e.whenReady (leaflet.js:5) at e.addLayer (leaflet.js:5) at e.addLayer (leaflet.js:5) at e.addLayer (leaflet.js:5)

[hosuaby]

Plugin is not compatible with Leaflet 1.x. I am currently reworking it for 1.x. It's a big work, but it you find an easy way to make it compatible don't hesitate to make a pull request

[andesim]

i think that this plugin does work with leaflet 1.x.x but has a issue on layers zoom.on events (linked to the L.Marker L.extend _setPos method) becouse this error only appear when i try to zoom my map with the visualization of other json layers (points & multiline). Is it possible to call function (L) only for a Layer and not for all L class ? I think doing so the leaflet 1.x.x compatibility will come.

[hosuaby]

@andesim Hi. Please, put here a code snippet that reproduce your problem. I am testing plugin with leaflet 1.x, but noticed nothing strange but only ugly blue border around marker when it's clicked.

[andesim]

@hosuaby The Leaflet.SmoothMarkerBouncing works perfectly, the problem occurs when you zoom in or out or move on the map that no longer allows the correct display of the other elements of the map. I'm sending to you an email with the code and the errors at web console.

[hosuaby]

@andesim Better make a minimal code snippet that reproduce the problem and post it here (It's important to answer similar problems of other users). I suppose the problem you have related not to plugin but to the way you use leaflet layers.

[andesim]

this is the functionin the map.jade file: function creaEvento(e) { var evIcon = new L.ExtraMarkers.icon({ iconUrl: '/images/icons/allarm.png', iconColor : 'white', markerColor : 'yellow', shape : 'star', pulsing : "myglow" }); var lat = e.latlng.lat; var lng = e.latlng.lng; var marker = new L.marker([lat,lng], { icon: evIcon, zIndexOffset: 1000 }).bounce();
LAYERS[9999].layer = marker; LAYERS[9999].layer.addTo(map); ............... the layout.jade calls these libraries and plugins:

script(src='/jquery.min.js')
script(src='/jquery-ui.min.js')
script(src='/leaflet.js')
script(src='/leaflet.markercluster-src.js')
script(src='/leaflet.markercluster.layersupport.js')
script(src='/leaflet.featuregroup.subgroup')
script(src='/leaflet.ajax.js')
script(src='/leaflet-realtime.js')
script(src='/L.Icon.Pulse.js')
script(src='/leaflet-control-credits.js')
script(src='/jquery.xdomainajax.js')
script(src='/L.Control.Layers.Tree.js')
script(src='/fontawesome-all.js')
script(src='/leaflet-layerjson.js')
script(src='/leaflet.extra-markers.min.js')
script(src='/seta.js')
script(src='/leaflet-ant-path.js')
script(src='/leaflet.contextmenu.js')
script(src='/L.Control.Window.js')
script(src='/moment.js')
script(src='/socket.io.js')
script(src='/leaflet-sidebar.js')
script(src='/leaflet.responsive.popup.js')
script(src='/fontawesome-all.js')
script(src='/leaflet-ruler.js')
script(src='/leaflet-search.min.js')
script(src='Leaflet.GoogleMutant.js')
script(src='/leaflet.fullscreen.js')
script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js')
script(src='kurento-utils.js')
script(src='kurento-client.js')
script(src='leaflet-velocity.js')
script(src='heatmap.js')
script(src='leaflet-heatmap.js')
script(src='RTSP2HTTP.js')
script(src='toastr.min.js')

[hosuaby]

@andesim This part of code looks weird:

LAYERS[9999].layer = marker;
LAYERS[9999].layer.addTo(map);

You can make it in more easy and clean way:

// Make an icon shared constant, no need to create a new for every single event
var EV_ICON = new L.ExtraMarkers.icon({
  iconUrl: '/images/icons/allarm.png',
  iconColor: 'white',
  markerColor: 'yellow',
  shape: 'star',
  pulsing: 'myglow'
});

function creaEvento(e) {
  var lat = e.latlng.lat;
  var lng = e.latlng.lng;

  var marker = new L.marker([lat,lng], {
    icon: EV_ICON,
  })
  .addTo(map)   // or .addTo(someMarkerLayer)
  .bounce();
}

[andesim]

@hosuaby we had already tried this, but I realized just in this moment that now it works without collateral issues probably because we have removed Leaflet.GeoJSON.Ajax plugin on the last release of our map, from layout.jade. We now use L.relatime to load the other geographical elements, and this plugin does not seem to have problems with your Leaflet.SmoothMarkerBouncing. ;-) and this is wonderful :-)

[hosuaby]

Good. Now you can try v1.2.0. This version working with Leaflet 1.X and has a minor change to avoid an ugly blue border around the marker when it bouncing.

[flightsurvey]

I've downloaded the latest file from the repository here and it still has the blue border on click.

[hosuaby]

@flightsurvey Which browser do you use ?

[flightsurvey]

Chrome. Just checked on Firefox and Edge and they're ok.

[hosuaby]

Fixed in v2.0.0