Find more Examples here

Set the extent of a map (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

    // function initOA is called as soon as Outdooractive JavaScript API is ready
    oa.api.maps( initOA );
    
    function initOA( oamaps, gm ) {
    
        // create configuration objects
        var layerConfig, content, detailPageEvent;
        initConfig();
    
        // instantiate GeomLayer
        layer = new oamaps.GeomLayer( content, layerConfig );
    
        // add listener to open detail page
        var h = layer.listen( detailPageEvent, openDetailPage );
    
        layer.whenLoaded( initMap );
    
        function initMap() {
    
            var bounds = layer.getBounds();
    
            if (oa.PREFIX=='oax') {
                mapConfig.bounds = layer.getBounds();
            } else {
                mapConfig.center = layer.getBounds().center;
                mapConfig.zoom   = 11;
            }
    
            // instantiate map
            map =  oamaps.map( mapDiv, mapConfig );
    
            // add GeomLayer to map
            layer.setMap( map );
    
        }
    
        // all configuration attributes are set here
        function initConfig() {
    
            // map container
            mapDiv = document.getElementById( "map_canvas" );
    
            // map config
            mapConfig = { 
    
                mapTypeId: 'oa_map',
                mapTypeControlOptions : { mapTypeIds: ['oa_map', 'oa_topo', 'oa_map_winter'] }
    
            };
    
            // only oax allows GeomLayer configuration attributes
            if (oa.PREFIX === 'oax') {
    
                layerConfig = {
    
                    fitPoiBounds: true,
                    markersActive: true,
                    defaultIW: true
    
                };
    
            }
    
            // add some tours to array of object ids
            // oam is restricted to one object right now
            content = (oa.PREFIX === 'oax') ? 
                [
    
                    '1397449', '5345254', // some tours
                    '1336336', '1324291'  // some pois
    
                ] : '1336336';
    
            // event to open detail page:
            // oax: info window click
            // oam: marker click
            detailPageEvent = (oa.PREFIX === 'oax') ? 'iwSelect' : 'markerClick';
    
        }
    
    }
    
    function openDetailPage( obj ) {
        return window.location = "../../FlexView-API/FlexView.DetailPage.html?id=" + obj.id;
    }

// Use the id list out of the GeomLayer Example to create
// a list of commands to test fitOOI and centerOOI

// Get DOM node holding the map_canvas
var node = document.getElementById('map_canvas').parentNode;

// List of command templates:
// map.fitOOI() and map.centerOOI() are the commands to test
var js_cmd = [ 'map.fitOOI( %P% );' , 'map.centerOOI( %P% );' ];

// List l will hold single ids or id lists
var l = [];

// Add the id array of the tours to list l
l.push(tours);

// Add the id array of the pois to list l
l.push(pois);

// Add the id array of tours and pois to list l
l.push(content);

// Loop over tours and pois and add single ids to list l
for(var i=0; i<content.length; i++) {
    l.push(content[i]);
}

// Create a table with a single row
// to render the commands inside two columns
var table = document.createElement('table');
var tr = document.createElement('tr');

// Loop over the command template strings
for(var h=0; h<js_cmd.length; h++) {

    // Current command template string
    var j = js_cmd[h];

    // Create a table column and an unordered list
    var td = document.createElement('td');
    var ul = document.createElement('ul');

    // Loop over list of ids and id arrays
    for(var i=0; i<l.length; i++) {

	// Build the parameter string
	// (a single id differs from an id array)
	var param = (Array.isArray(l[i])) ? "['" + l[i].join("', '") + "']" : "'" + l[i] + "'";

	// Put the parameter string into the command template
	var cmd = j.replace( /%P%/, param );
	
	// Create a hyperlink
	// (tells the browser to render our command text like a hyperlink)
	var a  = document.createElement('a');
	
	a.setAttribute('href', '#');

	// Set 'onclick' handler
	a.setAttribute('onclick', cmd + 'return false;');
	a.appendChild(document.createTextNode( cmd ));

	// Create list item for each command
	var li = document.createElement('li');

	// Add hyperlink to list item
	li.appendChild(a);

	// Add list item to unordered list
	ul.appendChild(li);
    }

    // Add unordered list to table column
    td.appendChild(ul);






    // Add table column to table row
    tr.appendChild(td);

}

// Add table row to table
table.appendChild(tr);

// Add a horizontal ruler between the map and the command list table
node.appendChild(document.createElement('hr'));

// Add table to the map_canvas' parent element
node.appendChild(table);