examples/viewer/index.html from CartoDB/Windshaft

examples/viewer/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html>
<head>
    <title>Windshaft test</title>
    <meta charset="utf-8" />
    <script src="http://underscorejs.org/underscore-min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="leaflet.js"></script>
    <script src="leaflet.utfgrid.js"></script>

    <script>
        $(document).ready(function(){
            var map = new L.Map('map');
            var baseURL_def = "http://localhost:4000/database/template_postgis/layergroup";
            var mapConfig_def = JSON.stringify({
              version:"1.2.0",
              layers:[
                { type:"mapnik",
                  options:{
                    sql: "select ST_AsRaster(ST_Buffer('SRID=3857;LINESTRING(-1e7 -1e7, 1e7 1e7)'::geometry, 1e6, 4), 1e5, -1e5, '8BUI', 64) g",
                    geom_column: "g",
                    geom_type: "raster",
                    cartocss: "#style{ raster-opacity: 1;}",
                    cartocss_version: "2.0.0"
                  }},
                { type:"mapnik",
                  options:{
                    sql: "select 1 id, ST_Buffer(ST_SetSRID(ST_MakePoint(0,0),3857),5e6,4) g",
                    geom_column: "g",
                    cartocss: "#s { polygon-fill: blue; line-color: red; }",
                    cartocss_version: "2.0.0",
                    "interactivity": "id"
                  }}
              ]
            }, null, 2);

            var layers = [];

            function setMap(token, metadata) {
              metadata = metadata || {};
              var metadataLayers = metadata.layers || [];

              // remove previous layers
              layers.forEach(function(layer){
                map.removeLayer(layer)
              });
              layers = [];

              var baseURL = $('#baseurl').val() + '/' + token;
              var tileLayer = new L.tileLayer(baseURL + '/{z}/{x}/{y}.png');

              map.addLayer(tileLayer);
              layers.push(tileLayer);

              metadataLayers.forEach(function(layer, layerIndex) {
                var utfGridLayer = new L.UtfGrid(baseURL + '/' + layerIndex + '/{z}/{x}/{y}.grid.json?callback={cb}');
                utfGridLayer.on('click', function (e) {
                  if (e.data) {
                    console.log('click', e.data);
                  } else {
                    console.log('click nothing');
                  }
                });

                map.addLayer(utfGridLayer);
                layers.push(utfGridLayer);
              });

              map.setView(new L.LatLng(0, 0), 1, true);
            }

            submitForm = function(ev){
                ev.preventDefault();

                var baseUrl = $('#baseurl').val();
                var mapConfig = $('#mapconfig').val().replace(/[\r\n]/gm,"");

                $.ajax({
                  url: baseUrl,
                  type: 'POST',
                  contentType: 'application/json',
                  error: function(xhr, textStatus, errorThrown) {
                    console.error("Error: " + textStatus + " / " + JSON.stringify(errorThrown));
                  },
                  success: function(data, textStatus) {
                    console.info("Success: " + textStatus + " / " + JSON.stringify(data));
                    setMap(data.layergroupid, data.metadata);
                  },
                  data: mapConfig
                });

            };

            resetForm = function() {
              $('#baseurl').val(baseURL_def);
              $('#mapconfig').val(mapConfig_def);
            };

            $('#update_map').click(submitForm);

            $('#reset').click(resetForm);

            resetForm();
        });
    </script>

    <link rel="stylesheet" href="leaflet.css" />
</head>
<body>
<p>
<input type="button" id="reset" value="reset">
to values meant for use against server started with: <code>node ../readme_server.js</code>
</p>

<p>
Base URL: <input type="text" size="50" id="baseurl">
<input type="button" id="update_map" value="Go">
<br />
MapConfig (see <a href="https://github.com/CartoDB/Windshaft/blob/master/doc/MapConfig-specification.md">docs</a>):
<br/>
<textarea id="mapconfig" cols="100" rows="5"></textarea>
</p>

<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>