My Account Contact Us Cart

MAP Web Author JavaScript API How To

How To Set Map Parameters

Many aspects of the map viewer’s runtime behaviour can be configured by setting map parameters in the embedViewer API. Parameters are set by adding name/value pairs to the passed JavaScript object.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX,
                panWidget:false,
                zoomMax:200
            }
        );
    </script>   
</head>
<body>
    <div style="position:relative">
        <div id="map2">
        </div>
    </div>
</body>
</html>

Beware that a common mistake is to forget to add commas (“,”) between newly added name/value pairs.

You can see a live example here.

How To Run a Function After the Map Has Finished Loading

A web map will not fully appear and function in your web page until after all of its components have been downloaded. Depending on the size of your map this can take some time. You may want to have processing that occurs only after the map is ready. You can pass a function in the loadedCB parameter of the embedViewer API that will be called after the map has finished downloading and initializing.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                loadedCB: mapLoadComplete,
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function mapLoadComplete() {
            alert("The map has finished loading");
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
    </div>
</body>
</html>

You can see a live example here.

How To Control Map Panning and Zooming

Rather than use the panning and zooming widgets in the map viewer, you may want to control the map panning and zooming from elements within your web page.

Disable the built-in panning and zooming widgets with parameters to embedViewer and use the navigation APIs (e.g. panLeft and zoomIn) to control the map instead.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                panWidget: false,
                zoomWidget: false,
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function zoom_in() {
            theMap.zoomIn();
        }

        function zoom_out() {
            theMap.zoomOut();
        }

        function pan_left() {
            theMap.panLeft();
        }

        function pan_right() {
            theMap.panRight();
        }

        function pan_up() {
            theMap.panUp();
        }

        function pan_down() {
            theMap.panDown();
        }

        function pan_home() {
            theMap.panHome();
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <button type="button" onclick="zoom_in()">Zoom In</button>
        <button type="button" onclick="zoom_out()">Zoom Out</button>
        <button type="button" onclick="pan_left()">Pan Left</button>
        <button type="button" onclick="pan_right()">Pan Right</button>
        <button type="button" onclick="pan_up()">Pan Up</button>
        <button type="button" onclick="pan_down()">Pan Down</button>
        <button type="button" onclick="pan_home()">Pan Home</button>
    </div>
</body>
</html>

You can see a live example here.

How To Hide and Show Layers

Disable the built-in layer widget with a parameter to embedViewer and use the setVisible API to hide and show layers.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                layerWidget: false,
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function toggleLayer(layerName, show) {
            theMap.setVisible(layerName, show);
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <input type="checkbox" checked="true" onClick="toggleLayer('PST', checked)" /> PST
        <input type="checkbox" checked="true" onClick="toggleLayer('MST', checked)" /> MST
        <input type="checkbox" checked="true" onClick="toggleLayer('CST', checked)" /> CST
        <input type="checkbox" checked="true" onClick="toggleLayer('EST', checked)" /> EST
    </div>
</body>
</html>

You can see a live example here.

How To Search in the Map

Disable the built-in search widget with a parameter to the embedViewer API and use the search API from your own code.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                searchWidget: false,
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function search() {
            var o = document.getElementById("searchText");
            if (o) {
                theMap.search(o.value);
            }
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        Enter a name of a state and click the "search" button. <br>
        <input id="searchText" type="text"></input>
        <button type="button" onclick="search()">Search</button>
    </div>
</body>
</html>

You can see a live example here.

How To Get the Attributes for the Map Feature That Has Just Been Clicked On

After the map has loaded, add a mouse down handler to the map element. In the handler use the retrieve API to get the current feature.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                loadedCB: onMapLoaded,
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function onMapLoaded() {
            var m = theMap.element();
            if (m) {
                if (window.addEventListener) {
                    m.addEventListener("mousedown", onMouseClick, false);
                } 
                else if (window.attachEvent) { // IE
                    m.attachEvent("onmousedown", onMouseClick);
                }
            }
        }

        function onMouseClick(event) {
            alert(theMap.retrieve(AVENZA.FEATURE).attributes.STATE_NAME);
        }       
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
    </div>
</body>
</html>

It’s important to use the element() function as opposed to document.getElementById() to get a reference to the map element. The way that the map element is added to the page will change depending on the browser type, element() ensures that the correct reference will be returned.

You can see a live example here.

How To Set Attributes in the Map at Run Time

Use the forEach API to specify a function to be run on features in the map. Update the attribute values in the function.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function update(feature) {
            var s = feature.attributes.STATE_ABBR.substr(0, 2);
            var d = new Date();
            s = s + " Modified on " + d;
            feature.attributes.STATE_ABBR = s;
            return feature;
        }

        function updateAttributes() {
            theMap.features().forEach(update);
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <button type="button" onclick="updateAttributes()">Update Attributes</button>
    </div>
</body>
</html>

To change to the feature object in the update function you return it. The features() API takes a MAPublisher expression that lets you filter down the list of feature objects that your update function will be called for (see here). It’s faster to filter features before your update function is called than to use an if block inside.

You can see a live example here.

How To Highlight Map Features

Use the features and highlight APIs to highlight items in the map. An MAPublisher expression is passed as a parameter to features to specify which items to highlight.

If you require more complex logic to determine which features to highlight, you can use the forEach API. On large, complex maps forEach is slower than passing an expression to features, only use it if you really need to.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function highlightUsingForEach() {
            theMap.features().forEach(function(feature) {
                if (feature.attributes.STATE_NAME.substr(0, 1) == "M") {
                    feature.highlight.visible = true;
                    return feature;
                }
            });         
        }

        function highlight() {
            theMap.features('TIMEZONE="CST"').highlight();          
        }

        function clearHighlight() {
            // clear layers even if they're hidden
            theMap.features(null, false).highlight({visible: false});
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <button type="button" onclick="highlight()">Highlight CST</button>
        <button type="button" onclick="highlightUsingForEach()">Highlight "M" States Using forEach</button>
        <button type="button" onclick="clearHighlight()">Clear</button>
    </div>
</body>
</html>

You can see live examples here.

How To Show a Callout for a Map Feature

Use the features and showCallout APIs to show callout bubbles programmatically. You can also use these API to have a specific callout opened when the map first loads.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX,
                loadedCB: function () {
                    theMap.features('STATE_ABBR="MT"').showCallout();
                }
            }
        );

        function callout() {
            theMap.features('STATE_ABBR="TX"').showCallout();           
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <button type="button" onclick="callout()">Show Callout</button>
    </div>
</body>
</html>

You can see live example here.

How To Zoom in on a Feature in the Map

Use the features and reveal APIs to have the map viewer center and zoom in on a feature in the map.

<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function texas() {
            theMap.features('STATE_ABBR="TX"').reveal();            
        }

        function est() {
            theMap.features('TIMEZONE="EST"').reveal();         
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <button type="button" onclick="texas()">Zoom in on Texas</button>
        <button type="button" onclick="est()">Zoom in on States in Eastern Time</button>
    </div>
</body>
</html>

If more than one feature matches the expression, the view will zoom to fit all of them. You can see live example here.

MAP Web Author JavaScript API How To