Basic operations:
Advantages and disadvantages:
Other features
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Highlight a hovered polygon (version 2): New polygon + Infobox</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%; | |
| width:100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| /* map bakcground color, visible when there's not a base map */ | |
| #map { | |
| background-color: #fff; | |
| } | |
| /* set infobox styles */ | |
| div.cartodb-infobox { | |
| color: #fc8d59; | |
| position: absolute; | |
| bottom: 150px; | |
| left: 45%; | |
| height: 10px; | |
| box-shadow: none; | |
| border: 0; | |
| font-family: Sans-serif; | |
| font-weight: bold; | |
| } | |
| </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"; | |
| var highlightedFeature; | |
| // 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) { | |
| // changes cursor to pointer | |
| $('#map').css('cursor', 'pointer'); | |
| // highlights the polygon | |
| var jsonQuery = "https://victor-aertsen.carto.com/api/v2/sql?format=GeoJSON&q=SELECT cartodb_id, the_geom, the_geom_webmercator FROM " + poligonTableName + " WHERE cartodb_id = " + data.cartodb_id; | |
| $.getJSON(jsonQuery, function (result_data) { | |
| // removes prior highlighted polygon | |
| if (highlightedFeature) { | |
| map_object.removeLayer(highlightedFeature); | |
| } | |
| // new highlighted polygon overlay | |
| // styling options: http://leafletjs.com/reference-1.0.3.html#polygon | |
| highlightedFeature = L.geoJson(result_data, { | |
| style: { | |
| color: "#000", | |
| weight: 2, | |
| fillColor: "#fc8d59", | |
| fillOpacity: 1 | |
| } | |
| }).addTo(map_object); | |
| }); | |
| }) | |
| .on('error',function(err){ | |
| console.log('featureOver error: ' + err); | |
| }); // end events on mouseOver | |
| // events on mouseOut | |
| choroLayer.on('featureOut', function(e, latlng, pos, data, layer) { | |
| // changes pointer to cursor | |
| $('#map').css('cursor', 'auto'); | |
| // removes the highlighted polygon | |
| map_object.removeLayer(highlightedFeature); | |
| }) | |
| .on('error',function(err){ | |
| console.log('featureOut error: '+err); | |
| }); // end events on mouseOut | |
| // define infobox | |
| var infoBox = layer.leafletMap.viz.addOverlay({ | |
| type: 'infobox', | |
| layer: layer, | |
| template: '{{nameunit}}', | |
| width: 100, | |
| position: 'bottom', | |
| fields: [{ nameunit: 'nameunit' }] | |
| }); | |
| // add tooltip to map object | |
| $('body').append(infoBox.render().el); | |
| }); | |
| } | |
| // initiates the map | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |