Permalink
Browse files

added attribution parameter and saved favicon

  • Loading branch information...
1 parent 51c5136 commit 8b9d3fd444fe494e4ad448d819d49368a0e20371 @xavijam xavijam committed Aug 29, 2012
View
@@ -100,6 +100,14 @@ Using the library is really easy. It accepts the following parameters to manage
</tr>
<tr>
+<td>attribution</td>
+<td>Set the layer attribution.</td>
+<td>String</td>
+<td></td>
+<td>No</td>
+</tr>
+
+<tr>
<td>tile_style</td>
<td>If you want to add other style to the layer.</td>
<td>String</td>
@@ -189,11 +197,11 @@ Here's [live example](http://vizzuality.github.com/cartodb-leaflet/examples/cust
First of all add the necessary script and css files:
```html
-<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
-<!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+<!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
<link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
-<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
-<script type="text/javascript" src="js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+<script type="text/javascript" src="js/wax.leaf.min.js"></script>
<script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="dist/cartodb-popup.js"></script>
```
@@ -223,6 +231,7 @@ var cartodb_leaflet = new L.CartoDBLayer({
featureClick: function(ev, latlng, pos, data) {alert(data)},
featureOver: function(){},
featureOut: function(){},
+ attribution: "CartoDB",
auto_bound: true
});
```
@@ -246,6 +255,8 @@ New funcionalities are coming, in the meantime you can use:
Example: ```cartodb_leaflet.show();```
- **setInteraction**: Set the interaction of your layer to true or false.
Example: ```cartodb_leaflet.setInteraction(false);```
+- **setAttribution**: Set the layer attribution.
+ Example: ```cartodb_leaflet.setAttribution("CartoDB");```
- **setOpacity**: Change the opacity of the CartoDB layer.
Example: ```cartodb_leaflet.setOpacity(0.3);```
- **setQuery**: Change the query parameter for the layer
Oops, something went wrong.
@@ -1,6 +1,6 @@
/**
* @name cartodb-leaflet
- * @version 0.52 [August 22, 2012]
+ * @version 0.53 [August 29, 2012]
* @author: Vizzuality.com
* @fileoverview <b>Author:</b> Vizzuality.com<br/> <b>Licence:</b>
* Licensed under <a
@@ -22,6 +22,7 @@ if (typeof(L.CartoDBLayer) === "undefined") {
query: "SELECT * FROM {{table_name}}",
opacity: 0.99,
auto_bound: false,
+ attribution: "CartoDB",
debug: false,
visible: true,
tiler_domain: "cartodb.com",
@@ -47,6 +48,7 @@ if (typeof(L.CartoDBLayer) === "undefined") {
* featureOver - Callback when user hovers a feature (return mouse event, latlng, position (x & y) and feature data)
* featureOut - Callback when user hovers out a feature
* featureClick - Callback when user clicks a feature (return mouse/touch event, latlng, position (x & y) and feature data)
+ * attribution - Set the attribution text
* debug - Get error messages from the library
* auto_bound - Let cartodb auto-bound-zoom in the map (opcional - default = false)
*
@@ -206,6 +208,37 @@ if (typeof(L.CartoDBLayer) === "undefined") {
/**
+ * Set a new layer attribution
+ * @params {String} New attribution string
+ */
+ setAttribution: function(attribution) {
+ if (!isNaN(attribution)) {
+ if (this.options.debug) {
+ throw(attribution + ' is not a valid attribution');
+ } else { return }
+ }
+
+ // Remove old one
+ this.options.map.attributionControl.removeAttribution(this.options.attribution);
+
+ // Set new attribution in the options
+ this.options.attribution = attribution;
+
+ // Change text
+ this.options.map.attributionControl.addAttribution(this.options.attribution);
+
+ // Change in the layer
+ if (!this.options.interactivity) {
+ this.layer.options.attribution = this.options.attribution;
+ } else {
+ this.layer.options.attribution = this.options.attribution;
+ this.tilejson.attribution = this.options.attribution;
+ }
+ },
+
+
+
+ /**
* Change multiple options at the same time
* @params {Object} New options object
*/
@@ -394,12 +427,11 @@ if (typeof(L.CartoDBLayer) === "undefined") {
}
- this.layer = new L.TileLayer(cartodb_url,{attribution:'CartoDB', opacity: this.options.opacity});
+ this.layer = new L.TileLayer(cartodb_url,{attribution: this.options.attribution, opacity: this.options.opacity});
this.options.map.addLayer(this.layer,false);
},
-
/**
* Add interaction cartodb tiles to the map
*/
@@ -509,6 +541,7 @@ if (typeof(L.CartoDBLayer) === "undefined") {
blankImage: '../img/blank_tile.png',
tilejson: '1.0.0',
scheme: 'xyz',
+ attribution: this.options.attribution,
tiles: [tile_url],
grids: [grid_url],
tiles_base: tile_url,
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Custom infowindow</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0;} #map {position:relative; margin:0; width:100%; height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -20,14 +19,14 @@
function initialize() {
var map = new L.Map('map').setView(new L.LatLng(30.718379593199494, -24.99772644042969), 4)
, mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
- , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "OpenStreetMaps"});
map.addLayer(mapbox,true);
// Create a CartoDB popup
var popup = new L.CartoDBPopup();
// First cartodb layer, countries
- var cartodb_leaflet1 = new L.CartoDBLayer({
+ var countries = new L.CartoDBLayer({
map: map,
user_name:'examples',
table_name: 'country_colors',
@@ -45,7 +44,7 @@
debug: true
});
// Adding layer to map
- map.addLayer(cartodb_leaflet1);
+ map.addLayer(countries);
// Now the CartoDB layer, the earthquakes
var earthquakes = new L.CartoDBLayer({
@@ -54,6 +53,7 @@
table_name: 'earthquakes',
query: "SELECT cartodb_id,the_geom_webmercator,the_geom,magnitude FROM {{table_name}}",
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
+ attribution: "Vizzuality",
opacity:1,
interactivity: "cartodb_id, magnitude",
featureOver: function(ev,latlng,pos,data) {
View
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + ESRI</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Hover line</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Hover point</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Hover polygon</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
View
@@ -9,15 +9,13 @@
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>CartoDB | Leaflet library</title>
<link href="http://developers.cartodb.com/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
- <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://developers.cartodb.com/javascripts/all.js" type="text/javascript"></script>
- <link rel="shortcut icon" href="http://developers.cartodb.com/images/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<script type="text/javascript">
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20934186-3']); _gaq.push(['_setDomainName', 'cartodb.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
</script>
- <noscript><meta http-equiv="refresh" content="0;url=http://cartodb.com/no_javascript.html"></noscript>
</head>
- <body class="developers examples" onload="initialize()">
+ <body class="developers examples">
<div class="background blue grid fixed">
<header>
<h1 class="left">
@@ -5,12 +5,11 @@
<title>CartoDB | NY Buildings</title>
<meta name="description" content="">
<meta name="author" content="">
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -5,13 +5,12 @@
<title>CartoDB | NY State liquor licenses</title>
<meta name="description" content="">
<meta name="author" content="">
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ny_licenses.css" rel="stylesheet">
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -5,13 +5,12 @@
<title>CartoDB | NY Restaurant Week</title>
<meta name="description" content="">
<meta name="author" content="">
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ny_restaurants.css" rel="stylesheet">
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Query by distance</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -4,11 +4,10 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Show / Hide</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="../img/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
@@ -5,13 +5,12 @@
<title>CartoDB | WSJ election map</title>
<meta name="description" content="">
<meta name="author" content="">
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <link rel="shortcut icon" href="img/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ny_licenses.css" rel="stylesheet">
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
View
Binary file not shown.
Oops, something went wrong.

0 comments on commit 8b9d3fd

Please sign in to comment.