I have a div that contains a map, however, I would like to change a property that would in turn update the map to correspond to the change made to the property. More concretely, when I change a map name, I would like the div to change to reflect this new map name. If I have Chile mapped and I change the map name to Brazil, I would like Brazil's map to be plotted. Please see below for some more context. I have tried .reset()
, .updateSize()
, and a few other tweaks suggested... Nothing has worked.
app.directive('countrymap', ['$rootScope', function($rootScope)
{
return {
link: function(scope, element, attrs) {
$(element).width('auto'),
$(element).height(500),
$rootScope.$watch("countryMap", function (newCountry, oldCountry)
{
setTimeout( function()
{
var map = new jvm.Map(
{
container: $(element),
map: newCountry,
backgroundColor: 'transparent',
regionsSelectable: true,
regionsSelectableOne: true,
zoomButtons : false,
regionStyle:
{
selected:
{ fill: 'Red' }
}
});
}, 100);
})
}
};
}]);