3

So I'm trying to get a simple test-site setup but it's not working. Whenever I load the site I can very quickly see the controls flash on the screen then go away.

The when not doing local testing, the test-site is located at www.parkru.com/mapTest.html

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">


        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
        <!--[if lte IE 8]>
          <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
        <![endif]-->
        <script type = "text/javascript" src="static/jquery.min.js"></script>

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

        <script>
            $(document).ready(function() {
                cartodb.createVis('map', 'http://willkara.cartodb.com/api/v2/viz/2dfc4142-674c-11e3-a9f5-5fd5763ac197/viz.json');
            });

        </script>

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

        </div>    
    </body>
</html>
  • You can add a couple additional functions to your createVis function. 'The createLayer and createVis functions returns two important events for you to take advantage of: the first is done, which will let your code know that the library has successfully read the information from the Viz JSON and loaded the layer you requested. The second is ‘error’, which lets you know something did not go as expected when loading a requested layer.' developers.cartodb.com/documentation/cartodb-js.html#sec-3-1 – Radar Dec 17 '13 at 19:44
8

You have to explicitly specify a width and height to your #map container :

In css add :

#map {
   width:600px;
   height:400px;
}

Or in HTML :

<div id="map" style="width:600px; height:400px;">

And you will see correctly your map!

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.