zoomable with buttons

[alijohn]

Hello,
First all great work. Really saved alot of my time.

I am trying to have buttons to handle the zooming functionality. So, plus to zoom in and minus to zoom out and 0 to reset. Like following

https://jsfiddle.net/wunderbart/Lom3b0gb/

Could you help me how I go about it.

Thanks

[pfarnach]

Hey @alijohn, I had to do this for my own project and submitted a PR (#27) just now. It doesn't seem like this repo is being maintained but you can use my fork to get what you need hopefully.

[justixnl]

@pfarnach sorry to bother you. I downloaded and used your angular-datamaps.js but I cant seem to figure out how I couple this to a +/- button(s). Do you have a example or could you explain how to achieve a similiar result as above jsfiddle? (sorry I'm beginner at this stuff)

Also zoomable="true" doesn't seem to do anything before and after using your angular-datamaps.js does this even properly work?

EDIT:
Apparently I keep getting a error when trying to use zoomable="true" when I click a country on my datamap I either get the following errors:

Uncaught TypeError: Cannot read property 'sourceEvent' of null
or:
Uncaught TypeError: Cannot read property '0' of undefined
&:
Uncaught TypeError: p is not a function

[pfarnach]

Hey @justixnl, this solution is still working for me. It's hard to say what's happening without seeing your code, but in your parent directive (that consumes the datamap directive), you'll have to make sure you define your map object on scope, something like:

vm.map = {};

then make sure you pass that into the datamaps directive, where the api object will be assigned to the variable through scope, and by extension, be available back up in your parent directive once the datamaps directive has loaded. Then in your parent directive, you'll be able to do something like vm.map.api.zoomClick(zoomType)

For reference, I'm using the datamap directive like this:

<datamap map="map.map.mapObject"
         api="map.map.api"
         zoomable
         extent="map.mapExtent"
         disable-scroll
         on-click="map.onMapClickDebounced">
</datamap>

[justixnl]

@pfarnach hey pfarnach,

it seems one of my chart plugins had a d3 version that was causing errors. I removed that and now the zoom func works. However it is still not clear to me what I should be doing in order to get my zoom buttons.

Currently I only have a mapObject that looks like this.

$scope.mapObject = {
scope: 'world',
options: {
width: 600,
legendHeight: 60 // optionally set the padding for the legend
},
geographyConfig: {
highlighBorderColor: '#EAA9A8',
highlighBorderWidth: 2
},
fills: {
'HIGH': '#569d21',
'MEDIUM': '#8abb67',
'LOW': '#aecf96',
'defaultFill': '#c5dcb4',
'VERYLOW': '#e9f0e5'
},
data: {
"MEX": {
"fillKey": "MEDIUM",
},
"USA": {
"fillKey": "HIGH",
},
"GER": {
"fillKey": "LOW",
},
"GBR": {
"fillKey": "VERYLOW",
},
"FRA": {
"fillKey": "HIGH",
},
"RUS": {
"fillKey": "MEDIUM",
},
"CHN": {
"fillKey": "HIGH",
},
"BRA": {
"fillKey": "HIGH",
},
"ARG": {
"fillKey": "MEDIUM",
},
"COL": {
"fillKey": "LOW",
},
"PER": {
"fillKey": "VERYLOW",
},
"ESP": {
"fillKey": "LOW",
},
"NLD": {
"fillKey": "MEDIUM",
}
},
}

And I have copied your datamap directive as shown above. However its still not clear to me what kind of data I should be passing to api, mapExtent and onMapClickDebounced. Can you show me this with a example?

[pfarnach]

Sorry, it'd be a lot of work to pull the code out, clean it up and put it into a codepen.

The only other thing I'd check is that you have something like this though right?

<div class="ol-control ol-zoom">
    <button class="ol-zoom-in" ng-click="map.onButtonZoom('in')">+</button>
    <button class="ol-zoom-out" ng-click="map.onButtonZoom('out')">-</button>
    <button class="ol-zoom-fit" ng-click="map.onButtonZoom()">Fit</button>
</div>

and the corresponding onButtonZoom function in the parent directive?