Display a custom button on the map

9788
5
08-25-2013 02:24 AM
vinayb
by
New Contributor III
HI All,


   I want to display my custom button or an icon at the lower left part of the map and i should be able to call an onclick function on it , please let me know if this could be done if yes how would help a lot.
0 Kudos
5 Replies
ZachLiu1
Occasional Contributor II
You can just put a button, an image, or whatever you like in your map container, and then position and style it using css and also register your event listener for the button.
The basic structure is here.

<styles>
    .my_button {
        position: absolute;
        z-index: 100;
    }
</styles>

<div id="map">
    <button type="button" class="my_button">My Button!</button>
</div>
0 Kudos
vinayb
by
New Contributor III
Problem is zoom effect will not apply on it, is there any other solution.
0 Kudos
KenBuja
MVP Esteemed Contributor
This code will zoom the map to its initial extent

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
        html, body, #map
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        body
        {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }

        .my_button
        {
            position: absolute;
            z-index: 100;
            left: 10px;
            bottom: 10px;
        }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
        var map, extent;

        require(["esri/map", "dojo/domReady!"], function (Map) {
            map = new Map("map", {
                basemap: "topo",
                center: [-122.45, 37.75], // long, lat
                zoom: 13,
                sliderStyle: "small"
            });

            map.on("load", function () {
                extent = map.extent;
            });
        });
            function zoomFunction() {
                map.setExtent(extent);
            }

    </script>
</head>

<body>
    <div id="map">
    <button type="button" class="my_button" onclick="zoomFunction();">Zoom to Original Extent</button>
    </div>

</body>
</html>

0 Kudos
AveryGomez
New Contributor
Any chance in getting this to work with 3.5?

I've added the sample below to my web app, but it is not zooming to the initial extent.

-Avery
0 Kudos
JasonZou
Occasional Contributor III
Below change is based on Ken's version which is using AMD style and JSAPI v3.6.

If you use AMD style, the change will be straightforward, just change the url for esri.css and JSAPI. If you like to use the non-AMD style, here is the changes to the head section.
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
    <style>
        html, body, #map
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        body
        {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }

        .my_button
        {
            position: absolute;
            z-index: 100;
            left: 10px;
            bottom: 10px;
        }
    </style>
    <script src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>
    <script>
        dojo.require("esri.map");

        var map, extent;

        dojo.addOnLoad(function() {
            map = new esri.Map("map", {
                basemap: "topo",
                center: [-122.45, 37.75], // long, lat
                zoom: 13,
                sliderStyle: "small"
            });

            map.on("load", function () {
                extent = map.extent;
            });
        });
 
       function zoomFunction() {
            map.setExtent(extent);
       }
    </script>
</head>
0 Kudos