Last active
May 12, 2017 14:06
-
-
Save ramiroaznar/14a8671657e61ef5ab1e199eddb55761 to your computer and use it in GitHub Desktop.
How to highlight a polygon when hovering on a CARTO layer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>How to highlight a polygon when hovering on 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" /> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <script type="text/sql" id="query"> | |
| SELECT * FROM ne_50m_admin_0_countries | |
| </script> | |
| <script type="text/cartocss" id="style"> | |
| #layer { | |
| polygon-opacity: 0.5; | |
| polygon-fill: ramp([mapcolor7], cartocolor(Bold), category(7)); | |
| line-width: 2; | |
| line-color: ramp([mapcolor7], cartocolor(Bold), category(7)); | |
| line-opacity: 0.4; | |
| line-offset: -1; | |
| } | |
| </script> | |
| <div id="map"></div> | |
| <!-- include cartodb.js library --> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| function main() { | |
| var query = $("#query").text(); | |
| style = $("#style").text(); | |
| var map = new L.Map('map', { | |
| zoomControl: false, | |
| center: [43, 0], | |
| zoom: 3 | |
| }); | |
| var sql = new cartodb.SQL({ user: 'ramirocartodb', format: 'geojson' }); | |
| var polygon; | |
| function showFeature(cartodb_id) { | |
| sql.execute("select ST_Simplify(the_geom, 0.1) as the_geom from ne_50m_admin_0_countries where cartodb_id = {{cartodb_id}}", {cartodb_id: cartodb_id} ).done(function(geojson) { | |
| if (polygon) { | |
| map.removeLayer(polygon); | |
| } | |
| polygon = L.geoJson(geojson, { | |
| style: { | |
| color: "#000", | |
| fillColor: "#fff", | |
| weight: 2, | |
| opacity: 0.65 | |
| } | |
| }).addTo(map); | |
| }); | |
| } | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { | |
| attribution: 'CARTO' | |
| }).addTo(map); | |
| cartodb.createLayer(map, { | |
| user_name: 'ramirocartodb', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: query, | |
| cartocss: style | |
| }] | |
| }) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.setInteractivity("cartodb_id"); | |
| sublayer.setInteraction(true); | |
| sublayer.on('featureOver', function(e, pos, latlng, data) { | |
| showFeature(data.cartodb_id) | |
| }); | |
| }).on('error', function() { | |
| cartodb.log.log("Some error occurred."); | |
| }); | |
| } | |
| // you could use $(window).load(main); | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment