Mapstraction Examples - Changing provider

Demo Functions

Source Code:

<html>
  <head>
    <title>Mapstraction Examples - Editing Google Features</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://mvn.idelab.uva.es/idelabmapstraction/downloads/1.0/idelabmapstraction.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA"></script>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=HOIu3JPV34G8Z3BN7_wfmmWbnqUy9R7QaGtkwII.riiT2JMrBXR8aoErhjmyaQ--"></script>
    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
  </head>
  <body>
      <div id="google" style="position:relative; height: 400px; width:600px; float:left;"></div>
      <div id="google3D" style="position:relative; height: 400px; width:600px; float:left;display:none;"></div>
      <div id="microsoft" style="position:relative; height: 400px; width:600px; float:left;display:none;"></div>
      <div id="microsoft3D" style="position:relative; height: 400px; width:600px; float:left;display:none;"></div>
      <div id="openlayers" style="position:relative; height: 400px; width:600px; float:left;display:none;"></div>
      <div id="cartociudad" style="position:relative; height: 400px; width:600px; float:left;display:none;"></div>
      <div id="yahoo" style="position:relative; height: 400px; width:600px; float:left;display:none;"></div>
      <script type="text/javascript">
          // initialise the map with your choice of API
          var mapstraction = new mxn.MapstractionInteractive('google','google');
          mapstraction.setCenterAndZoom(new mxn.LatLonPoint(40, -3),5);

          //adding features to map
          var point;
          var points = []
          point = new mxn.LatLonPoint(40.5,-3.5);
          var marker = new mxn.Marker(point);
          mapstraction.addMarker(marker);

          point = new mxn.LatLonPoint(40.0, -3.5)
          points.push(point);
          point = new mxn.LatLonPoint(41.0, -2.5)
          points.push(point);
          point = new mxn.LatLonPoint(40.0, -1.5)
          points.push(point);
          point = new mxn.LatLonPoint(41.0, -0.5)
          points.push(point);

          var linestring = new mxn.Polyline(points);
          mapstraction.addPolyline(linestring)

          point = new mxn.LatLonPoint(40.0, -4.5)
          points.push(point);
          point = new mxn.LatLonPoint(41.0, -4.5)
          points.push(point);
          point = new mxn.LatLonPoint(41.0, -5.5)
          points.push(point);
          point = new mxn.LatLonPoint(40.0, -5.5)
          points.push(point);

          var polygon = new mxn.Polyline(points);
          polygon.setCosed(true);
          mapstraction.addPolyline(polygon)

          function changeProvider(provider){
              mapstraction.swap(provider,provider)
          }
      </script>
  </body>
</html>