jVectorMap - setFocus error - jQuery

Question

I understand that the minified file from the zip is only the base code, and does not include libraries. Therefore I ran the build.sh file and it produced another minified file that I have included in my scripts.

Expectation:

I am attempting to zoom in on a marker when clicked. I have a function that runs on the event, onMarkerClick.

The problem:

I have looked at (2) different posts:

• Jvector map, how to focus on a marker?

• https://github.com/bjornd/jvectormap/issues/157

Both posts produce the same exact error.

The error:

Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…". jquery.jvectormap.min.js:733

line 733 - this.rootElement.node.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');

Apparently +scale+ is not a number (NaN)

Estren

Hi Rob; can you provide a fiddle in order to reproduce your issue? – Flyweight

Answer 1

I had a bunch of errors, but finally narrowed it down. First I thought that c had markers[c].latitude and markers[c].longitude, but it did not. Next mistake was not passing the configuration to the setFocus function

        onMarkerClick: function (e, c) {
             setFocusLatLng(5, markers[c].latLng[0], markers[c].latLng[1]);
        }

// sets focus on marker clicked
function setFocusLatLng(scale, lat, lng) {
    var mapObj = $('#map').vectorMap('get', 'mapObject');

    var config = {
        animate: true,
        lat: lat,
        lng: lng,
        scale: scale
    }

    mapObj.setFocus(config)
}

---

Update:

In case you ever need to pan back out to full map and set the focus on the center of the map:

// sets focus on center of map and zooms back out to full view
function setFocusMapCenter() {
    var mapObj = $('#map').vectorMap('get', 'mapObject'),
        center = mapObj.pointToLatLng(mapObj.width / 2, mapObj.height / 2);

    var config = {
        animate: true,
        lat: center.lat,
        lng: center.lng,
        scale: 1
    }

    mapObj.setFocus(config)
}

Estren

Answer 2

I have fought with this issue today and I'll leave my fix here in case I might help someone.

I was having the same error while trying to focus passing the id like this:

$('#world-map').vectorMap('get', 'mapObject');
map.setFocus(regionId)

But you have to pass an object as written below and it works perfectly. The documentation says it, but it is not that clear, with an example it would work better

$('#world-map').vectorMap('get', 'mapObject');
map.setFocus({region: regionId})

Limy

Answer 3

Late to the party but I had this issue myself and these solutions are not the best. Im using jquery-3.5.1.js with jvectormap multimap and it seems to work just fine except this issue occurs if the size of the viewport is changed

The problem is in the file svg-canvas-element.js in the function jvm.SVGCanvasElement.prototype.applyTransformParams

The solution is to wrapping the setAttribute line with a numeric check on the value for the scale variable.

e.g.)

if($.isNumeric( scale )){
  this.rootElement.node.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');
}

Make the change, Save, then test by opening the drill-down.html example. The intial map is the United States. Select a region it loads the State map. Now open developer tools ( im doing this in chrome ) then click the back button on the map ( not in the browser ). Now click on a different state it should throw the error in console and the new state may not even appear in the #map1 div if it is still broken. If it is fixed everything will work as expected.

Cnemis