3

I need to display 2 maps separate by vertical line on the middle of the html, it means on diferents and make some buttoms or aplicate the same zoom on both at the same time.

I managed to put one script code map on the first div but when I do the same to the other on the second div it invalidates the previous map and only shows the second map.

Im newbie on javascript. How can I solve this issue?

I know that with Iframe can do it but I need to make functionalities "outside" dinamically with 2 maps at the same time like zoom or filter's or a timelapse for the two at a time. Any ideas for this?

<div id="map1" style="border: 4px solid red; position: absolute; bottom: 181px; top: 0; z-index: 1; left: 0; right:50%;  padding: 0; margin: 0;">
</div>
<div id="map2" style="border: 4px solid blue; position: absolute; bottom: 181px; top: 0; z-index: 1; left: 50%; right: 0; padding: 0; margin: 0;">
</div>

<script>
  function main() {
    cartodb.createVis('map1', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
        shareable: true,
        title: true,
        description: true,
        search: true,
        tiles_loader: true,
        center_lat: 0,
        center_lon: 0,
        zoom: 2
    })
    .done(function(vis, layers) {
      layers[1].setInteraction(true);
      layers[1].on('featureOver', function(e, latlng, pos, data) {
        cartodb.log.log(e, latlng, pos, data);
      });
      var map = vis.getNativeMap();
    })
    .error(function(err) {
      console.log(err);
    });
  }
  window.onload = main;
</script>

<script>
  function main() {
    cartodb.createVis('map2', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
        shareable: true,
        title: true,
        description: true,
        search: true,
        tiles_loader: true,
        center_lat: 0,
        center_lon: 0,
        zoom: 2
    })
    .done(function(vis, layers) {
      layers[1].setInteraction(true);
      layers[1].on('featureOver', function(e, latlng, pos, data) {
        cartodb.log.log(e, latlng, pos, data);
      });

      var map = vis.getNativeMap();
    })
    .error(function(err) {
      console.log(err);
    });
  }
  window.onload = main;
</script>

0

Your code is not working because you have two "main" functions. You'd just need to use the two createVis methods inside one of them, and get rid of the other.

I have also renamed the variable "map" that you had inside each method, and associating each of the maps to a global variable (map1 or map2) in case you need to use them for something.

The working code is here.

<!DOCTYPE html>
<html>
  <head>

    <style>
      html, body{
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map1" style="border: 4px solid red; position: absolute; bottom: 181px; top: 0; z-index: 1; left: 0; right:50%;  padding: 0; margin: 0;">
</div>
<div id="map2" style="border: 4px solid blue; position: absolute; bottom: 181px; top: 0; z-index: 1; left: 50%; right: 0; padding: 0; margin: 0;">
</div>

    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>


    <!-- Drop your code between the script tags below! -->
    <script>

    function main() {

      var map1;
      var map2;
    cartodb.createVis('map1', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
        shareable: true,
        title: true,
        description: true,
        search: true,
        tiles_loader: true,
        center_lat: 0,
        center_lon: 0,
        zoom: 2
    })
    .done(function(vis, layers) {
      layers[1].setInteraction(true);
      layers[1].on('featureOver', function(e, latlng, pos, data) {
        cartodb.log.log(e, latlng, pos, data);
      });
     map1 = vis.getNativeMap();
    })
    .error(function(err) {
      console.log(err);
    });

     cartodb.createVis('map2', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
        shareable: true,
        title: true,
        description: true,
        search: true,
        tiles_loader: true,
        center_lat: 0,
        center_lon: 0,
        zoom: 2
    })
    .done(function(vis, layers) {
      layers[1].setInteraction(true);
      layers[1].on('featureOver', function(e, latlng, pos, data) {
        cartodb.log.log(e, latlng, pos, data);
      });

      map2 = vis.getNativeMap();
    })
    .error(function(err) {
      console.log(err);
    });
  }

    window.onload = main;
    </script>

  </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.