Last active
October 28, 2017 19:14
-
-
Save ramiroaznar/9afd730dacf2547c4d66757074e98fd3 to your computer and use it in GitHub Desktop.
Enabling dragging to a CARTO map
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>Enabling dragging to a CARTO map</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="https://cartodb.com/assets/favicon.ico" /> | |
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- map div --> | |
<div id="map"></div> | |
<script type="text/cartocss" id="style"> | |
#layer { | |
marker-width: 6; | |
marker-fill: ramp([featurecla], (#5F4690, #1D6996, #38A6A5, #0F8554, #73AF48, #EDAD08, #E17C05, #CC503E, #94346E), ("Populated place", "Admin-1 capital", "Admin-0 capital", "Admin-1 region capital", "Scientific station", "Admin-0 region capital", "Admin-0 capital alt", "Historic place", "Meteorological Station"), "="); | |
marker-fill-opacity: 0.7; | |
marker-allow-overlap: true; | |
marker-line-width: 0; | |
} | |
</script> | |
<script type="text/sql" id="query"> | |
SELECT | |
* | |
FROM | |
populated_places WHERE pop_max > 700000 | |
</script> | |
<script> | |
function main() { | |
// get styles & query | |
var style = $("#style").text(), | |
query = $("#query").text(), | |
// declare map variable | |
map = L.map('map', { | |
zoomControl: false, | |
center: [41, -25], | |
zoom: 2 | |
}); | |
// add basemap | |
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CARTO</a>'}).addTo(map); | |
// add cartodb layer | |
cartodb.createLayer(map, { | |
user_name: 'ramirocartodb', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: query, | |
cartocss: style | |
}] | |
}).addTo(map) | |
.done(function(layer){ | |
// declare sublayer variable | |
var cityLayer = layer.getSubLayer(0); | |
map.dragging.enable(); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment