1

I have created a map of B&Bs/inns in the US. I am trying to figure out how to send someone a link to the exact location on the map when I zoom in on their blue marker identifying their property.

If I click the share button provided by Carto, I am only able to link to the default zoomed out version of the map.

I would like to generate the custom URLs automatically by clicking a button and not have to do it manually.

Here is the map: http://www.innfan.com/view-map/

2

You can add some extra parameters to that URL in order to specify the center coordinates and the level of zoom: http://docs.cartodb.com/faqs.html#how-can-i-set-the-position-of-an-embedded-map

For example:

http://<username>.cartodb.com/viz/<viz_id>/embed_map?zoom=3&center_lat=0&center_lon=0

From your question it's not clear if you just want to do this manually or if you would like to generate these custom URLs from a button.

In this case, I have built an example here: http://bl.ocks.org/iriberri/0c65b681afb46d4cbc31

The code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Get coordinates of geometry | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      body > div.cartodb-header{
      display: none;
      position: absolute;
      top:0px;
      width: 100%;
      background-color: rgba(0,0,0,.5);
      font-family: 'Helvetica Neue',Helvetica,sans-serif;
      line-height: normal;
      z-index: 99999;
}


  </style> 
    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>



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

    <script>
      function main() {

    var map = new L.Map('map', {
      zoomControl: false,
      center: [43, 0],
      zoom: 3

          });
    L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
      attribution: 'Stamen',
    }).addTo(map);

    embed_url = 'http://documentation.cartodb.com/viz/236085de-ea08-11e2-958c-5404a6a683d5/embed_map'

       cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json')
       .addTo(map)
       .on('done', function(layer) {

  // change the query for the first layer
  var subLayerOptions = {
      sql: "SELECT * FROM example_cartodbjs_1 where pop_other::float > 1000000",
      cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
        }

  var sublayer = layer.getSubLayer(0);
  sublayer.set(subLayerOptions);


  sublayer.on('featureClick', function(e, latlng, pos, data) {
          alert("Hey! You clicked " + latlng +". Your URL is: " + embed_url+"?center_lat="+latlng[0]+"&center_lon="+latlng[1]+"&zoom=10");

    });
  }).on('error', function() {
        //log the error
});
      }
      window.onload = main;
    </script>
  </body>
</html>
  • Thanks for the help! I edited the question to add a little clarification. – Mark Zimmer Sep 18 '15 at 0:22
  • Let me try to find some time to build an example for you if nobody does it before :) – iriberri Sep 21 '15 at 8:43
  • Done, hope it helps! – iriberri Sep 22 '15 at 12:22

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.