MindFusion.Mapping.MapView.panTo Method | JavaScript Component Suite

Pans the map to a new center location.

Namespace: MindFusion.Mapping
File: MapView.js

Syntax

JavaScript Copy Code
function panTo (center)

Parameters

center: LatLong. A LatLong instance representing the geographic location of the new map center.

Example

The following example creates a data array with locations and a new MapView using a <DIV> element called "mapview" that we've declared in the HTML code of the page. Then it adds a MapLayer with map tiles and loads the first location with a zoom factor of 8 and pans the view to it:

JavaScript Copy Code
// create a list with possible locations var dataList = [ { location: new m.LatLong(-22.951916, -43.210487), text: "Rio de Janeiro, Brazil" }, { location: new m.LatLong(41.89021, 12.492231), text: "Rome, Italy" }, { location: new m.LatLong(29.979235, 31.134202), text: "Giza, Egypt" }, { location: new m.LatLong(40.6892746, -74.04455589999998), text: "New York, USA" }, { location: new m.LatLong(-33.856536, 151.214996), text: "Sydney, Australia"}] // create a new instance of the mapView var view = new m.MapView(document.getElementById("mapView")); view.theme = "light"; // create a map layer var l = new m.MapLayer("Map"); l.urlTemplate = "http://d.tile.stamen.com/terrain/{z}/{x}/{y}.png"; l.attribution = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'; view.layers.add(l); // load the map view.load(dataList[0].location, 8); view.panTo(dataList[0].location);

JavaScript

Copy Code

// create a list with possible locations
var dataList = [
{ location: new m.LatLong(-22.951916, -43.210487), text: "Rio de Janeiro, Brazil" },
{ location: new m.LatLong(41.89021, 12.492231), text: "Rome, Italy" },
{ location: new m.LatLong(29.979235, 31.134202), text: "Giza, Egypt" },
{ location: new m.LatLong(40.6892746, -74.04455589999998), text: "New York, USA" },
{ location: new m.LatLong(-33.856536, 151.214996), text: "Sydney, Australia"}]

// create a new instance of the mapView
var view = new m.MapView(document.getElementById("mapView"));
view.theme = "light";

// create a map layer
var l = new m.MapLayer("Map");
l.urlTemplate = "http://d.tile.stamen.com/terrain/{z}/{x}/{y}.png";
l.attribution = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.';
view.layers.add(l);

// load the map
view.load(dataList[0].location, 8);
view.panTo(dataList[0].location);

Syntax

Parameters

Example

See Also