jVectorMap - setFocus error - jQuery

Rob Scott picture Rob Scott · May 17, 2016 · Viewed 7.3k times · Source

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:

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)

Answer

Rob Scott picture Rob Scott · May 17, 2016

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)
}