Search code examples
javascriptjqueryjvectormap

jVectorMap - setFocus error - jQuery


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)


Solution

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