Sharing specific location on map using CartoDB?

Question 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/

Question 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>

Question 3

Thanks for the help! I edited the question to add a little clarification.

Question 4

Let me try to find some time to build an example for you if nobody does it before :)

Question 5

Done, hope it helps!

iriberri iriberri 4,8122 gold badges16 silver badges28 bronze badges · Accepted Answer · 2015-09-16 17:44:58Z

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.
Let me try to find some time to build an example for you if nobody does it before :)

Stack Exchange Network

Sharing specific location on map using CartoDB?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Sharing specific location on map using CartoDB?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions