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.

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.

  • Thanks @ramiroaznar This is beyond my skill level but will certainly assist others. – Jamie Sep 28 '17 at 11:10

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.