forked from ramiroaznar's block: How to highlight a polygon when hovering on a CARTO layer
Last active
April 28, 2019 02:42
-
-
Save thadk/9057b9440e6ebbf1ab72feb3270c88d5 to your computer and use it in GitHub Desktop.
How to highlight a polygon when hovering on a CARTO layer
This file contains hidden or 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
| license: mit |
This file contains hidden or 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('featureClick', 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