-
-
Save ramiroaznar/3d3cd3d61a910705a0d534fb98d1b3bd to your computer and use it in GitHub Desktop.
dot vs marker symbolizers
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 lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<!--Edit the title of the page--> | |
<title>dot vs marker symbolizers</title> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<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 { | |
width: 100%; | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
#map1 { | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
height: 50%; | |
} | |
#map2 { | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
right: 0; | |
height: 50%; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/sql" id="query"> | |
select g.* from gecat_geodata g tablesample system(50) | |
</script> | |
<script type="text/cartocss" id="dot"> | |
#layer { | |
dot-width: 2; | |
dot-fill: #27b7ff; | |
} | |
</script> | |
<script type="text/cartocss" id="marker"> | |
#layer { | |
marker-width: 2; | |
marker-fill: #27b7ff; | |
marker-line-width: 0; | |
} | |
</script> | |
<div id="map1"></div> | |
<div id="map2"></div> | |
<script type="text/javascript"> | |
function main() { | |
var dot = $("#dot").text(), | |
marker = $("#marker").text(), | |
query = $("#query").text(), | |
query = query + '/* ' + new Date() + ' */' | |
var map1 = L.map('map1', { | |
zoomControl: true, | |
center: [41.383333, 2.183333], | |
zoom: 10 | |
}); | |
map2 = L.map('map2', { | |
zoomControl: false, | |
center: [41.383333, 2.183333], | |
zoom: 10 | |
}); | |
// add a nice baselayer from Stamen | |
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{ | |
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' | |
}).addTo(map1); | |
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{ | |
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' | |
}).addTo(map2); | |
cartodb.createLayer(map1, { | |
user_name: 'cdbsol-admin', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: query, | |
cartocss: dot | |
}] | |
}) | |
.addTo(map1) | |
.done(function(layer) { | |
// do stuff | |
}); | |
cartodb.createLayer(map2, { | |
user_name: 'cdbsol-admin', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: query, | |
cartocss: marker | |
}] | |
}) | |
.addTo(map2) | |
.done(function(layer) { | |
// do stuff | |
}); | |
map1.on('moveend', function(e) { | |
changeMapState(map1, map2); | |
}); | |
map2.on('moveend', function(e) { | |
changeMapState(map2, map1); | |
}); | |
function changeMapState(src,tgt){ | |
tgt.setZoom(src.getZoom()); | |
tgt.panTo(src.getCenter()); | |
} | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment