Basic operations:
Advantages and disadvantages:
Other features
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Highlight a hovered polygon (version 1): CSS change + Tooltip (CARTO)</title> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <script type="cartocss/text" id="choro_basic"> | |
| /** choropleth visualization */ | |
| #ign_spanish_adm2_provinces{ | |
| polygon-opacity: 1; | |
| line-width: 0.3; | |
| polygon-fill: #fff7ec; | |
| } | |
| </script> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #map { | |
| /* background visible without a base map */ | |
| background-color: #fff; | |
| } | |
| div.cartodb-tooltip-content-wrapper { | |
| margin: 0; | |
| padding: 0; | |
| color: #000; | |
| height: 30px; | |
| background-color:rgba(255, 255, 255, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- MAP --> | |
| <div id="map"></div> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| // main function | |
| function main() { | |
| // map object | |
| var map_object = new L.Map('map', { | |
| center: [39.5, -4], | |
| zoom: 6, | |
| zoomControl: false | |
| }); | |
| // basic variables | |
| var userName = "victor-aertsen"; | |
| var poligonTableName = "ign_spanish_adm2_provinces_displaced_canary"; | |
| // basic layer | |
| var layerSource = { | |
| user_name: userName, | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: "SELECT * FROM ign_spanish_adm2_provinces_displaced_canary", | |
| cartocss: $("#choro_basic").html() | |
| }] | |
| } | |
| // adds layer | |
| cartodb.createLayer(map_object, layerSource) | |
| .addTo(map_object) | |
| .done(function(layer) { | |
| // map options | |
| map_object.dragging.disable(); | |
| map_object.touchZoom.disable(); | |
| map_object.doubleClickZoom.disable(); | |
| var choroLayer = layer.getSubLayer(0); | |
| choroLayer.setInteraction(true); | |
| choroLayer.setInteractivity(['cartodb_id', 'nameunit']); | |
| // events on mouseOver | |
| choroLayer.on('featureOver', function(e, latlng, pos, data, layer) { | |
| console.log('Hola'); | |
| // changes cursor to pointer | |
| $('#map').css('cursor', 'pointer'); | |
| // changes the style of layer with a new style for the hovered feature | |
| var highlightedCSS = $("#choro_basic").html() + "#ign_spanish_adm2_provinces [ cartodb_id = " + data.cartodb_id + "] { line-opacity: 1; line-color: #000; line-width: 2; polygon-fill: #fc8d59; }"; | |
| choroLayer.setCartoCSS(highlightedCSS); | |
| }) | |
| .on('error',function(err){ | |
| console.log('featureOver error: ' + err); | |
| }); | |
| // events on mouseOut | |
| choroLayer.on('featureOut', function(e, latlng, pos, data, layer) { | |
| // changes pointer to cursor | |
| $('#map').css('cursor', 'auto'); | |
| // changes the style of layer without the new style for the hovered feature | |
| var highlightedCSS = $("#choro_basic").html(); | |
| choroLayer.setCartoCSS(highlightedCSS); | |
| }) | |
| .on('error',function(err){ | |
| console.log('featureOut error: '+err); | |
| }); | |
| // define tootltip | |
| var tooltip = layer.leafletMap.viz.addOverlay({ | |
| type: 'tooltip', | |
| layer: choroLayer, | |
| template: '<div class="cartodb-tooltip-content-wrapper"><div class="cartodb-tooltip-content">{{nameunit}}</div></div>', | |
| width: 200, | |
| position: 'bottom|right', | |
| fields: [{ nameunit: 'nameunit' }] | |
| }); | |
| // add tooltip to map object | |
| $('body').append(tooltip.render().el); | |
| }); | |
| } | |
| // initiates the map | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |