topic Re: Display a custom button on the map in ArcGIS JavaScript Maps SDK Questions

Display a custom button on the map

vinayb — Sun, 25 Aug 2013 09:24:45 GMT

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.

Re: Display a custom button on the map

ZachLiu1 — Sun, 12 Dec 2021 02:10:06 GMT

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>

Re: Display a custom button on the map

vinayb — Mon, 26 Aug 2013 04:53:15 GMT

Problem is zoom effect will not apply on it, is there any other solution.

Re: Display a custom button on the map

KenBuja — Sun, 12 Dec 2021 02:10:09 GMT

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>

Re: Display a custom button on the map

AveryGomez — Tue, 27 Aug 2013 16:55:25 GMT

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

Re: Display a custom button on the map

JasonZou — Sun, 12 Dec 2021 02:10:12 GMT

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>