how to make the zoom button of my own on an esri map

Question

i am trying to implement a zomm button (and other buttons) and using esri javascript api.

i hide esri default buttons and want to use my own for zoomin in. see it here: http://jsfiddle.net/nxuq857d/

    var map;
    // esri map initialization
    require(["esri/map", "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
    "esri/graphic", "dojo/domReady!"], function (Map, Point,
    SimpleMarkerSymbol, SimpleLineSymbol,
    Graphic, Color) {
            map = new Map("map", {
            center: [0, 0],
            zoom: 5,
            basemap: "topo",
            slider: true // set to false to remove default zoom buttons
        });
    });

i want it to perform the same functionality as the default esri zoom button (zoom in). how to do that?

ALSO i am having problem with referencing the map from outside the map function... so if you can help with that as well. how to reference the map from other functions and perform for example the zoomin functionality. after:

        });
    });

thnx a lot

Answer 1

See this: http://jsfiddle.net/moizhb/rLwaytnp/

All you need is to subscribe the click event and call setZoom

on(dom.byId("zoomInBtn"), "click", function(evt){map.setZoom(map.getZoom()+1);});
on(dom.byId("zoomOutBtn"), "click", function(evt){map.setZoom(map.getZoom()-1);});