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)
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)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With