Permalink
Browse files

new version 0.47, all changes in NEWS.md

  • Loading branch information...
xavijam committed Jun 13, 2012
1 parent 61b0909 commit 38a87339d3312fab3d304453b1cf6f001800a356
Showing with 3,201 additions and 86 deletions.
  1. +7 −0 NEWS.md
  2. +16 −30 README.md
  3. +8 −14 custompopup.html
  4. +1 −1 dist/cartodb-leaflet-min.js
  5. +59 −27 dist/cartodb-leaflet.js
  6. +20 −12 index.html
  7. +3,088 −0 js/wax.leaf.js
  8. +0 −2 js/wax.leaf.min-6.0.0-beta2.js
  9. +2 −0 js/wax.leaf.min-6.0.5-touched.js
View
@@ -0,0 +1,7 @@
+
+ [v 0.47]
+ - Touch events supported
+ - Feature event functions renamed (featureClick,featureOut,featureOver)
+ - New parameter added in those functions, position. Where it returns the x and y position where user clicked or touched.
+ - setBounds function improved
+ - setBounds function added for publicy using.
View
@@ -4,33 +4,10 @@
This library allows you to use your own CartoDB tables with Laeflet.
-# Creating an example
-
-You will need to load these files to run the library:
-
- - [Leaflet library](http://github.com/CloudMade/Leaflet/blob/master/dist/leaflet.js)
- - [Leaflet css theme](http://github.com/CloudMade/Leaflet/tree/master/dist/leaflet.css)
- - [Wax for Leaflet](https://github.com/mapbox/wax)
- - [CartoDB library for Leaflet](https://github.com/Vizzuality/cartodb-leaflet/blob/gh-pages/cartodb-leaflet-min.js)
-
-Html(*):
-
-```html
-<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
-<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
-<script type="text/javascript" src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
-<script type="text/javascript" src="wax.leaf.min-6.0.0-beta2.js"></script>
-<script type="text/javascript" src="cartodb-leaflet-min.js"></script>
-```
-* We strongly recommend to use the library files we have in this repository, they are fully tested.
-
-
-
# Using the library
Using the library is really easy. It accepts the following parameters to manage the behavior of your CartoDB layers:
-
<table>
<tr>
<td><b>Parameter name</b></td>
@@ -89,32 +66,34 @@ Using the library is really easy. It accepts the following parameters to manage
</tr>
<tr>
-<td>featureMouseOver</td>
+<td>featureOver</td>
<td>A callback when hovers in a feature</td>
<td>Function</td>
<td>
<b>event:</b> Mouse event object<br/>
<b>latlng:</b> The LatLng leaflet object where was clicked<br/>
+ <b>pos:</b> Object with x and y position in the DOM map element<br/>
<b>data:</b> The CartoDB data of the clicked feature with the `interactivity` param.
</td>
<td>No (But only will work with `interactivity` specified)</td>
</tr>
<tr>
-<td>featureMouseOut</td>
+<td>featureOut</td>
<td>A callback when hovers out a feature</td>
<td>Function</td>
<td></td>
<td>No (But only will work with `interactivity` specified)</td>
</tr>
<tr>
-<td>featureMouseClick</td>
+<td>featureClick</td>
<td>A callback when clicks in a feature</td>
<td>Function</td>
<td>
<b>event:</b> Mouse event object<br/>
<b>latlng:</b> The LatLng leaflet object where was clicked<br/>
+ <b>pos:</b> Object with x and y position in the DOM map element<br/>
<b>data:</b> The CartoDB data of the clicked feature with the `interactivity` param.
</td>
<td>No (But only will work with `interactivity` specified)</td>
@@ -200,21 +179,26 @@ If you want to get a feature clicked || hover data (via the `interactivity` para
If you don't want to write the name of the table several times, you can use {{table_name}} in the `query` or `tile_style` parameters.
We strongly recommend the use of the files available in this repository. These are tested, and if you decide use updated ones, the library could not work.
-# Example
+
+# Creating an example
+
Here's a [live example](http://vizzuality.github.com/cartodb-leaflet/custompopup.html)!
+
First of all add the necessary script and css files:
```html
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
<link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
-<script type="text/javascript" src="js/wax.leaf.min-6.0.0-beta2.js"></script>
+<script type="text/javascript" src="js/wax.leaf.min-6.0.5-touched.js"></script>
<script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="dist/cartodb-popup.js"></script>
```
+* We strongly recommend to use the library files we have in this repository, they are fully tested.
+
When the document is loaded, start creating the map:
@@ -226,7 +210,7 @@ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D7597
map.addLayer(cloudmade);
```
-When the document is loaded, start creating the map:
+After that, create the CartoDB layer:
```javascript
var cartodb_leaflet = new L.CartoDBLayer({
@@ -236,7 +220,7 @@ var cartodb_leaflet = new L.CartoDBLayer({
query: "SELECT * FROM {{table_name}}",
tile_style: "#{{table_name}}{marker-fill:red}",
interactivity: "cartodb_id, magnitude",
- featureMouseClick: function(ev, latlng, data) {alert(data)}
+ featureClick: function(ev, latlng, pos, data) {alert(data)}
auto_bound: true
});
```
@@ -270,4 +254,6 @@ New funcionalities are coming, in the meantime you can use:
Example: ```cartodb_leaflet.isVisible();```
- **setInteractivity**: Change the columns you want to get data (it needs to reload the tiles)
Example: ```cartodb_leaflet.setInteractivity("cartodb_id, the_geom, magnitude");```
+- **setBounds**: Set bounds in the map using a new query or the default one
+ Example: ```cartodb_leaflet.setBounds(); || cartodb_leaflet.setBounds("SELECT * FROM {{table_name}} WHERE cartodb_id < 100");```
- **setLayerOrder**: _Not available yet_ -> Waiting for this ticket fixed: https://github.com/CloudMade/Leaflet/issues/505
View
@@ -5,30 +5,25 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using CartoDB with Leaflet and custom infowindow</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
- <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {margin:100px 0 0 0; height:50%;} .leaflet-container {background:#A7BDDE!important;}</style>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
<link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="js/wax.leaf.min-6.0.0-beta2.js"></script>
+ <script type="text/javascript" src="js/wax.leaf.min-6.0.5-touched.js"></script>
<script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="dist/cartodb-popup-min.js"></script>
<script type="text/javascript">
function initialize() {
+ // Create map
var map = new L.Map('map').setView(new L.LatLng(20,0), 3);
- var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
- cloudmadeAttrib = 'Map data &copy; 2012 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
- cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
- map.addLayer(cloudmade,true);
-
-
// Create a CartoDB popup
var popup = new L.CartoDBPopup();
-
// First cartodb layer, countries
var cartodb_leaflet1 = new L.CartoDBLayer({
map: map,
@@ -47,17 +42,16 @@
map: map,
user_name:"examples",
table_name: 'earthquakes',
- query: "SELECT cartodb_id,the_geom_webmercator,magnitude FROM {{table_name}}",
+ query: "SELECT cartodb_id,the_geom_webmercator,the_geom,magnitude FROM {{table_name}}",
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
- opacity: 0.8,
interactivity: "cartodb_id, magnitude",
- featureMouseOver: function(ev,latlng,data) {
+ featureOver: function(ev,latlng,pos,data) {
document.body.style.cursor = "pointer";
},
- featureMouseOut: function() {
+ featureOut: function() {
document.body.style.cursor = "default";
},
- featureMouseClick: function(ev,latlng,data) {
+ featureClick: function(ev,latlng,pos,data) {
// Set popup content
popup.setContent(data);
Oops, something went wrong.

0 comments on commit 38a8733

Please sign in to comment.