1

I have a series of tram stops on a Carto map and would like to indicate the user's location.

Is this doable in Carto?

https://jamieparker.carto.com/builder/161cab96-859b-433d-8a72-5ae5653b1b8e/embed

I've played around unsuccessfully Does Cartodb have a function to change center location based on user location?

Probably user error on my behalf, although Carto has changed considerably since that post.

Improve this question

1 Answer 1

Reset to default
1

You need to create a CARTO.js map application similar to the one you have shared on the second link. Do notice that BUILDER vizjsons are not compatible with the current version of CARTO.js. So you will need to recreate your map using createLayer method (here you have a working example) in combination with HTML5 Geolocation API.

I create a very simple application to show you how these two things work together:

<!DOCTYPE html>
<html>
  <head>
    <title>Get User Geolocation with CARTO.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" />

    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> 

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

  </head>
  <body>
    <div id="map"></div>

    <script>
      function main() {
        // Try HTML5 geolocation
        if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var lat = position.coords.latitude, 
              lng = position.coords.longitude,
              query = "SELECT 1 as cartodb_id, 'You are here' as message, ST_Transform(CDB_LatLng(" + lat + ", " + lng + "), 3857) as the_geom_webmercator",
              style = "#layer{marker-width: 7; marker-fill: red; marker-line-width: 0.5; marker-line-color: white; text-name: [message]; text-face-name: 'Open Sans Bold'; text-size: 12; text-fill: #FFFFFF; text-halo-fill: fadeout(#000000, 30%); text-halo-radius: 2; text-allow-overlap: true; text-placement: point; text-placement-type: simple; text-dy: 10;}";
        console.log(lat, lng, query, style);
          var map = L.map('map', { 
                  zoomControl: false,
                  center: [lat, lng],
                  zoom: 9
                  });
            // add basemap
            L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CARTO</a>'}).addTo(map);
            // add cartodb layer
            cartodb.createLayer(map, {
              user_name: 'ramirocartodb',
              type: 'cartodb',
              sublayers: [{
                sql: query,
                cartocss: style,
              }]
            }, {https: true}).addTo(map)
            .done(function(layer){
            var sublayer = layer.getSubLayer(0);
            console.log(sublayer);
          });
        }); 
        } else {
        // Browser doesn't support Geolocation
        alert("Geolocation is disabled");
        }
      }
      window.onload = main;
    </script>
  </body>
</html>

You can check the code and visualization here and here.

Improve this answer
1
  • Thanks @ramiroaznar This is beyond my skill level but will certainly assist others.
    – Jamie
    Sep 28, 2017 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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