cartodb4/cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cdb

Browse Source
This commit is contained in:
zhongjin
2020-06-15 12:07:54 +08:00
parent 610ed21a90
commit a96ef233c9
444 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/assets/javascripts/cdb/.gitignore
+19
View File
@@ -0,0 +1,19 @@
.DS_store
*.swp
node_modules
themes/css/all.css
themes/css/cartodb.ie.css
secrets.json
v3/*
dist
test/*.xml
.sass-cache
bower_components
.tmp
Gemfile.lock
.grunt
test/SpecRunner.html
.rvmrc
.idea/
themes/css/cartodb.css
cartodb.js-bower/
lib/assets/javascripts/cdb/.travis.yml
+20
View File
@@ -0,0 +1,20 @@
sudo: false
cache: false
language: node_js
node_js:
- "4.1"
install:
- npm install
before_script:
- cp secrets.example.json secrets.json
- npm install -g grunt-cli
script:
- grunt test
notifications:
email:
on_success: never
on_failure: change
lib/assets/javascripts/cdb/CONTRIBUTING.md
+93
View File
@@ -0,0 +1,93 @@
## How to contribute to CartoDB.js
1. [CartoDB.js quick start](#cartodbjs-framework-quick-start)
2. [Being part of CartoDB.js](#being-part-of-cartodbjs)
3. [Filling a ticket](#filling-a-ticket)
4. [Contributing code](#contributing-code)
5. [Completing documentation](#completing-documentation)
6. [Submitting contributions](#submitting-contributions)
### CartoDB.js quick start
This is a little doc with the basis of CartoDB.js framework (TM), in other words, all you need to know to start workig with it wihout doing it wrong.
#### general info
- The framework(TM) is built on top of Backbone.js (so you can use jQuery and underscore everywhere).
- we use jasmine for testing (```grunt test```)
- cdb is the namespace, so all the components should be inside it, i.e cbd.geo.Map. (look into cartodb.js)
- code style guide: https://github.com/cartodb/cartodb/wiki/Javascript-style-guide
#### folders
- cartodb.js: this file contains the scopes for all the app, should be included first
- core
- geo
- lib
- test
- examples
#### core
This contains all the base classes, used in all the project:
- config: all the app config goes here. Accesible by cdb.config
- logging: never ever use console.log, use cbd.log.info, cdb.log.error and cdb.debug. error call will generate an error You can check errors with cbd.errors singleton (it is a backbone.Collection)
- view: DO NOT USE Backbone.View, use cbd.core.View instead. It tracks zombie views and make removing views safe.
- templates
#### general guidelines for views
- never ever change a view directly. For example a button that changes the state should change the model and the view should change when the models triggers the change event.
- call clean when your view will not be used anymore
- link model events in this way, even if you have binded the method. Notice the 3rd parameter (this)
·this.model.bind('change', this.callback, this);
- when you have to unlink the view from the model you can do:
· this.model.unbind(null, null, this);
- if your view has model and listen events from it, add to realted models (will be free when you call clean):
// inside the view
this.add_related_model(this.whatevermodel);
## Being part of CartoDB.js
If you are reading this file you are already part of CartoDB :). But you can always help the community [contributing in the code](#Contributing-code) or answering questions in any of the channels you can find us, [our google group](https://groups.google.com/forum/#!forum/cartodb) and [stack exchange](http://gis.stackexchange.com/questions/tagged/cartodb).
## Filling a ticket
If you want to open a new issue in our repository, please follow these instructions:
1. Descriptive title.
2. Write a good description, it always helps.
3. Include your browser, OS and CartoDB.js version (it shows up in the browser console).
4. Specify the steps to reproduce the problem.
5. Try to add an example showing the problem (using [JSFiddle](http://jsfiddle.net), [JSBin](http://jsbin.com),...).
## Contributing code
Best part of open source, collaborate in CartoDB.js code!. We like hearing from you, so if you have any bug fixed, or a new feature ready to be merged, those are the steps you should follow:
1. Fork the CartoDB.js repository.
2. Create a new branch in your forked repository.
3. Commit your changes. Add new tests if it is necessary (```grunt test```), remember to follow ["How to build"](https://github.com/CartoDB/cartodb.js/blob/master/README.md#how-to-build) steps.
4. Open a pull request.
5. Any of the CartoDB.js mantainers will take a look.
6. If everything works, it will merged and released \o/.
If you want more detailed information, this [GitHub guide](https://guides.github.com/activities/contributing-to-open-source/) is a must.
## Completing documentation
CartoDB.js documentation is located in ```doc/API.md```. That file is the content that appears in [CartoDB platform documentation](http://docs.cartodb.com/cartodb-platform/cartodb-js.html).
Just follow the instructions described in [contributing code](#contributing-code) and after accepting your pull request, we will make it appear online :).
## Submitting contributions
You will need to sign a Contributor License Agreement (CLA) before making a submission. [Learn more here](https://carto.com/contributions).
lib/assets/javascripts/cdb/Gemfile
+3
View File
@@ -0,0 +1,3 @@
source "http://rubygems.org"
gem 'compass', '~> 1.0.3'
lib/assets/javascripts/cdb/Gruntfile.js
+215
View File
@@ -0,0 +1,215 @@
/**
* Grunfile runner file for CartoDB.js
* framework
*
*/
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
var semver = require('semver');
var pkg = grunt.file.readJSON('package.json');
if (!pkg.version || !semver.valid(pkg.version)) {
grunt.fail.fatal('package.json version is not valid' , 1);
}
var version = pkg.version.split('.');
var VERSION_OBJ = {
major: version[0],
minor: version[0] + '.' + version[1],
bugfixing: pkg.version
}
var config = {
dist: 'dist',
app: 'www',
version: {
major: version[0],
minor: version[0] + '.' + version[1],
bugfixing: pkg.version
},
pkg: pkg
};
grunt.initConfig({
secrets: {},
config: config,
dist: 'dist',
app: 'www',
version: {
major: version[0],
minor: version[0] + '.' + version[1],
bugfixing: pkg.version
},
pkg: pkg,
gitinfo: {},
s3: require('./grunt/tasks/s3').task(grunt, config),
prompt: require('./grunt/tasks/prompt').task(grunt, config),
replace: require('./grunt/tasks/replace').task(grunt, config),
fastly: require('./grunt/tasks/fastly').task(grunt, config),
watch: require('./grunt/tasks/watch').task(),
connect: require('./grunt/tasks/connect').task(config),
clean: require('./grunt/tasks/clean').task(),
compass: require('./grunt/tasks/compass').task(),
autoprefixer: require('./grunt/tasks/autoprefixer').task(),
useminPrepare: require('./grunt/tasks/useminPrepare').task(),
usemin: require('./grunt/tasks/usemin').task(),
htmlmin: require('./grunt/tasks/htmlmin').task(),
concat: require('./grunt/tasks/concat').task(grunt, config),
uglify: require('./grunt/tasks/uglify').task(),
cssmin: require('./grunt/tasks/cssmin').task(),
imagemin: require('./grunt/tasks/imagemin').task(),
svgmin: require('./grunt/tasks/svgmin').task(),
copy: require('./grunt/tasks/copy').task(grunt, config),
filerev: require('./grunt/tasks/filerev').task(),
buildcontrol: require('./grunt/tasks/buildcontrol').task(),
jshint: require('./grunt/tasks/jshint').task(),
csslint: require('./grunt/tasks/csslint').task(),
concurrent: require('./grunt/tasks/concurrent').task(),
jasmine: require('./grunt/tasks/jasmine').task()
});
/* TASKS */
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'concurrent:server',
'autoprefixer:server',
'copy:stageStatic',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('check', [
'clean:server',
'compass:server',
'jshint:all',
'csslint:check'
]);
grunt.registerTask('test', [ 'jasmine' ]);
grunt.registerTask('release', [
'prompt:bump',
'build'
]);
grunt.registerTask('publish', function (target) {
if (!grunt.file.exists('secrets.json')) {
grunt.fail.fatal('secrets.json file does not exist, copy secrets.example.json and rename it' , 1);
}
// Read secrets
grunt.config.set('secrets', grunt.file.readJSON('secrets.json'));
if (
!grunt.config('secrets') ||
!grunt.config('secrets').S3_KEY ||
!grunt.config('secrets').S3_SECRET ||
!grunt.config('secrets').S3_BUCKET
) {
grunt.fail.fatal('S3 keys not specified in secrets.json' , 1);
}
grunt.task.run([
'jasmine', // Don't comment this line unless you have a GOOD REASON
's3'
]);
});
grunt.registerTask('set_current_version', function() {
var version = pkg.version;
var minor = version.split('.');
minor.pop()
minor = minor.join('.');
var options = {
version: version,
minor: minor,
increment: 'build',
bugfixing: version
};
// Check if version was set via prompt, and
// use that version and not the package version
var bump = grunt.config.get('bump');
if (bump) {
options = bump;
options.bugfixing = bump.version;
}
grunt.config.set('bump', options);
});
grunt.registerTask('invalidate', function(){
if (!grunt.file.exists('secrets.json')) {
grunt.fail.fatal('secrets.json file does not exist, copy secrets.example.json and rename it' , 1);
}
// Read secrets
grunt.config.set('secrets', grunt.file.readJSON('secrets.json'));
if (!grunt.config('secrets') ||
!grunt.config('secrets').FASTLY_API_KEY ||
!grunt.config('secrets').FASTLY_CARTODB_SERVICE
) {
grunt.fail.fatal('Fastly keys not specified in secrets.json' , 1);
}
grunt.task.run([
'fastly'
]);
});
grunt.registerTask('pages', [ 'buildcontrol:pages' ]);
grunt.registerTask('build', [
'dist_js',
'useminPrepare',
'cssmin',
'imagemin',
'svgmin',
'filerev',
'usemin',
'htmlmin',
'uglify'
]);
grunt.registerTask('dist_js', [
'set_current_version',
'js'
])
grunt.registerTask('js', [
'replace',
'gitinfo',
'clean:dist',
'concurrent:dist',
'concat',
'autoprefixer:dist'
]);
grunt.registerTask('dist', [
'set_current_version',
'build'
]);
grunt.registerTask('default', [
'dist'
]);
}
lib/assets/javascripts/cdb/LICENSE
+27
View File
@@ -0,0 +1,27 @@
Copyright (c) 2014, Vizzuality
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
3. Neither the name of the copyright holder nor the names of its contributors
may be used to endorse or promote products derived from this software without
specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
lib/assets/javascripts/cdb/Makefile
+91
View File
@@ -0,0 +1,91 @@
# Old makefile
UGLIFYJS = ./node_modules/.bin/uglifyjs
CSS_FILES = $(wildcard themes/css/infowindow/*.css themes/css/map/*.css themes/css/tooltip/*.css)
CSS_FILES_IE = $(wildcard themes/css/ie/*.css)
TORQUE_FILES = vendor/mod/carto.js vendor/mod/torque.uncompressed.js src/geo/gmaps/torque.js src/geo/leaflet/torque.js src/geo/ui/time_slider.js vendor/mod/jquery-ui/jquery.ui.core.js vendor/mod/jquery-ui/jquery.ui.widget.js vendor/mod/jquery-ui/jquery.ui.mouse.js vendor/mod/jquery-ui/jquery.ui.slider.js scripts/mod.torque.footer.js
#dist: dist/cartodb.js dist/cartodb.full.js themes
dist: dist/cartodb.js dist/cartodb.css dist/cartodb.ie.css dist/cartodb.nojquery.js dist/cartodb.core.js dist/cartodb.mod.torque.js dist/cartodb.noleaflet.js
dist_folder:
mkdir -p dist
dist/cartodb.uncompressed.js: dist_folder
node scripts/compress.js
mv dist/_cartodb.js dist/cartodb.uncompressed.js
dist/cartodb.full.uncompressed.js: dist_folder
node scripts/compress.js
dist/cartodb.js: dist/cartodb.uncompressed.js
$(UGLIFYJS) dist/cartodb.uncompressed.js > dist/cartodb.js
dist/cartodb.core.js: vendor/mustache.js vendor/underscore-min.js vendor/mustache.js vendor/reqwest.min.js src/cartodb.js src/api/core_lib.js src/core/profiler.js src/api/sql.js src/api/tiles.js src/geo/layer_definition.js
node scripts/get.js header > dist/cartodb.core.uncompressed.js
cat scripts/core_header.js >> dist/cartodb.core.uncompressed.js
cat vendor/underscore-min.js >> dist/cartodb.core.uncompressed.js
echo "\nvar _ = this._; _.noConflict();" >> dist/cartodb.core.uncompressed.js
cat vendor/mustache.js vendor/reqwest.min.js src/cartodb.js src/api/core_lib.js src/core/profiler.js src/api/sql.js src/geo/layer_definition.js src/api/tiles.js >> dist/cartodb.core.uncompressed.js
cat scripts/core_footer.js >> dist/cartodb.core.uncompressed.js
$(UGLIFYJS) dist/cartodb.core.uncompressed.js > dist/cartodb.core.js
dist/cartodb.mod.torque.uncompressed.js: dist_folder $(TORQUE_FILES)
cat $(TORQUE_FILES) > dist/cartodb.mod.torque.uncompressed.js
dist/cartodb.mod.torque.js: dist/cartodb.mod.torque.uncompressed.js
$(UGLIFYJS) dist/cartodb.mod.torque.uncompressed.js > dist/cartodb.mod.torque.js
dist/cartodb.nojquery.js: dist/cartodb.uncompressed.js
$(UGLIFYJS) dist/_cartodb_nojquery.js > dist/cartodb.nojquery.js
rm dist/_cartodb_nojquery.js
dist/cartodb.noleaflet.js: dist/_cartodb_noleaflet.js
$(UGLIFYJS) dist/_cartodb_noleaflet.js > dist/cartodb.noleaflet.js
rm dist/_cartodb_noleaflet.js
dist/cartodb.mod.odyssey.uncompressed.js:
grunt dist_js
dist/cartodb.css: css
cp themes/css/cartodb.css dist
dist/cartodb.ie.css: css
cp themes/css/cartodb.ie.css dist
clean:
rm -rf dist/*
css: $(CSS_FILES) $(CSS_FILES_IE)
rm -rf themes/css/cartodb.css themes/css/cartodb.ie.css
cat $(CSS_FILES) > themes/css/cartodb.css
cat $(CSS_FILES_IE) > themes/css/cartodb.ie.css
release: dist css
node scripts/release.js
publish: release
#./scripts/publish.sh
node scripts/publish.js
publish_npm: release
npm publish
invalidate:
#./scripts/publish.sh
node scripts/publish.js --invalidate
publish_develop: release
#./scripts/publish.sh
node scripts/publish.js --current_version
cartodb: dist/cartodb.mod.torque.uncompressed.js dist/cartodb.mod.odyssey.uncompressed.js dist/cartodb.full.uncompressed.js
PHONY: clean themes dist
lib/assets/javascripts/cdb/NEWS.md
+863
View File
@@ -0,0 +1,863 @@
=======
3.15.20 (15/01/2019)
------
* Use geocoder permanent URL as default Mapbox URL.
=======
3.15.19 (02/01/2019)
------
* Use TomTom as default geocoder.
3.15.15
-------
* Fix wax to get along with new Google Maps renderer released on v3.32
3.15.14
-------
* Update all Google Maps script references to v3.3.0
3.15.13 (30/01/2018)
-------
* Replace Mapzen geocoding search to Mapbox
3.15.12 (12/06/2017)
-------
* New Mapzen API key.
* Added auth_tokens as an option for StaticImage instead of searching for them in vizjson (deprecated). See [#13089](https://github.com/CartoDB/cartodb/issues/13089).
3.15.11 (21/02/2017)
-------
* Update torque.js dependency.
3.15.10 (11/07/2016)
-------
* Replaced references to cartodb.com by carto.com
* Replaced CartoDB by CARTO
3.15.9 (01/02/2016)
------
* When scrollwheel and zoom are disabled, map panning is disabled unless device is mobile.
3.15.8 (01/10/2015)
------
* Fixed btoa methods in cdb.core.util [#692](https://github.com/CartoDB/cartodb.js/issues/692)
3.15.7 (23/09/2015)
------
* Undefined `define` so that dependencies aren't loaded via AMD [#543](https://github.com/CartoDB/cartodb.js/issues/543)
3.15.6 (17/09/2015)
------
* Fixed a couple of bugs related with Leaflet attributions [#681](https://github.com/CartoDB/cartodb.js/issues/681)
3.15.5 (15/09/2015)
------
* Fixed infowindows in maps with fixed position [#639](https://github.com/CartoDB/cartodb.js/issues/639)
* Automatically select "torque" layers when no index is specified in cartodb.createLayer [#678](https://github.com/CartoDB/cartodb.js/issues/678)
3.15.4 (11/09/2015)
------
* Add checker to fullscreen button when it is rendered in an iframe [#674](https://github.com/CartoDB/cartodb.js/pull/674)
3.15.3 (08/09/2015)
------
* Display custom attribution of layers (#5216).
* Updated grunt-contrib-imagemin package version.
3.15.2 (01/09/2015)
------
* Take `visible` attribute into account when determining visibility of layers and serializing maps (#546)
* Only show legends if the layer is visible (#651)
* Extracted pecan code to separate module, https://github.com/CartoDB/pecan/ (#649,#654)
* Search control will show the result of the search with a pin and infowindow (cartodb/#4914).
3.15.0 (24/06/2015)
------
* cartodb.js knows how to work with multiple types of sublayers (#508):
* cartodb.createLayer accepts a `filter` option to specify wich types of layers must
be rendered in the tiles. WARNING: all non-torque layers will be rendered by default.
* cartodb.js uses metadata from Windshaft to determine what layers are present in the
map and specify the layer indexes in the tile URLs. More about this
[here](https://github.com/CartoDB/Windshaft-cartodb/blob/488c2462229474db21ba40b61a93edf83e6493b5/docs/Map-API.md#blending-and-layer-selection)
* New subclasses of SubLayer for different types of sublayers.
* Handle hidden layers properly when fetching attributes from tiler
* Make the torque slider have the correct range every time it changes
* Remove check for http-beginng vizjson addresses
* Use local time in timeslider instead of UTC
* New sublayer.isVisible() function
* `cartodb.createLayer` selects the first data layer instead of assuming that it's in position 1
3.14.6 (16/06/2015)
------
* Use the right indexes when fetching grids and attributes (#518)
3.14.4 (10/06/2015)
------
* Do not enable layer interaction if tooltip is empty (#513)
* Replaces minified carto.js with uncompressed version (#516)
3.14.3 (29/05/2015)
------
* Hide <img> tag of infowindow covers when the url is invalid.
* Expose legend model in sublayers/layers so that users can customize legends (#480).
* Handle tooltip overflow (#482).
* Only show tooltips when they have fields (#486).
* Updated Torque to 2.11.3
* Fix scrolling of infowindows with images (#490).
* Fix dropdown bind events not being unbound on clean (#493)
3.14.2 (06/05/2015)
------
* Allow to specify a template for the items of a custom legend.
* The NOKIA geocoder doesn't encode the whitespaces anymore.
* Adds documentation for the Static Map API
3.14.1 (30/04/2015)
------
* Fixes a bug that prevented setting the maxZoom and minZoom of a map.
* Updates Torque to 2.11.2
3.14.0 (23/04/2015)
------
* Infowindow in anonymous maps are requested by attributes endpoint in maps api so SQL API is not used anymore
* Changed the way remote host is set for maps and sql API.
* Fixed error management when map instanciation fails
* Instead of showing a single date, Torque's timeslider shows the date range that a single step comprises.
* Fixed enabling or disabling the torque loop property not working from cartodb.js
* Allows to specify a step when generating a static map of a Torque layer
* Deprecation warning:
- tiler_host, tiler_prototol, tiler_port, sql_api_domain, sql_api_protocol are deprecated, use sql_api_template and maps_api_template instead. https://github.com/CartoDB/cartodb.js/blob/v3/doc/API.md#how-to-set-a-different-host-than-cartodbcom
3.13.3 (09/04/2015)
------
* Fixes default styles for header titles in infowindows.
3.13.2 (07/04/2015)
------
* Fix double escaping on infowindows
* Fix a-tag's target attribute not working
3.13.1 (06/04/2015)
------
* Allows to request a Static Map of a password protected visualization
3.13.0 (31/03/2015)
------
* Breaking Changes
- Sanitize output by default (#2972), see doc change and example below how to override:
- docs: https://github.com/CartoDB/cartodb.js/blob/v3.13.0/doc/API.md#arguments-11
- example: https://github.com/CartoDB/cartodb.js/blob/v3.13.0/examples/infowindow_with_graph.html
3.12.14 (30/03/2015)
------
* Fixes fullscreen button is throwing errors (#412)
* Updates Torque.js to 2.11
3.12.13 (18/03/2015)
------
* Changes how infowindows handle null values (#406)
* Updates the version of wax and upgrades mustache.js to v1.1.0 (403)
* Fixes a bug with fullscreen in Safari (#361)
3.12.12 (12/03/2015)
------
* Fixes a bug that prevented generating previews of torque layers with named maps
3.12.11 (04/03/2015)
------
* LayerDefinition now trusts the tiler and uses whatever CDN configuration it gets (or nothing, if cdn_url is empty).
* Fixes bootstrap collisions (#87, #107)
3.12.10 (02/03/2015)
------
* Don't send the urlTemplate to generate a Static Map if we don't have it.
* Disables the CDN if the server doesn't send us the configuration.
3.12.9 (26/02/2015)
------
* Updates Static Map module to use the CDN URL from the layergroup.
3.12.8 (26/02/2015)
------
* Allows to override the default use of the bounding box to generate an image, using the center instead.
* Fixes the static map module to avoid using hidden layers to generate images.
* Extracts the CDN host configuration from the vizjson.
* Removes cdbui bower dependency.
3.12.7 (23/02/2015)
------
* By default we now serve the Static API images through CartoDB's CDN.
3.12.6 (23/02/2015)
------
* Fixes mobile and IE interaction issues (#346, #313, #223, #139).
3.12.5 (20//02/2015)
------
* Fixes request to generate an image when the vizjson contains a named map and a torque layer with a named map
3.12.4 (18//02/2015)
------
* Fixes leaflet point generation on events when using touch devices
3.12.3 (17//02/2015)
------
* Fixes a case were having an empty bbox would end up generatign an erroneous bounding box URL.
3.12.2 (17//02/2015)
------
* Fixes error generating a map preview of a visualization with a torque layer.
* Fixed use of https parameter in torque layer
* Fixed change of play/pause state in timeslider
* Fixed legend values named 0 being evaluated as NULL
3.12.1 (13//02/2015)
------
* Allows to force the https protocol when requesting a vizjson to generate a static image
3.12.0 (09//02/2015)
------
* Added Odyssey support for visualizations
* Adds new API to generate static images (https://github.com/CartoDB/cartodb.js/wiki/CartoDB-Map-API)
* Fixes the hiding of the tile loader in mobile
* Adds heatmap support for torque
3.11.36 (09/02/2014)
------
* Fixes slider style problem in narrower devices.
3.11.35 (06/02/2014)
------
* re-fixes google maps mobile events
3.11.34 (06/02/2014)
------
* Fixes google maps mobile events
3.11.33 (05/02/2014)
------
* Fixes tooltip style.
3.11.32 (29/01/2015)
------
* Fixed touch events on mobile (Android)
3.11.31 (23/01/2015)
------
- #291 - Removes padding and margin reset for webkit browsers
3.11.30 (13/01/2015)
------
- #264 - Fix addTo (when the second param specifies index)
3.11.29 (30/12/2014)
------
- #257 - Fixes rendering of several bold typefaces
3.11.28 (19/12/2014)
------
- #256 - Fixes loader position
- #255 - Adds new fonts for the overlays
3.11.27 (19/12/2014)
------
* #245 - Fixed a bug with error messages named map instantiation
* #224 - Public method close infowindow
3.11.26 (17/12/2014)
------
* #235 - Allows to use the input fields in fullscreen on Chrome
* #243 - Adds a target="_top" in the overlay links so they work inside iframes
* udpated torque with bugfixes for firefox
3.11.25 (26/11/2014)
------
* #211 - Viz made with Torque between 2 different dates shows date + time
* #223 - fixed problem with IE11 touch devices.
- #205 - fixed problem with invalid lat lng object in touch devices.
3.11.24 (11/11/2014)
------
* don't render the fullscreen overlay for unsupported versions of IE
* fixed using same callback name when there are more than one layer (#186)
* added new params options to cartodb.createVis(): gmaps_base_type and gmaps_style
* deprecate GMaps support, substitute GMaps basemaps with equivalent ones for Leaflet instead (#188)
* fixes default height for itensity list elements in mobile
3.11.23 (04/11/2014)
------
* fixes rendering issue with category legends that contain long names
* adds .toggle() method to layers and sublayers to change their visibility
3.11.22 (03/11/2014)
------
* fixes a bug that made the hidden Torque layers visible
3.11.21 (24/10/2014)
------
* enabled dynamic_cdn to route layergroup calls through the CDN
3.11.20 (24/10/2014)
------
* enabled fixed callback for layergroups and infowindows
3.11.19 (23/10/2014)
------
* fixes annotation specs
* adds several methods to set the annotation properties.
3.11.18 (22/10/2014)
------
* adds annotation overlays
3.11.17 (20/10/2014)
------
* fixes positioning of the search and share overlays on the screen
* fixed compatibility with mootools
* fixes a problem with touch devices using two fingers for zooming.
3.11.16 (10/10/2014)
------
* applies the z-index to the text and image overlays
3.11.15 (07/10/2014)
------
* fixes a display issue with overlays in desktop.
* fixed compatibility with mootools
3.11.14 (06/10/2014)
------
* adds stats_tag for all request in the url
* mobile layout fixes:
- small CSS fixes
- fixes issues activating legends, layer_selectors and search
- setting the force_mobile to false disables the mobile layout
- adds specs
3.11.13 (29/09/2014)
------
* fixes the scope of the backdrop element in the CSS file
3.11.12 (29/09/2014)
------
* fixes a bug that prevented showing the torque slider
3.11.11 (29/09/2014)
------
* fixes a bug that prevented dragging google maps with the mobile layout activated
3.11.10 (29/09/2014)
------
* fixes a bug that prevented showing the legend using the createLayer method
3.11.09 (29/09/2014)
------
* adds mobile layout
3.11.08 (21/09/2014)
------
* updated torque module with speed optimizations
3.11.07 (15//09/2014)
------
* Fixed problem breaking words in infowindow content.
3.11.06 (12//09/2014)
------
* Fixed problem in infowindow showing horizontal scrollbar when it was not needed
* Fixed creating search overlay
3.11.05 (20//08/2014)
------
* Added support for query_wrapper in torque layers
3.11.04 (12//08/2014)
------
* Fixes ugly word break in text overlays.
* Updates leaflet to 0.7.3
3.11.03 (08//08/2014)
------
* Fixes rendering issues with webfonts.
3.11.02 (07//08/2014)
------
* No longer sets the width to the text overlays.
3.11.01 (07//08/2014)
------
* Improves text and image overlay positioning.
3.11.0 (06//08/2014)
------
* If available visualization uses layer visibility settings from CartoDB viz.json.
* Map header styles changed.
* Support for new kind of overlays (text and image).
3.10.2 (11//07/2014)
------
* Added instanciateCallback to allow to cache instanciation responses
* fixed rendering order in cdb.vis.addInfowindow (#126)
* torque tiles use cdn_url from windshaft
3.10.1 (09/06/2014)
------
* Updated torque library
* Fixed showing "no data" on empty tooltips (#122)
3.10.0 (04/06/2014)
------
* Fixed problem for already customized infowindows setting width property.
3.9.08 (03/06/2014)
------
* New "liquid" infowindow style implemented.
3.9.07 (03/06/2014)
------
* Fixed exception on hover for layers without tooltip
* Improved tooltip interaction
* Changed cartocss library to support marker-type "rectangle"
* Fixed setParam when there are no default params (#120)
3.9.06 (25/05/2014)
------
* Allowfullscreen parameter added to iframe code
in share dialog.
* Fixes link style in embed header
* Enables custom legends in Torque.
3.9.05 (19/05/2014)
------
* Fixed tileJSON method in cdb.Tiles
* Adds support for Markdown in descriptions
3.9.04 (14/05/2014)
------
* Added position parameter in Tooltip overlay
3.9.03 (14/05/2014)
------
* Added tooltip option in createLayer method
3.9.02 (14/05/2014)
------
* Fixes torque width for small screens
3.9.01 (14/05/2014)
------
* Fixed regression for mouseover event in layers
3.9.00 (13/05/2014)
------
* indents HTML of legends
* fixed getSubLayer in core library
* added tooltip loading from viz.json
3.8.11 (28//04/2014)
------
* adds new link to the visualization in the share dialog.
3.8.10 (21//04/2014)
------
* fixed problem parsing map viz options when values are not valid
* fixed interaction in IE8
* getCartoCSS and getSQL raise an exception for named maps
* fixed core library
* added url translation for https for cartodb basemaps
3.8.09 (04//04/2014)
------
* fixed map instanciation when named map has no layer information
3.8.08 (03//04/2014)
------
* fixed layer visibility
3.8.07 (03//04/2014)
------
* fixed attribution position for gmaps
* fixed maps api request when all the layers are hidden
* fixed error in gmaps when tile loading raises an error
* fixed panBy on leaflet when torque layers are used
3.8.06 (27/03/2014)
------
* fixed layer interaction is not disabled when sublayer is hidden
3.8.05 (25//03/2014)
------
* update torque library
* fixed interaction with naned maps when there is a hidden layer
* added multiple metrics
3.8.04 (20/03/2014)
------
* prevent the scrolling of the map when the user scrolls the infowindow content.
* enables the scrollwheel when the user enters in the fullscreen model.
* fixes the embed_map url in the share dialog.
* raised leaflet maxZoom from 18 to 30
* fixed setting interactivity in private layers should raise an exception (#108)
* added metrics for tile and layergroup loading time
3.8.03 (15/03/2014)
------
* fixed addCursorInteraction
* fixed fieldCount when there are no fields in infowindow
3.8.02 (14/03/2014)
------
* use cdn_url from tiler requests
* use https to fetch infowindow data when https is used
* changes default target for the fullscreen option in embeds
3.8.01 (13//03/2014)
------
* fixed nokia https to http url rewrite
3.8.00 (11/03/2014)
------
* Added mouseover and mouseout for layers
* Fixed error in old IE browsers for torque visualizations.
* Changed CartoDB attribution style under google maps.
3.7.07 (10/03/2014)
------
* Fixes infowindow placement in fullscreen mode.
3.7.06 (07/03/2014)
------
* alternate_names in infowindow was not being honored
3.7.05 (06/03/2014)
------
* Added setParams method to layer to support named maps (#106)
* fixed problems with infowindow when there are hidden layers
3.7.04 (27/02/2014)
------
* fixed layer update in gmaps
* when jsonp is used errors are not reported to the layer
* updated torque, fix problem with some cartocss options (step)
3.7.03 (25/02/2014)
------
* Fixed https in torque tiles
3.7.02 (25/02/2014)
------
* Fixed auth_token fetching infowindow attributes
* updated torque library
3.7.01 (25/02/2014)
------
* Fixed auth_token in torque layers
* Fixed time slider in torque layers
* Fixed auth_token fetching attributes
3.7.00 (24//02/2014)
------
* Added support for named maps
* Added cartodb.noleaflet.js to build (#105)
3.6.02 (18/02/2014)
------
* Adds profiling support for plugable backends
3.6.01 (13/02/2014)
------
* Fixes a call to window.addEventListener in IE8.
* Adds fullscreen detection.
3.6.00 (31/01/2014)
------
* Using Leaflet 0.7.2
* Adjusts the map header after the device is rotated
* Fixes map header when there's no title & description
3.5.07 (28/01/2014)
------
* fixed fetching twice updated_at in torque layers
3.5.06 (23/01/2014)
------
* Fixed IE7
3.5.05 (14/01/2014)
------
* Removed animation while dragging a marker under GMaps.
* Added retina icons
* Enable interactivity when tooltip is added fixed #92 #64
* Fixed torque styles when zoom was used in cartocss
3.5.04 (20/12/2013)
------
* Added attribution for torque layers.
3.5.03 (18//12/2013)
------
* updates twitter share message for mobile devices
3.5.02 (17//12/2013)
------
* improves twitter share message
3.5.01 (17//12/2013)
------
* fixes a bug that prevented using the scrolling wheel to zoom in and out
3.5.00 (16//12/2013)
------
* improves legends and torque player UI in mobile displays.
* allows passing extra params in the calls to the SQL API.
* changed profiler API.
3.4.03 (11//12/2013)
------
* fixes a bug that prevented showing a legend with custom HTML
3.4.02 (10//12/2013)
------
* adds new API for legends (documentation coming soon)
* fixes a bug that incorrectly rendered an empty legend
* fixes a bug that prevented showing the layer alias in torque layers
* adds a new time_slider example
3.4.01 (26//11/2013)
------
* fixed parsing keyword arguments in cartocss for torque
3.4.00 (26//11/2013)
------
* release of Torque Cumulative.
* enables max and min zoom for Google Maps.
* fixed URL of one asset in the examples directory.
3.3.05 (20//11/2013)
------
* fixed torque problems with cached sql requests #81
3.3.04 (15//11/2013)
------
* sets maxZoom of GMaps layers to a high value to use the one defined by Google
* update GMaps layers specs
3.3.03 (15//11/2013)
------
* fixes a bug that prevented the triggering of callbacks after setting properties to cdb.geo.GMapsBaseLayer.
3.3.02 (14//11/2013)
------
* we don't set maxZoom in GMaps layers anymore.
* adds support for WMS layers.
3.3.01 (14//11/2013)
------
* added CartoDB logo in torque layers
3.3.00 (11//11/2013)
------
* torque support
3.2.06 (04//11/2013)
------
* adjusts the max and min zoom for each layer
3.2.05 (04//11/2013)
------
* correctly shows false values in the category legend.
* prepares the legends to support images
3.2.04 (15//10/2013)
------
* enable image basemaps
3.2.03 (14//10/2013)
------
* changed CDN urls
3.2.02 (10//10/2013)
------
* fixed click propagation in legends.
3.2.01 (10//09/2013)
------
* fixed bug that prevented the use of google charts urls in the infowindow covers.
* fixed geocoder specs
3.2.00 (09//30/2013)
------
* ported to leaflet 0.6 #55
3.1.14 (09//24/2013)
------
* fixed problem with IE9 when the map has only one layer
3.1.13 (09//18/2013)
------
* new custom infowindow html available for visualization.
* problems editing polygon and linestring geojson.
3.1.12 (09//11/2013)
------
* fixed problem when an embed GMaps/Leaflet map is hidden (#70)
3.1.11 (09//10/2013)
------
* fixed problem when an embed GMaps map is hidden (#70)
3.1.10 (09//10/2013)
------
* fixed problem with infowindow option in createVis (#69)
3.1.09 (09//06/2013)
------
* fixed problem when the number of layers is different than the number of legends (refix)
3.1.08 (09//06/2013)
------
* fixed problem when the number of layers is different than the number of legends
3.1.07 (09//03/2013)
------
* fixed interactiviy in IE9 with more than one layer
* removed extra comma in layer selector (IE fix)
3.1.06 (09//02/2013)
------
* fixed #66 layer interactivity was wrong when a layer was hidden
3.1.05 (08//08/2013)
------
* Adds addInfowindow and addCursorInteraction
* changes layergroup request to use GET when is possible
3.1.04 (08//08/2013)
------
* Adds styles for NoneLegend
3.1.03 (08//08/2013)
------
* Prevents showing empty legends.
3.1.02 (08//07/2013)
------
* Flips the order of the legends.
3.1.01 (08//06/2013)
------
* Fixes the order of the legends.
3.1.00 (08//06/2013)
------
* added legends support
3.0.05 (07/18/2013)
------
* infowindow templates can be functions
3.0.04 (07/18/2013)
------
* fixed IE8 cors checking
3.0.03 (07/17/2013)
------
* fixed collision with older jQuery version
* fixed infowindows when there is no interaction enabled when loading from viz.json
3.0.02 (07/11/2013)
------
* fixed sublayer_options
3.0.01 (07/11/2013)
------
* added sublayer_options
* fixed compatibility with older viz.json
3.0.00 (07/09/2013)
------
* release v3 version
* multilayer support
* major refactor, backwards incompatible
2.0.28 (04/17/2013)
-------
* Fixed infowindow position when a map is in a scroll page.
* Added a new example (scroll_map).
2.0.27 (04/15/2013)
------
* Fixed infowindow content (#47).
2.0.26 (04/15/2013)
------
* Fixed interaction for IE10 browsers (#43).
* Fixed https option in createLayer (#46).
2.0.25 (03/22/2013)
------
* Fixed #37 featureOut is called when the cursor moves between tiles.
* Fixed #38 Infowindow isn't working using 'createVis' function without any parameter.
* Fixed #27 IE styles included in main css file.
2.0.24 (03/13/2013)
------
* Added option to control map scrollwheel zoom.
* Loading content in infowindow bug fixed.
* New classes applied to CartoDB map components avoiding other css collisions.
2.0.23 (03/04/2013)
------
* Fixed infowindow bug with cover image checking number fields as url.
* Added template_name in the infowindow model for vis.js.
2.0.22 (03/01/2013)
------
* Added cartodb.nojquery.js to the cdn.
* Infowindow crops text when it is too large in infowindows headers.
* Infowindow converts links automatically.
* Added retina CartoDB logo.
* Fixed problem with leaflet markers image paths.
* Fixed infowindow option in createVis #31.
2.0.21 (02/19/2013)
------
* Fixed problem with interaction in IE9.
2.0.20 (02/13/2013)
------
* Fixed problem with setOpacity in IE8.
2.0.19 (02/13/2013)
------
* Fixed problem with setOpacity in IE7 and IE8. It replaces leaflet with a custom one.
2.0.18 (02/12/2013)
------
* Fixed problem when loading leaflet externally.
2.0.17 (02/11/2013)
------
* Fixed problem with hide method on layers for IE8.
* Migrated to leaflet 0.5.1.
* Fixed problem guessing map type in createLayer.
* Fixed showing null values in the infowindow.
2.0.16 (01/31/2013)
------
* Added support for new infowindow' theme: 'header with image'.
* Fixed loading more than one viz.json in the same application.
* Documentation fixes.
2.0.15 (01/14/2013)
------
* Fixed problem fetching viz.json when createVis and createLayer are called in the same script.
2.0.14 (01/11/2013)
------
* Improvements in the documentation.
* Reduced the final file size by 58kb.
* Added cartodb_logo option to remove cartodb logo on visualizations .
* Fixed problem with the map always in fullscreen (#20).
* Fixed bootstrap conflicts (#16).
* Fixed autobounds in the map when user calls to createLayer (#11).
lib/assets/javascripts/cdb/README.md
+79
View File
@@ -0,0 +1,79 @@
CartoDB.js (v3.15)
===========
**⚠️ CartoDB.js v3.15 is no longer being actively developed. Major bugs will be addressed as needed. ⚠️**
**🎉 You can check out the Beta release of CARTO.js v4 [here](https://carto.com/documentation/cartojs/)! 🎉**
This library allows to embed visualizations created with CartoDB in your map or website in a simple way.
## Quick start
1. Add cartodb.js and css to your site:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- use these cartodb.css links if you are using https -->
<!--link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /-->
<!-- use this cartodb.js link if you are using https -->
<!-- script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script -->
```
2. Create the map and add the layer
```javascript
var map = L.map('map').setView([0, 0], 3);
// set a base layer
L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'stamen http://maps.stamen.com/'
}).addTo(map);
// add the cartodb layer
var layerUrl = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
cartodb.createLayer(map, layerUrl).addTo(map);
```
### Usage with Bower
You can install **cartodb.js** with [bower](http://bower.io/) by running
```sh
bower install cartodb.js
```
## Documentation
You can find the documentation online [here](http://docs.cartodb.com/cartodb-platform/cartodb-js.html) and the [source](https://github.com/CartoDB/cartodb.js/blob/v3/doc/API.md) inside this repository.
## Examples
- [Load a layer with google maps](http://cartodb.github.com/cartodb.js/examples/gmaps_force_basemap.html)
- [Load a layer with Leaflet](http://cartodb.github.com/cartodb.js/examples/leaflet.html)
- [Show a complete visualization](http://cartodb.github.com/cartodb.js/examples/easy.html)
- [A visualization with a layer selector](http://cartodb.github.com/cartodb.js/examples/layer_selector.html)
- [How to create a custom infowindow](http://cartodb.github.com/cartodb.js/examples/custom_infowindow.html)
- [The Hobbit filming location paths](http://cartodb.github.com/cartodb.js/examples/TheHobbitLocations/) a full example with some widgets
## How to build
Build CartoDB.js library:
- Install [node.js](http://nodejs.org/download/), from 0.10 version
- Install grunt & bower: `npm install -g grunt-cli bower`
- Install node dependencies: `npm install`
- Install bower dependencies: `bower install`
- Install [ruby](https://www.ruby-lang.org/en/installation/) and [bundler](https://github.com/bundler/bundler)
- Install ruby dependencies: `bundle install` (necessary for compass gem)
- Start the server: `grunt build`
- Happy mapping!
## Submitting Contributions
You will need to sign a Contributor License Agreement (CLA) before making a submission. [Learn more here.](https://cartodb.com/contributing)
lib/assets/javascripts/cdb/RELEASING.md
+84
View File
@@ -0,0 +1,84 @@
## How to release a new CartoDB.js version
1. [Release a new version](#release-a-new-version)
2. [Rollback to a previous version](#rollback-to-a-previous-version)
---
### Release a new version
- First of all: **MAKE SURE ALL THE TESTS ARE GREEN.**
- Then install the dependencies, follow main README.md instructions, + [git flow](https://github.com/nvie/gitflow/wiki/Installation)
- Be sure you have a valid secrets.json file (DON'T SHARE IT).
- Create a new branch to prepare the release:
```
git flow release start 3.15.18
```
- Build CartoDB.js files, choosing the new version:
```
grunt release
```
- Update the NEWS file and commit the changes. Take into account that new CartoDB.js version will be replaced in ```API.md```, ```RELEASING.md```, ```README.md```, ```package.json```, ```cartodb.js``` and ```examples``` files.
```
git commit -am "Files changed for version 3.15.18"
```
- Release it.
```
grunt publish
```
- Check if those files have been updated in the CDN:
```
http://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15.18/cartodb.js
http://libs.cartocdn.com/cartodb.js/v3/3.15.18/cartodb.js
http://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js
http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js
```
- Sometimes It takes more than 10 minutes, if it is not updated, execute ```grunt invalidate```.
- And to finish: close the release and push it.
```
git flow release finish 3.15.18
git push --all
git push --tags
```
- Publish to the [cartodb.js bower repo](https://github.com/CartoDB/cartodb.js-bower)
```
./bower.sh
```
- If possible, don't forget to change CartoDB.js docs.
- Done. Celebrate! :)
---
### Rollback to a previous version
In case you screw up all things, don't worry, rollback cartodb.js to a previous version is fast (you need to setup the environment, read how to do it):
```
git checkout PREVIOUS_VERSION_TAG
grunt
grunt publish
```
For example, if we are in 3.15.18 and we want to go back to 3.13.4
```
git checkout 3.13.4
grunt
grunt publish
```
lib/assets/javascripts/cdb/UPGRADE.md
+155
View File
@@ -0,0 +1,155 @@
# Upgrading from v1 ([cartodb-gmapsv3](https://github.com/vizzuality/cartodb-gmapsv3) | [leaflet](https://github.com/vizzuality/cartodb-leaflet)) or v2 ([v2.0.28](https://github.com/CartoDB/cartodb.js/releases/tag/v2.0.28)) to latest CartoDB.js v3
If your application is running an old CartoDB javascript library, you should take
into account that the creation layer method and layer functions won't work as expected.
- [Creation](#creation)
- [Methods](#methods)
- setMap
- setQuery
- setStyle
- setLayerOrder
- isAdded
- setBounds
---
## Creation
You should follow the [instructions](http://docs.cartodb.com/cartodb-platform/cartodb-js.html#adding-cartodb-layers-to-an-existing-map) we have in our [documentation](http://docs.cartodb.com/cartodb-platform/cartodb-js.html).
You will find [layer available options](http://docs.cartodb.com/cartodb-platform/cartodb-js.html#cartodbcreatelayermap-layersource--options--callback) and code examples there.
---
## Methods
Following methods are not supported or have changed:
- **setMap**: use [addTo](http://docs.cartodb.com/cartodb-platform/cartodb-js.html#creating-visualizations-at-runtime) instead.
- _v1:_
```javascript
var layer = new L.CartoDBLayer({
map: map,
user_name:'cartodb_user',
table_name: 'table_name',
query: "SELECT * FROM {{table_name}}",
tile_style: "#{{table_name}} {marker-fill:red}"
})
map.addLayer(layer);
```
- _v2:_
```javascript
cartodb.createLayer(map, layerUrl, options, function(layer) {
// For Leaflet
map.addLayer(layer);
// For GMaps
map.overlayMapTypes.setAt(0, layer);
});
```
- _v3:_
```javascript
cartodb.createLayer(map, layerUrl, options)
.addTo(map)
.on('done', function(layer) { ... });
```
- **setQuery**: use [setSQL](http://docs.cartodb.com/cartodb-platform/cartodb-js.html#sublayersetsqlsql) instead.
- _v1:_
```javascript
layer.setQuery("SELECT * FROM {{table_name}} WHERE cartodb_id = 3");
```
- _v2:_
```javascript
layer.setQuery("SELECT * FROM table_name WHERE cartodb_id = 10");
```
- _v3:_
```javascript
layer.setSQL("SELECT * FROM table_name WHERE cartodb_id = 9");
```
- **setStyle**: use [setCartoCSS](http://docs.cartodb.com/cartodb-platform/cartodb-js.html#sublayersetcartocsscss) instead.
- _v1:_
```javascript
layer.setStyle("#{{table_name}} { marker-fill:purple }");
```
- _v2:_
```javascript
layer.setCartoCSS("#layer { marker-fill:pink }");
```
- _v3:_
```javascript
layer.setCartoCSS("#layer { marker-fill:yellow }");
```
- **setLayerOrder**: no alternative, check proper map library methods.
- _v1:_
```javascript
layer.setLayerOrder(2); // Only available for GMaps
```
- _v2:_ check v3
- _v3:_ [Leaflet(1)](http://leafletjs.com/reference.html#tilelayer-bringtofront), [Leaflet(2)](http://leafletjs.com/reference.html#tilelayer-setzindex) or GMaps.
```javascript
// For Leaflet
layer.bringToFront();
layer.bringToBack();
layer.setZIndex();
// For GMaps
map.overlayMapTypes.setAt(0, layer);
```
- **isAdded**: check it with proper map library functions ([Leaflet](http://leafletjs.com/reference.html#map-haslayer) or [GMaps](https://developers.google.com/maps/documentation/javascript/reference#MVCArray)).
- _v1:_
```javascript
layer.isAdded(); // Returned true or false
```
- _v2:_ check v3
- _v3:_ [Leaflet](http://leafletjs.com/reference.html#map-haslayer) or GMaps.
```javascript
// For Leaflet
map.haslayer(layer);
// For GMaps
var added = false;
map.overlayMapTypes.forEach(function(lyr){
if (lyr === layer) added = true;
});
```
- **setBounds**: you can get the needed info using CartoDB SQL ([example](http://docs.cartodb.com/cartodb-platform/cartodb-js.html#sqlgetboundssql-vars-options-callback)).
- _v1:_
```javascript
layer.setBounds("SELECT * FROM {{table_name}} WHERE cartodb_id < 100");
```
- _v2:_ check v3
- _v3:_
```javascript
var sql = new cartodb.SQL({ user: 'cartodb_user' });
sql.getBounds('select * from table').done(function(bounds) {
console.log(bounds);
});
```
lib/assets/javascripts/cdb/bower.json
+20
View File
@@ -0,0 +1,20 @@
{
"name": "cartodb.js",
"main": [
"cartodb.js",
"themes/css/cartodb.css"
],
"version": "3.15.20",
"homepage": "https://github.com/CartoDB/cartodb.js",
"authors": [
"CartoDB <support@cartodb.com>"
],
"description": "CartoDB javascript library",
"license": "BSD",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test"
]
}
lib/assets/javascripts/cdb/bower.sh
Executable
+52
View File
@@ -0,0 +1,52 @@
#!/bin/bash
# Script for updating the cartodb.js bower repo from current local build.
echo "#################################"
echo "#### Update bower ###############"
echo "#################################"
ORG=CartoDB
REPO=cartodb.js-bower
# prepare repo folder
if [ -d $REPO ]; then
rm -rf $REPO
fi
# clone repo
echo "-- Cloning $REPO"
git clone git@github.com:$ORG/$REPO.git
# clean up cloned files
rm -rf $REPO/*
# move js files from the build
cp -r dist/cartodb*.js $REPO/
# move css and images files from the build
mkdir $REPO/themes/ && cp -r dist/themes/* $REPO/themes/
cp -R bower.json $REPO/bower.json
cp -R LICENSE $REPO/LICENSE.md
cd $REPO
git add -A
NEW_VERSION=$(git diff origin/master bower.json | grep version | cut -d':' -f2 | cut -d'"' -f2 | sort -g -r | head -1)
if [ -z "$NEW_VERSION" ]; then
echo 'VERSION DID NOT CHANGE'
else
echo "-- Tagging $NEW_VERSION"
git tag -a $NEW_VERSION -m "Version $NEW_VERSION";
git commit -m "v$NEW_VERSION"
echo "-- Pushing $REPO"
git push -fq origin master
git push -fq origin --tags
fi
cd ..
echo "-- Finished"
lib/assets/javascripts/cdb/doc/API.md
+15
View File
@@ -0,0 +1,15 @@
CARTO offers a simple unified JavaScript library called CARTO.js that lets you interact with the CARTO service. This library allows you to connect to your stored visualizations, create new visualizations, add custom interaction, and access or query your raw data from a web browser; meaning, your applications just got a whole lot more powerful with a lot less code.
When you add CARTO.js to your websites you get some great new tools to make maps or power your content with data. Let’s take a look.
## Documentation
* [Getting started](getting_started.md)
* [API methods](api_methods.md)
* [Events](events.md)
* [Specific UI functions](ui_functions.md)
* [Getting data with SQL](sql.md)
* [Static Maps](static_maps.md)
* [Core API functionality](core_api.md)
* [Versions](versions.md)
* [Other important stuff](other_stuff.md)
lib/assets/javascripts/cdb/doc/api_methods.md
+553
View File
@@ -0,0 +1,553 @@
# API Methods
This documentation is intended for developers and describes specific methods from the [latest version](https://github.com/CartoDB/cartodb.js/releases) of the CARTO.js library.
## cartodb.createVis
### cartodb.createVis(_map_id, vizjson_url[, options] [, callback]_)
Creates a visualization inside the map_id DOM object.
#### Arguments
Name |Description
--- | ---
map_id | a DOM object, for example `$('#map')` or a DOM id.
vizjson_url | url of the vizjson object.
options |
--- | ---
&#124;_ shareable | add facebook and twitter share buttons.
&#124;_ title | adds a header with the title of the visualization.
&#124;_ description | adds description to the header (as you set in the UI).
&#124;_ search | adds a search control (default: true).
&#124;_ zoomControl | adds zoom control (default: true).
&#124;_ loaderControl | adds loading control (default: true).
&#124;_ center_lat | latitude where the map is initializated.
&#124;_ center_lon | longitude where the map is initializated.
&#124;_ zoom | initial zoom.
&#124;_ cartodb_logo | default to true, set to false if you want to remove the CARTO logo.
&#124;_ infowindow | set to false if you want to disable the infowindow (enabled by default).
&#124;_ time_slider | show an animated time slider with Torque layers. This option is enabled by default, as shown with `time_slider: true` value. To disable the time slider, use `time_slider: false`. See [No Torque Time Slider - Example Code](http://bl.ocks.org/michellechandra/081ca7160a8c782266d2) for an example.<br/><br/> For details about customizing the time slider, see the [Torque.js](https://carto.com/docs/carto-engine/torque/torque-time-slider/) documentation.
&#124;_ layer_selector | show layer selector (default: false).
&#124;_ legends | if it's true legends are shown in the map.
&#124;_ https | if true, it makes sure that basemaps are converted to https when possible. If explicitly false, converts https maps to http when possible. If undefined, the basemap template is left as declared at `urlTemplate` in the viz.json.
&#124;_ scrollwheel | enable/disable the ability of zooming using scrollwheel (default enabled)
&#124;_ fullscreen | if true adds a button to toggle the map fullscreen
&#124;_ mobile_layout | if true enables a custom layout for mobile devices (default: false)
&#124;_ force_mobile | forces enabling/disabling the mobile layout (it has priority over mobile_layout argument)
&#124;_ gmaps_base_type | Use Google Maps as map provider whatever is the one specified in the viz.json". Available types: 'roadmap', 'gray_roadmap', 'dark_roadmap', 'hybrid', 'satellite', 'terrain'.
&#124;_ gmaps_style | Google Maps styled maps. See [documentation](https://developers.google.com/maps/documentation/javascript/styling).
&#124;_ no_cdn | true to disable CDN when fetching tiles
callback(vis,layers) | if a function is specified, it is called once the visualization is created, passing vis and layers as arguments
#### Returns
A promise object. You can listen for the following events:
Event | Description
--- | ---
done | triggered when the visualization is created, `vis` is passed as the first argument and `layers` is passed as the second argument. Each layer type has different options, see layers section.
error | triggered when the layer couldn't be created. The error string is the first argument.
#### Example
```javascript
var url = 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
cartodb.createVis('map', url)
.done(function(vis, layers) {
});
```
---
## cartodb.Vis
### vis.getLayers()
Returns an array of layers in the map. The first is the base layer.
### vis.addOverlay(_options_)
Adds an overlay to the map that can be either a tooltip or an infobox.
#### Arguments
Option | Description
--- | ---
layer | layer from the visualization where the overlay should be applied (optional)
type | - tooltip (an infowindow that appears when you hover your mouse over a map feature)<br /><br /> - infobox (similar to a tooltip but always appears in the same fixed position that you define)
If no layer is provided, the overlay will be added to the first layer of the visualization. Extra options are available based on the [specific UI function](https://carto.com/docs/carto-engine/carto-js/ui-functions/).
#### Returns
An overlay object, see [vis.Overlays](#visoverlays).
#### Example (Infowindow with Tooltip)
The following example displays how to enable infowindow interactivity with the mouse "hover" action. The hover action is referred to as a tooltip, and enables you to control the positioning.
{% highlight html %}
layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: sublayer,
template: '<div class="cartodb-tooltip-content-wrapper"><img style="width: 100%" src={{_url}}>{{name}}, {{age}}, {{city}}, {{country}}</div>',
position: 'bottom|right',
fields: [{ name: 'name' }]
});
{% endhighlight %}
**Tip:** For a description of the infowindow specific parameters, see [`cartodb.vis.Vis.addInfowindow(_map, layer, fields [, options]_)`](https://carto.com/docs/carto-engine/carto-js/ui-functions/#cartodbvisvisaddinfowindowmap-layer-fields--options). Optionally, you can also use the `cartodb.vis.Vis.addInfowindow` function to define the click action for an infowindow.
### vis.getOverlay(_type_)
Returns the first overlay with the specified **type**.
#### Example
```javascript
var zoom = vis.getOverlay('zoom');
```
### vis.getOverlays()
Returns a list of the overlays that are currently on the screen (see overlays description).
### vis.getNativeMap()
Returns the native map object being used (e.g. a `L.Map` object for Leaflet).
### vis.Overlays
An overlay is a control shown on top of the map.
Overlay objects are always created using the `addOverlay` method of a `cartodb.Vis` object.
An overlay is internally a [Backbone.View](http://backbonejs.org/#View) so if you know how Backbone works you can use it. If you want to use plain DOM objects you can access `overlay.el` (`overlay.$el` for jQuery object).
## cartodb.createLayer(_map, layerSource [, options] [, callback]_)
With visualizations already created through the CARTO console, you can simply use the `createLayer` function to add them into your web pages. Unlike `createVis`, this method requires an already activated `map` object and it does not load a basemap for you.
#### Arguments
Name |Description
--- | ---
map | Leaflet `L.Map` object. The map should be initialized before calling this function.
layerSource | contains information about the layer. It can be specified in multiple ways<br/><br/>**Tip:** See [Multiple types of layers Source Object](http://docs.carto.com/carto-engine/carto-js/layer-source-object/#multiple-types-of-layers-source-object)
options |
--- | ---
&#124;_ https | loads the layer as HTTPS. True forces the layer to load. See [HTTPS support](https://carto.com/docs/carto-engine/carto-js/getting-started/#https-support) for example code.
&#124;_ refreshTime | if set, the layer is auto refreshed in milliseconds. See a refreshTime code [example](https://github.com/CartoDB/cartodb.js/blob/v3/examples/createLayer_refresh_time.html).<br/><br/>**Tip:** To refresh and display the latest data in seconds, include the seconds after the defined milliseconds in the code (i.e., `refreshTime: 2000 // 2 seconds`).
&#124;_ infowindow | set to false if you want to disable the infowindow (enabled by default). For details, see [Creating an infowindow with the `createLayer()` function](http://docs.carto.com/faqs/infowindows/#creating-an-infowindow-with-the-createlayer-function).
&#124;_ tooltip | set to false if you want to disable the tooltip (enabled by default). This option is specific for when you create a map using the CARTO Editor, and have enabled the tooltip [(infowindow hover)](http://docs.carto.com/carto-editor/maps/#infowindows) option. This option disables the tooltip in createLayer.<br/><br/>See a tooltip code [example](https://github.com/CartoDB/cartodb.js/blob/v3/examples/createLayer_custom_tooltip.html).
&#124;_ legends | set to true to show legends in the map. For an example, see this [CARTO.js example with legends disabled](https://github.com/CartoDB/cartodb.js/blob/v3/examples/createLayer_noLegend.html).
&#124;_ time_slider | show an animated time slider with Torque layers. This option is enabled by default, as shown with `time_slider: true` value. To disable the time slider, use `time_slider: false`. See a Torque Time Slider code [example](https://github.com/CartoDB/cartodb.js/blob/v3/examples/torque_time_slider.html).<br/><br/> For details about customizing the time slider, see the [Torque.js](http://docs.carto.com/carto-engine/torque/torque-time-slider/) documentation.
&#124;_ loop | a boolean object that defines the animation loop with Torque layers. Default value is `true`. If `false`, the animation is paused when it reaches the last frame. For details about Torque, see the [Torque.js](http://docs.carto.com/carto-engine/torque-js/) documentation.
&#124;_ layerIndex | when the visualization contains more than one layer this index allows you to select what layer is created. Take into account that `layerIndex == 0` is the base layer and that all the tiled layers (non animated ones) are merged into a single one. The default value for this option is 1 (usually tiled layers).<br/><br/>See [`layer.featureOver(_event, latlng, pos, data, layerIndex_`)](http://docs.carto.com/carto-engine/carto-js/events/#layerfeatureoverevent-latlng-pos-data-layerindex) for details about binding functions to layer events.
&#124;_ filter | A string, or array of values, that specifies the type(s) of sublayers to be rendered if you are using multiple types of layer source objects (eg: `['http', 'mapnik')](http://docs.carto.com/carto-engine/maps-api/mapconfig/#layergroup-configurations). All non-torque layers (http and mapnik) will be rendered if this option is not present.<br/><br/>See a createLayer filter [example](http://docs.carto.com/carto-engine/carto-js/layer-source-object/#multiple-types-of-layers-source-object).
&#124;_ no_cdn | set to true to disable CDN when fetching tiles. For a complete example of this code, see ["odyssey_test.html"](https://github.com/CartoDB/cartodb.js/blob/2983b2fdcef914afdb1f4fdae173471143930452/examples/odyssey_test.html).
callback(_layer_) | if a function is specified, it will be invoked after the layer has been created. The layer will be passed as an argument.<br/><br/> See the [example of loading multiple layers from CARTO in a Leaflet Map](https://github.com/CartoDB/cartodb.js/blob/v3/examples/callback_layer.html).
### Passing the url where the layer data is located
```javascript
cartodb.createLayer(map, 'http://myserver.com/layerdata.json')
```
### Passing the data directly
```javascript
cartodb.createLayer(map, { layermetadata })
```
#### Returns
A promise object. You can listen for the following events:
Events | Description
--- | ---
done | triggered when the layer is created, the layer is passed as first argument. Each layer type has different options, see layers section.
error | triggered when the layer couldn't be created. The error string is the first argument.
You can call to `addTo(map[, position])` in the promise so when the layer is ready it will be added to the map.
#### Example
`cartodb.createLayer` using a url
```javascript
var map;
var mapOptions = {
zoom: 5,
center: [43, 0]
};
map = new L.Map('map', mapOptions);
cartodb.createLayer(map, 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
layer
.on('featureOver', function(e, latlng, pos, data) {
console.log(e, latlng, pos, data);
})
.on('error', function(err) {
console.log('error: ' + err);
});
}).on('error', function(err) {
console.log("some error occurred: " + err);
});
```
Layer metadata must take one of the forms of the [Layer Source Object](http://docs.carto.com/carto-engine/carto-js/layer-source-object/).
---
## cartodb.CartoDBLayer
CartoDBLayer allows you to manage tiled layers from CARTO, and manage sublayers.
### layer.clear()
Clears the layer. It should be invoked after removing the layer from the map.
### layer.hide()
Hides the layer from the map.
### layer.show()
Shows the layer in the map if it was previously added.
### layer.toggle()
Toggles the visibility of the layer and returns a boolean that indicates the new status (true if the layer is shown, false if it is hidden)
### layer.setOpacity(_opacity_)
Changes the opacity of the layer.
#### Arguments
Name |Description
--- | ---
opacity | value in range [0, 1]
### layer.getSubLayer(_layerIndex_)
Gets a previously created sublayer. And exception is raised if no sublayer exists.
#### Arguments
Name |Description
--- | ---
layerIndex | 0 based index of the sublayer to get. Should be within [0, getSubLayerCount())
#### Returns
A `SubLayer` object.
#### Example
```javascript
layer.getSubLayer(1).hide();
var sublayer = layer.getSubLayer(0);
sublayer.setSQL('SELECT * FROM table_name limit 10');
```
### layer.getSubLayerCount()
Gets the number of sublayers in layer.
#### Returns
The number of sublayers.
#### Example
Hide layers using `layer.getSubLayerCount`
```javascript
var num_sublayers = layer.getSubLayerCount();
for (var i = 0; i < num_sublayers; i++) {
layer.getSubLayer(i).hide();
}
```
### layer.createSubLayer(_layerDefinition_)
Adds a new data to the current layer. With this method, data from multiple tables can be easily visualized.
#### Arguments
Name |Description
--- | ---
layerDefinition | an object with the sql and cartocss that defines the data, should be like
```javascript
{
sql: "SELECT * FROM table_name",
cartocss: "#layer { marker-fill: red; }",
interactivity: 'cartodb_id, area, column' // optional
}
```
`sql` and `cartocss` are mandatory. An exception is raised if either of them are not present. If the interactivity is not set, there is no interactivity enabled for that layer (better performance). SQL and CartoCSS syntax should be correct. View the documentation for [PostgreSQL](http://www.postgresql.org/docs/9.3/interactive/sql-syntax.html) and [CartoCSS](http://docs.carto.com/carto-engine/cartocss/) for more information. There are some restrictions in the SQL queries:
- Must not write. INSERT, DELETE, UPDATE, ALTER and so on are not allowed (the query will fail)
- Must not contain trailing semicolon
#### Returns
A `SubLayer` object.
#### Example
```javascript
cartodb.createLayer(map, 'http://examples.carto.com/api/v2/viz/european_countries_e/viz.json', function(layer) {
// add populated places points over the countries layer
layer.createSubLayer({
sql: 'SELECT * FROM ne_10m_populated_places_simple',
cartocss: '#layer { marker-fill: red; }'
});
}).addTo(map);
```
### layer.invalidate()
Refreshes the data. If the data has been changed in the CARTO server those changes will be displayed. Nothing happens otherwise. Every time a parameter is changed in a sublayer, the layer is refreshed automatically, so there's no need to call this method manually.
### layer.setAuthToken(_auth_token_)
Sets the auth token that will be used to create the layer. Only available for private visualizations. An exception is
raised if the layer is not being loaded with HTTPS. See [Named Maps](https://carto.com/docs/carto-engine/maps-api/named-maps/) for more information.
#### Arguments
Name |Description
--- | ---
auth_token | string
#### Returns
The layer itself.
### layer.setParams(_key, value_)
Sets the configuration of a layer when using [Named Maps](https://carto.com/docs/carto-engine/maps-api/named-maps/). It can be invoked in different ways.
**Note:** This function is not supported when using Named Maps for Torque.
#### Arguments
Name |Description
--- | ---
key | string
value | string or number
#### Returns
The layer itself.
#### Example
```javascript
layer.setParams('test', 10); // sets test = 10
layer.setParams('test', null); // unset test
layer.setParams({'test': 1, 'color': '#F00'}); // set more than one parameter at once
```
### layer.setSQL()
Sets the 'sql' request to the user database that will create the layer from the fetched data
### layer.setCartoCSS()
Sets the 'cartocss' attribute that will render the tiles to create the layer, based on the specified CartoCSS style
---
## cartodb.SubLayerBase
### sublayer.set(_layerDefinition_)
Sets sublayer parameters. Useful when more than one parameter needs to be changed.
#### Arguments
Name |Description
--- | ---
layerDefinition | an object with the sql and cartocss that defines the data
#### Returns
The layer itself.
#### Example
```javascript
sublayer.set({
sql: "SELECT * FROM table_name WHERE cartodb_id < 100",
cartocss: "#layer { marker-fill: red }",
interactivity: "cartodb_id, the_geom, magnitude"
});
```
### sublayer.get(_attr_)
Gets the attribute for the sublayer, for example 'sql', 'cartocss'.
#### Returns
The requested attribute or `undefined` if it's not present.
### sublayer.remove()
Removes the sublayer. An exception will be thrown if a method is called and the layer has been removed.
### sublayer.show()
Shows a previously hidden sublayer. The layer is refreshed after calling this function.
### sublayer.hide()
Removes the sublayer from the layer temporarily. The layer is refreshed after calling this function.
### sublayer.toggle()
Toggles the visibility of the sublayer and returns a boolean that indicates the new status (`true` if the sublayer is visible, `false` if it is hidden)
### sublayer.isVisible()
It returns `true` if the sublayer is visible.
## cartodb.CartoDBSubLayer
_This is a subclass of [`cartodb.SubLayerBase`](#cartodbsublayerbase)._
### sublayer.getSQL()
Shortcut for `get('sql')`
### sublayer.getCartoCSS()
Shortcut for `get('cartocss')`
### sublayer.setSQL(_sql_)
Shortcut for `set({'sql': 'SELECT * FROM table_name'})`
### sublayer.setCartoCSS(_css_)
Shortcut for `set({'cartocss': '#layer {...}' })`
### sublayer.setInteractivity(_'cartodb_id, name, ...'_)
Shortcut for `set({'interactivity': 'cartodb_id, name, ...' })`
Sets the columns which data will be available via the interaction with the sublayer.
### sublayer.setInteraction(_true_)
Enables (`true`) or disables (`false`) the interaction of the layer. When disabled, **featureOver**, **featureClick**, **featureOut**, **mouseover** and **mouseout** are **not** triggered.
#### Arguments
Name |Description
--- | ---
enable | `true` if the interaction needs to be enabled.
### sublayer.infowindow
`sublayer.infowindow` is a Backbone model where we modify the parameters of the [infowindow](https://carto.com/docs/carto-engine/carto-js/ui-functions/#cartodbvisvisaddinfowindowmap-layer-fields--options).
#### Attributes
Name | Description
--- | ---
template | Custom HTML template for the infowindow. You can write simple HTML or use [Mustache templates](http://mustache.github.com/).
sanitizeTemplate | By default all templates are sanitized from unsafe tags/attrs (e.g. `<script>`), set this to `false` to skip sanitization, or a function to provide your own sanitization (e.g. `function(inputHtml) { return inputHtml })`).
width | Width of the infowindow (value must be a number).
maxHeight | Max height of the scrolled content (value must be a number).
**Tip:** If you are customizing your infowindow with CARTO.js, reference the [CSS library](https://github.com/CartoDB/cartodb.js/tree/develop/themes/css/infowindow) for the latest stylesheet code.
#### Example
```html
<div id="map"></div>
<script>
sublayer.infowindow.set({
template: $('#infowindow_template').html(),
width: 218,
maxHeight: 100
});
</script>
<script type="infowindow/html" id="infowindow_template">
<span> custom </span>
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<img style="width: 100%" src="http://rambo.webcindario.com/images/18447755.jpg"></src>
<!-- content.data contains the field info -->
<h4>{{content.data.name}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
```
[Here is the complete example source code](https://github.com/CartoDB/cartodb.js/blob/v3/examples/custom_infowindow.html)
---
## cartodb.HttpSubLayer
_This is a subclass of [`cartodb.SubLayerBase`](#cartodbsublayerbase)._
### sublayer.setURLTemplate(_urlTemplate_)
Shortcut for `set({'urlTemplate': 'http://{s}.example.com/{z}/{x}/{y}.png' })`
### sublayer.setSubdomains(_subdomains_)
Shortcut for `set({'subdomains': ['a', 'b', '...'] })`
### sublayer.setTms(_tms_)
Shortcut for `set({'tms': true|false })`
### sublayer.getURLTemplate
Shortcut for `get('urlTemplate')`
### sublayer.getSubdomains
Shortcut for `get('subdomains')`
### sublayer.getTms
Shortcut for `get('tms')`
### sublayer.legend
`sublayer.legend` is a Backbone model with the information about the legend.
#### Attributes
Name | Description
--- | ---
template | Custom HTML template for the legend. You can write simple HTML.
title | Title of the legend.
show_title | Set this to `false` if you don't want the title to be displayed.
items | An array with the items that are displayed in the legend.
visible | Set this to `false` if you want to hide the legend.
lib/assets/javascripts/cdb/doc/core_api.md
+77
View File
@@ -0,0 +1,77 @@
# Core API Functionality
In case you are not using Leaflet, or you want to implement your own layer object, CARTO provides a way to get the tiles url for a layer definition.
If you want to use this functionality, you only need to load cartodb.core.js from our cdn. No CSS is needed:
```html
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
```
An example using this functionality can be found in a ModestMaps example: [view live](http://cartodb.github.com/cartodb.js/examples/modestmaps.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/v3/examples/modestmaps.html).
Notice that `cartodb.SQL` is also included in that JavaScript file
---
## cartodb.Tiles
### cartodb.Tiles.getTiles(_layerOptions, callback_)
Fetch the tile template for the layer definition.
#### Arguments
Name |Description
--- | ---
layerOptions | the data that defines the layer. It should contain at least `user_name` and `sublayers` list.
options |
--- | ---
&#124;_ user_name |
&#124;_ sublayers |
&#124;_ maps_api_template |
callback(tilesUrl, error) | a function that recieves the tiles templates. In case of an error, the first param is null and the second one will be an object with an errors attribute that contains the list of errors.
#### Example
In this example, a layer with one sublayer is created. The sublayer renders all the content from a table.
```javascript
var layerData = {
user_name: 'username',
sublayers: [{
sql: "SELECT * FROM table_name";
cartocss: '#layer { marker-fill: #F0F0F0; }'
}],
maps_api_template: 'https://{username}.carto.com' // Optional
};
cartodb.Tiles.getTiles(layerData, function(tilesUrl, error) {
if (tilesUrl == null) {
console.log("error: ", error.errors.join('\n'));
return;
}
console.log("url template is ", tilesUrl.tiles[0]);
}
```
The `tilesUrl` object contains url template for tiles and interactivity grids:
```javascript
{
tiles: [
"http://{s}.carto.com/HASH/{z}/{x}/{y}.png",
...
],
grids: [
// for each sublayer there is one entry on this array
[
"http://{s}.carto.com/HASH/0/{z}/{x}/{y}.grid.json"
],
[
"http://{s}.carto.com/HASH/1/{z}/{x}/{y}.grid.json"
],
...
]
}
```
lib/assets/javascripts/cdb/doc/events.md
+135
View File
@@ -0,0 +1,135 @@
# Events
You can bind custom functions to layer events by adding listeners and callbacks to the async portions of the CARTO.js library. Active layer events are triggered by layers on your webpage that are already loaded (**Tip:** these are the `createLayer` and `createVis` functions that return the _done_ event. For details, see [Loading Events](http://docs.carto.com/carto-engine/carto-js/getting-started/#loading-listener-events)). Each event requires the layer to include an **interactivity** layer. This is useful for integrating your website with your maps, adding events for mouseovers and click events.
**Note:** Be mindful of using these events, as these functions can get costly if you have a lot of features on a map.
## layer
### layer.featureOver(_event, latlng, pos, data, layerIndex_)
Triggered when the user mouse hovers on any feature.
#### Callback arguments
Name |Description
--- | ---
event | Browser mouse event object.
latlng | Array with the `LatLng ([lat,lng])` where the layer was clicked.
pos | Object with x and y position in the DOM map element.
data | The CARTO data of the clicked feature with the `interactivity` param.
layerIndex | the `layerIndex` where the event happened.
#### Example
```javascript
layer.on('featureOver', function(e, latlng, pos, data, subLayerIndex) {
console.log("mouse over polygon with data: " + data);
});
```
### layer.featureOut(_layerIndex_)
Triggered when the user hovers out any feature. For example, you might want to use this event if you highlight polygons on mouseover and need a way to know when to remove the highlighting after the mouse has left.
#### Example
```javascript
layer.on('featureOut', function(e, latlng, pos, data, layer) {
console.log("mouse left polygon with data: " + data);
});
```
### layer.featureClick(_event, latlng, pos, data, layerIndex_)
Triggered when when the user clicks on a feature of a layer.
#### Example
```javascript
layer.on('featureClick', function(e, latlng, pos, data, layer) {
console.log("mouse clicked polygon with data: " + data);
});
```
#### Callback arguments
Same as `featureOver`.
### layer.mouseover()
Triggered when the mouse enters in **any** feature. Useful to change the cursor while hovering.
### layer.mouseout()
Triggered when the mouse leaves all the features. Useful to revert the cursor after hovering.
#### Example
```javascript
layer.on('mouseover', function() {
cursor.set('hand')
});
layer.on('mouseout', function() {
cursor.set('auto')
});
```
### layer.loading()
Triggered when the layer or any of its sublayers are about to be loaded. This is also triggered when any properties are changed but not yet visible.
#### Example
```javascript
layer.on("loading", function() {
console.log("layer about to load");
});
layer.getSubLayer(0).set({
cartocss: "#export { polygon-opacity: 0; }"
});
```
### layer.load()
Triggered when the layer or its sublayers have been loaded. This is also triggered when any properties are changed and visible.
#### Example
```javascript
layer.on("load", function() {
console.log("layer loaded");
});
layer.getSubLayer(0).set({
cartocss: "#export { polygon-opacity: 0; }"
});
```
---
## subLayer
### sublayer.featureOver(_event, latlng, pos, data, layerIndex_)
Same as `layer.featureOver()` but sublayer specific.
#### Callback arguments
Same as `layer.featureOver()`.
### sublayer.featureClick(_event, latlng, pos, data, layerIndex_)
Same as `layer.featureClick()` but sublayer specific.
#### Callback arguments
Same as `layer.featureClick()`.
### sublayer.mouseover()
Same as `layer.mouseover()` but sublayer specific.
### sublayer.mouseout()
Same as `layer.mouseover()` but sublayer specific.
lib/assets/javascripts/cdb/doc/getting_started.md
+225
View File
@@ -0,0 +1,225 @@
# Getting Started
The simplest way to use a visualization created in CARTO on an external site is as follows:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
...
<div id="map"></div>
...
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
// get the viz.json url from the CARTO Editor
// - click on visualize
// - create new visualization
// - make visualization public
// - click on publish
// - go to API tab
window.onload = function() {
cartodb.createVis('map', 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json');
}
</script>
```
[Here is the complete example source code](https://github.com/CartoDB/cartodb.js/blob/v3/examples/easy.html)
## Using the CARTO.js Library
CARTO.js can be used to embed a visualization you have designed using CARTO's user interface, or to dynamically create visualizations from scratch, using your data. If you want to create new maps on your webpage, jump to [Creating a visualization from scratch](#creating-a-visualization-from-scratch). If you already have maps on your webpage and want to add CARTO visualizations to them, read [Adding CARTO layers to an existing map](#adding-carto-layers-to-an-existing-map).
You can also use the CARTO APIs to create visualizations programmatically. This can be useful when the visualizations react to user interactions. To read more about it, jump to [Creating visualizations at runtime](#creating-visualizations-at-runtime).
To start using CARTO.js, paste this piece of code within the HEAD tags of your HTML:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
```
### Other Mapping Libraries
We have also made it easy for you to build maps using the mapping library of your choice. Whether you are using [Leaflet](#leaflet-integration) or something else, our CARTO.js code remains the same. This makes our API documentation simple and straightforward. It also makes it easy for you to consistently develop, or maintain, multiple maps online.
_**Note:** CARTO.js automatically includes dependencies from other mapping libraries (such as Leaflet, jQuery, Mustache, Underscore, and so on). You do not have to manually include these libraries, or worry about other mapping library version control, when you are using CARTO.js. If you need to see which version of other mapping libraries are included, view the [vendor](https://github.com/CartoDB/cartodb.js/tree/3.15.9/vendor) folder for each CARTO.js release._
## Creating a Visualization from Scratch
This is the easiest way to quickly get a CARTO map onto your webpage. Use this method when there is no map in your application, and you want to add the visualization to hack over it. CARTO.js handles all the details of loading a map interface, basemap, and your CARTO visualization.
You can start by giving CARTO.js the DIV ID from your HTML where you want to place your map, and the viz.json URL of your visualization (which you can get from the [Publish your map](http://docs.carto.com/carto-editor/maps/#publish-and-share-your-map) options).
```javascript
cartodb.createVis('map', 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json');
```
That’s it! No need to create the map instance, insert controls, or load layers. CARTO.js takes care of this for you.
### VizJSON Support
The viz.json file tells CARTO.js all the information about your map, including the style you want to use for your data and the filters you want to apply with SQL. The viz.json file is served with each map you create in your CARTO account.
Although the viz.json file stores all your map settings, all these settings can be easily customized with CARTO.js. If you want to modify the result after instantiating your map with the viz.json, reference the CARTO.js API [available methods](#api-methods). For example, you can also use the returned layer to build more functionality (show/hide, click, hover, custom infowindows):
```javascript
cartodb.createVis('map', 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// when setInteraction is disabled featureOver is triggered
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
console.log(e, latlng, pos, data, layerNumber);
});
// you can get the native map to work with it
var map = vis.getNativeMap();
// now, perform any operations you need, e.g. assuming map is a L.Map object:
// map.setZoom(3);
// map.panTo([50.5, 30.5]);
});
```
**Tip:** You can download a viz.json from any visualization you have created and inspect it with a text editor, or view it in your browser if you have a JSON viewer. If you are unfamiliar with the JSON file format, view the [official JSON website](http://json.org/) for more information.
## Adding CARTO Layers to an Existing Map
In case you already have a map instantiated on your page, you can simply use the [createLayer](https://carto.com/docs/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback) method to add new CARTO layers to it. This is particularly useful when you have more things on your map apart from CARTO layers or you have an application where you want to integrate CARTO layers.
Below, you have an example using a previously instantiated Leaflet map.
```html
<div id="map_canvas"></div>
<script>
var map = new L.Map('map_canvas', {
center: [0,0],
zoom: 2
});
cartodb.createLayer(map, 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
//do stuff
})
.on('error', function(err) {
alert("some error occurred: " + err);
});
</script>
```
[Here is the complete example source code](https://github.com/CartoDB/cartodb.js/blob/v3/examples/leaflet.html)
## Creating Visualizations at Runtime
All CARTO services are available through the API, which basically means that you can create a new visualization without doing it before through CARTO Editor. This is particularly useful when you are modifying the visualization depending on user interactions that change the SQL to get the data or CartoCSS to style it. Although this method requires more programming skills, it provides all the flexibility you might need to create more dynamic visualizations.
When you create a visualization using the CARTO website, you automatically get a viz.json URL that defines it. When you want to create the visualization via JavaScript, you don't always have a viz.json. You will need to pass all the required parameters to the library so that it can create the visualization at runtime and display it on your map. It is pretty simple.
```javascript
// create a layer with 1 sublayer
cartodb.createLayer(map, {
user_name: 'username',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM table_name",
cartocss: '#table_name {marker-fill: #F0F0F0;}'
}]
})
.addTo(map) // add the layer to our map which already contains 1 sublayer
.done(function(layer) {
// create and add a new sublayer
layer.createSubLayer({
sql: "SELECT * FROM table_name limit 200",
cartocss: '#table_name {marker-fill: #F0F0F0;}'
});
// change the query for the first layer
layer.getSubLayer(0).setSQL("SELECT * FROM table_name limit 10");
});
```
Want more information? [See the complete list of API methods](https://carto.com/docs/carto-engine/carto-js/api-methods/#api-methods).
---
## Leaflet Integration
If you want to use [Leaflet](http://leafletjs.com), it gets even easier. CARTO.js handles loading all the [necessary libraries for you](http://docs.carto.com/carto-engine/carto-js/getting-started/#other-mapping-libraries)! Just include CartoDB.js and CartoDB.css in the HEAD of your website and you are ready to go! The CartoDB.css document is not mandatory. However, if you are making a map, and are not familiar with writing your own CSS for the various needed elements, it can help you jumpstart the process. Using Leaflet is as simple as adding the main JavaScript library:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
```
---
## HTTPS Support
You can use all the functionality of CARTO.js with HTTPs support. Be sure to use https when importing both the JS library and the CSS file. You will also need to use HTTPs in the viz.json URL you pass to `createVis` or `createLayer`.
```html
<div id="map"></div>
<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>
<script>
var map = new L.Map('map', {
center: [0,0],
zoom: 2
})
cartodb.createLayer(map, 'https://examples.carto.com/api/v1/viz/15589/viz.json', { https: true })
.addTo(map)
.on('error', function(err) {
alert("some error occurred: " + err);
});
</script>
```
## Using a Different Host
CARTO.js sends all requests to the carto.com domain by default. If you are running your own instance of CARTO, you can change the URLs to specify a different host.
A different host can be configured by using ``sql_api_template`` and ``maps_api_template`` in the ``options`` parameter
for any ``cartodb`` function call.
The format of these templates is as follows:
```javascript
sql_api_template: 'https://{user}.test.com'
```
CARTO.js will replace ``{user}``.
Note that you do not need to set the path to the endpoint, CARTO.js sets it automatically.
## Loading Listener Events
To async portions of the CARTO.js library, the [`createLayer`](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback) and [`createVis`](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartodbcreatevis) API Methods trigger two important listener events for you to take advantage of:
- **done**, tells your code that the library has successfully read the information from the viz.json, and loaded the layer you requested.
- **error**, tells you that something did not go as expected when trying to load the requested layer:
```javascript
cartodb.createLayer(map, 'http://examples.carto.com/api/v1/viz/0001/viz.json')
.addTo(map)
.on('done', function(layer) {
alert(‘CartoDB layer loaded!’);
}).on('error', function(err) {
alert("some error occurred: " + err);
});
```
**Note:** For information about active layer events, which are triggered by layers on your webpage that are already loaded, see [Events](http://docs.carto.com/carto-engine/carto-js/events/).
## CARTO.js Usage Examples
The best way to start learning about the library is by taking a look at some of the examples below:
+ An easy example using the library - ([view live](http://cartodb.github.com/carto.js/examples/v3/easy.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html)).
+ Leaflet integration - ([view live](http://cartodb.github.com/carto.js/examples/v3/leaflet.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/leaflet.html)).
+ Customizing infowindow data - ([view live](http://cartodb.github.com/carto.js/examples/v3/custom_infowindow.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/custom_infowindow.html)).
+ An example using a layer selector - ([view live](http://cartodb.github.com/carto.js/examples/v3/layer_selector.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/layer_selector.html)).
lib/assets/javascripts/cdb/doc/layer_source_object.md
+100
View File
@@ -0,0 +1,100 @@
# Layer Source Object
## Standard Layer Source Object (_type: 'cartodb'_)
Used for most maps with tables that are set to public or public with link.
#### Arguments
Layer Source Objects are defined with the [Layergroup Configurations](http://docs.carto.com/carto-engine/maps-api/mapconfig/#layergroup-configurations).
Name |Description
--- | ---
type | A string value that defines the layer type. Required.
options | Options vary, depending on the `type` of layer source you are using:
--- | ---
&#124;_ `mapnik`| See [Mapnik Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#mapnik-layer-options).
&#124;_ `cartodb` | An alias for Mapnik (for backward compatibility).
&#124;_ `torque` | See [Torque Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#torque-layer-options).
&#124;_ `http` | See [HTTP Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#http-layer-options).
&#124;_ `plain` | See [Plain Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#plain-layer-options).
&#124;_ `named` | See [Named Map Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#named-map-layer-options).
#### Example
```javascript
{
user_name: 'your_user_name', // Required
type: 'cartodb', // Required
sublayers: [{
sql: "SELECT * FROM table_name", // Required
cartocss: '#table_name {marker-fill: #F0F0F0;}', // Required
interactivity: "column1, column2, ...", // Optional
},
{
sql: "SELECT * FROM table_name", // Required
cartocss: '#table_name {marker-fill: #F0F0F0;}', // Required
interactivity: "column1, column2, ...", // Optional
},
...
]
}
```
For other layer source definitions, see [this example](https://github.com/CartoDB/cartodb.js/blob/4ba5148638091fd2c194f48b2fa3ed6ac4ecdb23/examples/layer_definition.html).
## Named Maps Layer Source Object (_type: 'namedmap'_)
Used for making public maps with private data. See [Named Maps](http://docs.carto.com/carto-engine/maps-api/named-maps/) for more information.
#### Example
```javascript
{
user_name: 'your_user_name', // Required
type: 'namedmap', // Required
named_map: {
name: 'name_of_map', // Required
// Optional
layers: [{
layer_name: "sublayer0", // Optional
interactivity: "column1, column2, ..." // Optional
},
{
layer_name: "sublayer1",
interactivity: "column1, column2, ..."
},
...
],
// Optional
params: {
color: "hex_value",
num: 2
}
}
}
```
## Multiple types of layers Source Object
`cartodb.createLayer` combining multiple types of layers and setting a filter
#### Example
```javascript
cartodb.createLayer(map, {
user_name: 'examples',
type: 'cartodb',
sublayers: [
{
type: "http",
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
},
{
sql: 'select * from country_boundaries',
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
},
],
}, { filter: ['http', 'mapnik'] })
```
lib/assets/javascripts/cdb/doc/metrics.md
+36
View File
@@ -0,0 +1,36 @@
# cartodb.js metrics
these are the metrics collected by cartodb.js. Can be printed in the browser opening a console and
executing
```
cartodb.core.Profiler.print_stats()
```
## layergroup stats
- **cartodb-js.layergroup.[type].time**: type can be get or post, depending on how the layergroup was fetch. It contains the time taken to fetch layergroup (including network time)
- **cartodb-js.layergroup.[type].error**: number of errors when fetching layergroup
**cartodb-js.layergroup.attributes.time**: time to fetch attributes (for example when an
infowindow is open)
**cartodb-js.layergroup.attributes.error**: fetching errors
**cartodb-js.named_map.attributes.time**: same than layergroup.attributes but for named maps
**cartodb-js.named_map.attributes.error**: fetching errors
## tiles stats
- **cartodb-js.tile.png.load.time**: time taken to load a *png* tile
- **cartodb-js.tile.png.error**: number of errors loading a png tile
## torque
- **torque.provider.windshaft.points**: number of points per tile
- **torque.provider.windshaft.process_time**: time used to process a tile. It does NOT include fetch
time
- **torque.provider.windshaft.tile.fetch**: time to fetch a torque tile
- **torque.provider.windshaft.tile.error**: failed tiles
- **torque.provider.windshaft.layergroup.time**: time to instanciate the map for torque tiles
- **torque.provider.windshaft.layergroup.error**:
- **torque.renderer.point.generateSprite**: time taken to generate a sprite based on css and point
properties
- **torque.renderer.point.renderLayers**: time to render all the layers for a tile
- **torque.renderer.point.renderTile**: time to render a tile
lib/assets/javascripts/cdb/doc/raster_howto.md
+83
View File
@@ -0,0 +1,83 @@
# how to use raster with cartodb.js
The way to add a raster layer to your map with cartodb.js is similar to add a regular cartodb layer,
as everything in CartoDB it uses ``SQL`` + ``CartoCSS``
## introduction to raster
In [mapschool](http://mapschool.io/) you have a very good introduction to the basis of raster. Here
we are going to explain how raster works in CartoDB.
Raster usually takes a lot of space in the database and therefore render tiles is a heavy task.
Luckily CartoDB solved this for you, when you import a raster using the editor or the [Import
API](http://docs.cartodb.com/cartodb-platform/import-api.html) it generates a series of overviews,
that's it, a bunch of tables with preprocessed information in order to speedup rendering.
You don't need to care about that but there are special cases you should be aware of when you create
a raster based visualization
## creating a layer
As always a layer is created using ``createLayer`` method:
```
cartodb.createLayer(map, {
user_name: 'doc',
type: 'cartodb',
sublayers: [{
sql: 'select * from pop',
cartocss: '#pop { raster-opacity: 1.0; }',
raster: true,
}]
})
.addTo(map)
```
The only special thing here is the ``raster`` flag, that tells Maps API that you are going to use a
raster table so all the optimizations and so on are enabled
## working the the layer
Change CartoCSS and so on it's the same than working with a regular layer, you can use methods like
``setCartoCSS``:
```
layer.getSubLayer(0).setCartoCSS('#layer {..... }');
```
You can also use ``setSQL`` but if you use a query different than the identity (select * from table)
the raster optimizations are not going to work and you will get a timeout depending on the zoom
level you are working on.
## using SQL for analysis
You can also access raster tables using SQL API through cartodb.js, the following example gets the
average value for a raster in a radius of 100 meters with center in latlng 0, 0
```
var sql = new cartodb.SQL({ user: 'doc' });
var query = "SELECT avg((stats).mean) as m from (select st_summarystats(the_raster_webmercator, 1) as stats from pop where st_intersects(the_raster_webmercator, st_transform(st_buffer(cdb_latlon(0, 0)::geography, 100)::geometry, 3857) as foo";
sql.execute(q).done(function(data) {
if (data.rows && data.rows.length > 0) {
console.log("Average raster value inside the " + type + ": " + data.rows[0].m);
}
```
don't forget to use ``the_raster_webmercator`` column.
## limitations
- changing the SQL to something custom could avoid Maps API to use overviews and not rendering the
tiles due to timeout
- cartocss version should be 2.3.0. You usually don't need to do anything but if you are working
with specific versions take this into account
- interaction does not work for rasters
lib/assets/javascripts/cdb/doc/sql.md
+93
View File
@@ -0,0 +1,93 @@
# Getting Data with SQL
CARTO offers a powerful SQL API for you to query and retreive data from your CARTO tables. CARTO.js offers a simple to use wrapper for sending those requests and using the results.
## cartodb.SQL
`cartodb.SQL` is the tool you will use to access data you store in your CARTO tables. This is a really powerful technique for returning things like: **items closest to a point**, **items ordered by date**, or **GeoJSON vector geometries**. It’s all powered with SQL and our tutorials will show you how easy it is to begin with SQL.
#### Arguments
Name | Description
--- | ---
format | should be GeoJSON.
dp | float precision.
jsonp | if jsonp should be used instead of CORS. This param is enabled if the browser does not support CORS.
These arguments will be applied to all the queries performed by this object. If you want to override them for one query see **execute** options.
#### Example
```javascript
var sql = new cartodb.SQL({ user: 'cartodb_user' });
sql.execute("SELECT * FROM table_name WHERE id > {{id}}", { id: 3 })
.done(function(data) {
console.log(data.rows);
})
.error(function(errors) {
// errors contains a list of errors
console.log("errors:" + errors);
})
```
## sql.execute(_sql [,vars][, options][, callback]_)
It executes a sql query.
#### Arguments
Name |Description
--- | ---
sql | a string with the sql query to be executed. You can specify template variables like {{variable}} which will be filled with `vars` object.
vars | a map with the variables to be interpolated in the sql query.
options | accepts `format`, `dp` and `jsonp`. This object also overrides the params passed to `$.ajax`.
#### Returns
A promise object. You can listen for the following events:
Events | Description
--- | ---
done | triggered when the data arrives.
error | triggered when something failed.
#### Example
You can also use done and error methods:
```javascript
sql.execute('SELECT * FROM table_name')
.done(fn)
.error(fnError)
```
## sql.getBounds(_sql [,vars][, options][, callback]_)
This query gets the bounding box for any dataset or filtered query using the CARTO.js library. The **getBounds** function is useful for guiding users to the right location on a map, or for loading the right data (at the right time), based on user actions.
Returns the bounds `[ [sw_lat, sw_lon], [ne_lat, ne_lon ] ]` for the geometry resulting of specified query.
#### Arguments
Name |Description
--- | ---
sql | a string with the sql query to calculate the bounds from.
#### Example
```javascript
sql.getBounds('select * from table').done(function(bounds) {
console.log(bounds);
});
```
### getBounds and Leaflet
You can use the results from `getBounds` to center data on your maps using Leaflet.
```javascript
sql.getBounds('select * from table').done(function(bounds) {
map.setBounds(bounds);
// or map.fitBounds(bounds, mapView.getSize());
});
```
lib/assets/javascripts/cdb/doc/static_maps.md
+213
View File
@@ -0,0 +1,213 @@
# Static Maps
Static views of CARTO maps can be generated using the [Static Maps API](https://carto.com/docs/carto-engine/maps-api/static-maps-api/) within CARTO.js. The map's style, including the zoom and bounding box, follows from what was set in the `viz.json` file, but you can change the zoom, center, and size of your image with a few lines of code. You can also change your basemap Images can be placed in specified DOM elements on your page, or you can generate a URL for the image.
## Quick Start
The easiest way to generate an image is by using the following piece of code, which generates is replaced by an `img` tag once run in an HTML file:
```javascript
<script>
var vizjson_url = 'https://documentation.carto.com/api/v2/viz/008b3ec6-02c3-11e4-b687-0edbca4b5057/viz.json';
cartodb.Image(vizjson_url)
.size(600, 400)
.center([-3.4, 44.2])
.zoom(4)
.write({ class: "thumb", id: "AwesomeMap" });
</script>
```
#### Result
```html
<img id="AwesomeMap" src="https://cartocdn-ashbu.global.ssl.fastly.net/documentation/api/v1/map/static/center/04430594691ff84a3fdac56259e5180b:1419270587670/4/-3.4/44.2/600/400.png" class="thumb">
```
### cartodb.Image(_layerSource[, options]_)
#### Arguments
Name |Description
--- | ---
layerSource | can be either a `viz.json` object or a [MapConfig object](https://carto.com/docs/carto-engine/maps-api/mapconfig#mapnik-layer-options).<br/><br/>**Note:** If defining an image through the MapConfig layer definition, you must set the `tiler_domain`, `tiler_port`, and `tiler_protocol`, as displayed in this [example](https://github.com/CartoDB/cartodb.js/blob/4ba5148638091fd2c194f48b2fa3ed6ac4ecdb23/examples/layer_definition.html). Otherwise the Static Image API tries to use your localhost to source the tiles and an error appears.
options |
--- | ---
&#124;_ basemap | change the basemap specified in the layer definition. Type: Object defining base map properties (see example below).
&#124;_ no_cdn | Disable CDN usage. Type: Boolean. Default: `false` (use CDN)
&#124;_ override_bbox | Override default of using the bounding box of the visualization. This is needed to use `Image.center` and `Image.zoom`. Type: Boolean. Default: `false` (use bounding box)
#### Returns
An `Image` object
#### Example
```javascript
<script>
var vizjson_url = 'https://documentation.carto.com/api/v2/viz/008b3ec6-02c3-11e4-b687-0edbca4b5057/viz.json';
var basemap = {
type: "http",
options: {
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
}
};
cartodb.Image(vizjson_url, {basemap: basemap})
.size(600, 400)
.center([0,0])
.write({ class: "thumb", id: "AwesomeMap" });
</script>
```
---
## cartodb.Image
### Image.size(_width, height_)
Sets the size of the image.
#### Arguments
Name |Description
--- | ---
width | the width of the resulting image in pixels
height | the height of the resulting image in pixels
#### Returns
An `Image` object
### Image.center(_latLng_)
Sets the center of the map.
#### Arguments
Name |Description
--- | ---
latLng | an array of the latitude and longitude of the center of the map. Example: `[40.4378271, -3.6795367]`
#### Returns
An `Image` object
### Image.zoom(_zoomLevel_)
Sets the zoom level of the static map. Must be used with the option `override_bbox: true` if not using `Image.center` or `Image.bbox`.
#### Arguments
Name |Description
--- | ---
zoomLevel | the zoom of the resulting static map. `zoomLevel` must be an integer in the range [0,24].
#### Returns
An `Image` object
### Image.bbox(_boundingBox_)
If you set `bbox`, `center` and `zoom` will be overridden.
#### Arguments
Name |Description
--- | ---
boundingBox | an array of coordinates making up the bounding box for your map. `boundingBox` takes the form: `[sw_lat, sw_lon, ne_lat, ne_lon]`.
#### Returns
An `Image` object
### Image.into(_HTMLImageElement_)
Inserts the image into the HTML DOM element specified.
#### Arguments
Name |Description
--- | ---
HTMLImageElement | the DOM element where your image is to be located.
#### Returns
An `Image` object
#### Example
```javascript
cartodb.Image(vizjson_url).into(document.getElementById('map_preview'))
```
### Image.write(_attributes_)
Adds an `img` tag in the same place script is executed. It's possible to specify a class name (`class`) and/or an id attribute (`id`) for the resulting image:
#### Arguments
Name |Description
--- | ---
class | the DOM class applied to the resulting `img` tag.
id | the DOM id applied to the resulting `img` tag.
src | path to a temporary image that acts as a placeholder while the static map is retrieved.
#### Returns
An `Image` object
#### Example
```javascript
<script>
cartodb.Image(vizjson_url)
.size(600, 400)
.center([-3.4, 44.2])
.zoom(10)
.write({ class: "thumb", id: "ImageHeader", src: 'spinner.gif' });
</script>
```
### Image.getUrl(_callback(err, url)_)
Gets the URL for the image requested.
#### Callback Arguments
Name |Description
--- | ---
err | error associated with the image request, if any.
url | URL of the generated image.
#### Returns
An `Image` object
#### Example
```javascript
<script>
cartodb.Image(vizjson_url)
.size(600, 400)
.getUrl(function(err, url) {
console.log('image url',url);
})
</script>
```
### Image.format(_format_)
Gets the URL for the image requested.
#### Arguments
Name |Description
--- | ---
format | image format of resulting image. One of `png` (default) or `jpg` (which have a quality of 85 dpi)
#### Returns
An `Image` object
lib/assets/javascripts/cdb/doc/ui_functions.md
+82
View File
@@ -0,0 +1,82 @@
# Specific UI Functions
There are a few functions in CARTO.js for creating, enabling, and disabling pieces of the user interface.
## vis.addOverlay(tooltip)
A tooltip is an infowindow that appears when you hover your mouse over a map feature with [`vis.addOverlay(options)`](http://docs.carto.com/carto-engine/carto-js/api-methods/#visaddoverlayoptions). A tooltip appears where the mouse cursor is located on the map. You can customize the position of how the tooltip appears by defining the position options.
#### Example
```javascript
var tooltip = vis.addOverlay({
type: 'tooltip',
template: '<p>{{variable}}</p>' // mustache template
width: 200,
position: 'bottom|right', // top, bottom, left and right are available
fields: [{ name: 'name', population: 'pop2005' }]
});
```
**Note:** If you are using `createLayer` for a map object that contains an enabled tooltip, you can disable the tooltip by applying the `false` value. See the [cartodb.createLayer(map, layerSource [, options] [, callback])](https://carto.com/docs/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback) `tooltip` description for how to enable/disable an interactive tooltip.
## vis.addOverlay(infobox)
Similar to a tooltip, an infobox displays a small box when you hover your mouse over a map feature. When viewing an infobox on a map, _the position of the infobox is fixed_, and always appears in the same position; depending on how you defined the position values for the infobox.
#### Example
```javascript
var infoBox = layer.leafletMap.viz.addOverlay({
type: 'infobox',
template: '<p>{{name_to_display}}</p>',
width: 200, // width of the box
position: 'bottom|right' // top, bottom, left and right are available
});
```
## cartodb.vis.Vis.addInfowindow(_map, layer, fields [, options]_)
Infowindows provide additional interactivity for your published map, controlled by layer events. It enables interaction and overrides the layer interactivity. A pop-up information window appears when a viewer clicks on a map feature.
#### Arguments
Option | Description
--- | ---
map | native map object or leaflet.
layer | cartodb layer (or sublayer).
fields | array of column names.<br /><br />**Note:** This tells CARTO what columns from your dataset should appear in your infowindow.
options |
--- | ---
&#124;_ infowindowTemplate | allows you to set the HTML of the template.
&#124;_templateType | indicates the type of template ([`Mustache` template](http://mustache.github.io/mustache.5.html) or `Underscore` template placeholders).
**Tip:** See [How can I use CARTO.js to create and style infowindows?](http://docs.carto.com/faqs/infowindows/#how-can-i-use-cartojs-to-create-and-style-infowindows) for an overview of how to create infowindows.
#### Returns
An infowindow object, see [sublayer.infowindow](http://docs.carto.com/carto-engine/carto-js/api-methods/#sublayerinfowindow)
#### Example
The following example displays how to enable infowindow interactivity with the "click" action. This is the default for infowindows.
{% highlight html %}
cartodb.vis.Vis.addInfowindow(map, sublayer, ['cartodb_id', 'lat', 'lon', 'name'],{
infowindowTemplate: $('#infowindow_template').html(),
templateType: 'mustache'
});
{% endhighlight %}
#### Example (Infowindow with Tooltip)
The following example displays how to enable infowindow interactivity with the mouse "hover" action. This is referred to as a tooltip, and is defined with [`vis.addOverlay`](http://docs.carto.com/carto-engine/carto-js/api-methods/#visaddoverlayoptions).
{% highlight html %}
layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: sublayer,
template: '<div class="cartodb-tooltip-content-wrapper"><img style="width: 100%" src={{_url}}>{{name}}, {{age}}, {{city}}, {{country}}</div>',
position: 'bottom|right',
fields: [{ name: 'name' }]
});
{% endhighlight %}
lib/assets/javascripts/cdb/doc/versions.md
+35
View File
@@ -0,0 +1,35 @@
# Versions
Be mindful of the CARTO.js version that you are using for development. For any live code, it is recommended to link directly to the tested CARTO.js version from your development environment. You can check the version of CARTO.js as follows:
## cartodb.VERSION
Returns the version of the library. It should be something such as, `3.0.1`.
## Persistent Version Hosting
CARTO is committed to making sure your website works as intended, no matter what changes in the future. As time progresses, it is expected that we will find more efficient, and useful, features to add to the library. Since we never want to break things that you have already developed, we provide versioned CARTO.js libraries. Regardless of the version, the library functionality will never unexpectedly change on you.
**Note:** It is recommended to always develop against the most recent version of CARTO.js:
```html
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
```
Anytime you wish to push a stable version of your site to the web, you can find the version of CARTO.js that you are using located in the first line of the library, or by running the following in your code:
```javascript
alert(cartodb.VERSION)
```
Once you know which version of CARTO.js you are using, you can point your site to that release. For example, if the current version of CARTO.js is 3.15.8, the URL would be:
```html
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15.8/cartodb.js"></script>
```
You can do the same for the CSS documents we provide:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15.8/themes/css/cartodb.css" />
```
lib/assets/javascripts/cdb/doc/vizjson_format.md
+220
View File
@@ -0,0 +1,220 @@
visjson
=======
This is the spec for visjson:
```
{
// required
// follows the http://semver.org/ style version number
"version": "0.1.0"
// optional
// default: [0, 0]
// [lat, lon] where map is placed when is loaded. If bounds is present it is ignored
"center": [0, 0],
// optional
// default: 4
"zoom": 4,
// optional
// default: null
// bounds the map show at the beginning. If center and/or zoom are present
// they are ignored
"bounds": [
[-1, -1], // sw lat, lon
[ 1, 1] // ne lat, lon
],
// optional
// visualization title
// default: ''
"title": ""
// optional
// visualization description
// default: ''
"description": ""
// optional
// visualization description
// default: ''
url: "http://javi.carto.com/tables/20343",
// mandatory
map_provider: "leaflet",
// optional
// default: []
// contains the layers
"layers": [
// xyz tiled
{
type: "tiled"
order: 0,
options: {
name: "CartoDB Flat Blue",
urlTemplate: "http://{s}.api.cartocdn.com/base-flatblue/{z}/{x}/{y}.png",
maxZoom: 10,
attribution: "©2013 CARTO <a href='https://carto.com' target='_blank'>Terms of use</a>",
},
},
// plain color layer
{
order: 0,
type: "background"
options: {
color: "#eeeeee",
image: "",
maxZoom: 28,
id: 59811,
},
},
// cartodb layer (deprecated)
{
type: 'cartodb',
order: 1,
options: {
type: "CartoDB",
active: true,
opacity: 0.99,
interactivity: "cartodb_id",
debug: false,
tiler_domain: "cartodb.com",
tiler_port: "443",
tiler_protocol: "https",
sql_domain: "cartodb.com",
sql_port: "443",
sql_protocol: "https",
extra_params: {
cache_policy: "persist",
cache_buster: 1364213207314
},
cdn_url: "",
auto_bound: false,
visible: true,
style_version: "2.1.1",
table_name: "counties_ny_export",
user_name: "javi",
query_wrapper: null
},
infowindow: {
fields: [{
name: "fips",
title: true,
position: 2
},
...
],
template_name: '...',
template: 'html template'
}
},
// layergroup
{
type: 'layergroup',
order: 1,
options: {
type: "CartoDBLayerGroup",
tiler_domain: "cartodb.com",
tiler_port: "443",
tiler_protocol: "https",
sql_domain: "cartodb.com",
sql_port: "443",
sql_protocol: "https",
user_name: "javi",
layerdefinition: see https://github.com/Vizzuality/Windshaft/wiki/Multilayer-API
},
infowindow: {
fields: [{
name: "fips",
title: true,
position: 2
},
...
],
template_name: '...',
template: 'html template'
}
},
// named-map
{
type: 'namedmap',
order: 1,
options: {
type: "namedmap",
tiler_domain: "cartodb.com",
tiler_port: "443",
tiler_protocol: "https",
user_name: "javi",
require_password: true/false,
cdn_url: {
http: "api.cartocdn.com",
https: "cartocdn.global.ssl.fastly.net"
},
named_map: {
name: 'test',
params: {
//template params
color: '#FFF',
other_var: 1
},
layers: [{
infowindow: '',
legend: '',
layer_name: 'name_of_layer',
interactivity: 'column1, column2, ...',
visible: true/false
}, {...}
],
stat_tag: "a5c626a0-a29f-11e4-bee0-010c4c326911"
},
}
},
// torque
{
type: 'torque',
order: XX,
options: {
stat_tag: "d4a5c7e4-4ad6-11e3-ab17-3085a9a9563c",
tiler_protocol: "http",
tiler_domain: "cartodb.com",
tiler_port: "80",
cdn_url: {
http: "api.cartocdn.com",
https: "cartocdn.global.ssl.fastly.net"
},
query: null,
table_name: "sensor_log_2013_10_27_12_01",
user_name: "javi", // CARTO username
cartocss: "valid cartocss",
named_map: { //if this key is present named_map is used, if not it means it's an anonymous map
name: 'test',
layer_index: 1, // layer_index inside Named Map
params: {
//template params
color: '#FFF',
other_var: 1
},
}
}
},
],
overlays: [{
type: 'zoom',
template: 'mustache template'
options: {
... other options
}
}],
}
```
lib/assets/javascripts/cdb/doc/vizjson_v3_format.md
+212
View File
@@ -0,0 +1,212 @@
# VizJSON v3
*Status: draft*
```javascript
{
// required
"version": "3.0.0"
// optional (default: [0, 0])
// [lat, lon] where map is placed when is loaded. It's ignored if bounds attribute is present.
"center": [0, 0],
// optional (default: 4)
"zoom": 4,
// optional (default: null)
// [[lat, lon], [lat, lon]] The bounds that the map show at the beginning. If center and/or zoom are present
// they are ignored
"bounds": [
[-1, -1], // sw lat, lon
[ 1, 1] // ne lat, lon
],
// optional (default: '')
// visualization title
"title": ""
// optional (default: '')
// visualization description
"description": ""
// mandatory, "leaflet" or "googlemaps"
map_provider: "leaflet",
// mandatory
legends: true,
// mandatory
scrollwheel: false,
// optional (default: null)
user : {
avatar_url: '<avatar url>',
fullname: '<user fullname>'
},
// optional (default: false)
vector: false,
// optional (default: [])
// contains the layers
"layers": [
// xyz tiled
{
type: "tiled"
order: 0,
options: {
attribution: "© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="http://cartodb.com/attributions#basemaps">CartoDB</a>",
labels: { url: "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png" },
minZoom: 0,
maxZoom: 10,
urlTemplate: "http://{s}.api.cartocdn.com/base-flatblue/{z}/{x}/{y}.png"
},
},
// plain color layer
{
order: 0,
type: "background"
options: {
base_type: "plain",
className: "plain",
color: "#eeeeee",
image: "",
maxZoom: 32,
type: "Plain"
},
},
// layergroup
{
type: 'layergroup',
options: {
attribution: "",
filter: "mapnik",
maps_api_template: "http://{user}.localhost.lan:8181",
sql_api_template: "http://{user}.localhost.lan:8080",
user_name: "javi",
layer_definition: see https://github.com/CartoDB/Windshaft/blob/master/doc/Multilayer-API.md
}
},
// named-map
{
type: 'namedmap',
order: 1,
options: {
type: "namedmap",
user_name: "javi",
attribution: "",
filter: "mapnik",
maps_api_template: "http://{user}.localhost.lan:8181",
sql_api_template: "http://{user}.localhost.lan:8080",
named_map: {
name: 'test',
stat_tag: "a5c626a0-a29f-11e4-bee0-010c4c326911",
params: {
//template params
color: '#FFF',
other_var: 1,
},
layers: [{
infowindow: '',
legend: '',
layer_name: 'name_of_layer',
interactivity: 'column1, column2, ...',
visible: true/false
}, {...}
],
},
}
},
// torque
{
type: 'torque',
order: 1,
sql: "select * from mytable",
cartocss: '/** torque visualization */ ...'
cartocss_version: '2.1.1',
legend: {
show_title: false,
template: "",
title: "",
type: "none",
visible: true
},
options: {
stat_tag: "d4a5c7e4-4ad6-11e3-ab17-3085a9a9563c",
table_name: "sensor_log_2013_10_27_12_01",
user_name: "javi",
visible: true,
named_map: { //if this key is present named_map is used, if not it means it's an anonymous map
name: 'tpl_test',
layer_index: 1, // layer_index inside Named Map
params: {
//template params
color: '#FFF',
other_var: 1
}
}
}
},
],
// optional (default: [])
overlays: [{
type: 'zoom',
template: 'mustache template'
options: {
... other options
}
}],
// mandatory
datasource: {
maps_api_template: "http://{user}.localhost.lan:8181",
stat_tag: "47f329b2-fd5e-11e5-a82a-080027880ca6",
user_name: "juanignaciosl"
},
// optional (default: [])
analyses: [
{
id: 'a1',
type: 'buffer',
params: { // These params depend on the analysis type
radio: 3000,
source: {
id: 'a0',
table_name: 'mytable',
type: 'source',
params: {
query: 'select * from mytable',
}
}
}
}
],
// optional (default: [])
widgets: [
{
id: "ecb84086-8ad6-4baf-88ae-b160f67e073b",
layer_id: "825c1f09-db33-46dc-a60a-3cee7f28fbcf",
options: { // These options depend on the widget type
aggregation: "count",
aggregation_column: "category_t",
column: "category_t",
sync_on_bbox_change: true,
sync_on_data_change: true
}
order: 1,
title: "Category category_t",
type: "category"
}
]
}
```
lib/assets/javascripts/cdb/docs/guides/01-getting-started.md
+225
View File
@@ -0,0 +1,225 @@
## Getting Started
The simplest way to use a visualization created in CARTO on an external site is as follows:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
...
<div id="map"></div>
...
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
// get the viz.json url from the CARTO Editor
// - click on visualize
// - create new visualization
// - make visualization public
// - click on publish
// - go to API tab
window.onload = function() {
cartodb.createVis('map', 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json');
}
</script>
```
[Here is the complete example source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html)
### Using the CARTO.js Library
CARTO.js can be used to embed a visualization you have designed using CARTO's user interface, or to dynamically create visualizations from scratch, using your data. If you want to create new maps on your webpage, jump to [Creating a visualization from scratch](#creating-a-visualization-from-scratch). If you already have maps on your webpage and want to add CARTO visualizations to them, read [Adding CARTO layers to an existing map](#adding-carto-layers-to-an-existing-map).
You can also use the CARTO APIs to create visualizations programmatically. This can be useful when the visualizations react to user interactions. To read more about it, jump to [Creating visualizations at runtime](#creating-visualizations-at-runtime).
To start using CARTO.js, paste this piece of code within the HEAD tags of your HTML:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
```
#### Other Mapping Libraries
We have also made it easy for you to build maps using the mapping library of your choice. Whether you are using [Leaflet](#leaflet-integration) or something else, our CARTO.js code remains the same. This makes our API documentation simple and straightforward. It also makes it easy for you to consistently develop, or maintain, multiple maps online.
_**Note:** CARTO.js automatically includes dependencies from other mapping libraries (such as Leaflet, jQuery, Mustache, Underscore, and so on). You do not have to manually include these libraries, or worry about other mapping library version control, when you are using CARTO.js. If you need to see which version of other mapping libraries are included, view the [vendor](https://github.com/CartoDB/cartodb.js/tree/3.15.9/vendor) folder for each CARTO.js release._
### Creating a Visualization from Scratch
This is the easiest way to quickly get a CARTO map onto your webpage. Use this method when there is no map in your application, and you want to add the visualization to hack over it. CARTO.js handles all the details of loading a map interface, basemap, and your CARTO visualization.
You can start by giving CARTO.js the DIV ID from your HTML where you want to place your map, and the viz.json URL of your visualization (which you can get from the [Publish your map](http://docs.carto.com/carto-editor/maps/#publish-and-share-your-map) options).
```javascript
cartodb.createVis('map', 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json');
```
That’s it! No need to create the map instance, insert controls, or load layers. CARTO.js takes care of this for you.
#### VizJSON Support
The viz.json file tells CARTO.js all the information about your map, including the style you want to use for your data and the filters you want to apply with SQL. The viz.json file is served with each map you create in your CARTO account.
Although the viz.json file stores all your map settings, all these settings can be easily customized with CARTO.js. If you want to modify the result after instantiating your map with the viz.json, reference the CARTO.js API [available methods](#api-methods). For example, you can also use the returned layer to build more functionality (show/hide, click, hover, custom infowindows):
```javascript
cartodb.createVis('map', 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// when setInteraction is disabled featureOver is triggered
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
console.log(e, latlng, pos, data, layerNumber);
});
// you can get the native map to work with it
var map = vis.getNativeMap();
// now, perform any operations you need, e.g. assuming map is a L.Map object:
// map.setZoom(3);
// map.panTo([50.5, 30.5]);
});
```
**Tip:** You can download a viz.json from any visualization you have created and inspect it with a text editor, or view it in your browser if you have a JSON viewer. If you are unfamiliar with the JSON file format, view the [official JSON website](http://json.org/) for more information.
### Adding CARTO Layers to an Existing Map
In case you already have a map instantiated on your page, you can simply use the [createLayer](https://carto.com/docs/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback) method to add new CARTO layers to it. This is particularly useful when you have more things on your map apart from CARTO layers or you have an application where you want to integrate CARTO layers.
Below, you have an example using a previously instantiated Leaflet map.
```html
<div id="map_canvas"></div>
<script>
var map = new L.Map('map_canvas', {
center: [0,0],
zoom: 2
});
cartodb.createLayer(map, 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
//do stuff
})
.on('error', function(err) {
alert("some error occurred: " + err);
});
</script>
```
[Here is the complete example source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/leaflet.html)
### Creating Visualizations at Runtime
All CARTO services are available through the API, which basically means that you can create a new visualization without doing it before through CARTO Editor. This is particularly useful when you are modifying the visualization depending on user interactions that change the SQL to get the data or CartoCSS to style it. Although this method requires more programming skills, it provides all the flexibility you might need to create more dynamic visualizations.
When you create a visualization using the CARTO website, you automatically get a viz.json URL that defines it. When you want to create the visualization via JavaScript, you don't always have a viz.json. You will need to pass all the required parameters to the library so that it can create the visualization at runtime and display it on your map. It is pretty simple.
```javascript
// create a layer with 1 sublayer
cartodb.createLayer(map, {
user_name: 'username',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM table_name",
cartocss: '#table_name {marker-fill: #F0F0F0;}'
}]
})
.addTo(map) // add the layer to our map which already contains 1 sublayer
.done(function(layer) {
// create and add a new sublayer
layer.createSubLayer({
sql: "SELECT * FROM table_name limit 200",
cartocss: '#table_name {marker-fill: #F0F0F0;}'
});
// change the query for the first layer
layer.getSubLayer(0).setSQL("SELECT * FROM table_name limit 10");
});
```
Want more information? [See the complete list of API methods](https://carto.com/docs/carto-engine/carto-js/api-methods/#api-methods).
---
### Leaflet Integration
If you want to use [Leaflet](http://leafletjs.com), it gets even easier. CARTO.js handles loading all the [necessary libraries for you](http://docs.carto.com/carto-engine/carto-js/getting-started/#other-mapping-libraries)! Just include CartoDB.js and CartoDB.css in the HEAD of your website and you are ready to go! The CartoDB.css document is not mandatory. However, if you are making a map, and are not familiar with writing your own CSS for the various needed elements, it can help you jumpstart the process. Using Leaflet is as simple as adding the main JavaScript library:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
```
---
### HTTPS Support
You can use all the functionality of CARTO.js with HTTPs support. Be sure to use https when importing both the JS library and the CSS file. You will also need to use HTTPs in the viz.json URL you pass to `createVis` or `createLayer`.
```html
<div id="map"></div>
<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>
<script>
var map = new L.Map('map', {
center: [0,0],
zoom: 2
})
cartodb.createLayer(map, 'https://examples.carto.com/api/v1/viz/15589/viz.json', { https: true })
.addTo(map)
.on('error', function(err) {
alert("some error occurred: " + err);
});
</script>
```
### Using a Different Host
CARTO.js sends all requests to the carto.com domain by default. If you are running your own instance of CARTO, you can change the URLs to specify a different host.
A different host can be configured by using ``sql_api_template`` and ``maps_api_template`` in the ``options`` parameter
for any ``cartodb`` function call.
The format of these templates is as follows:
```javascript
sql_api_template: 'https://{user}.test.com'
```
CARTO.js will replace ``{user}``.
Note that you do not need to set the path to the endpoint, CARTO.js sets it automatically.
### Loading Listener Events
To async portions of the CARTO.js library, the [`createLayer`](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback) and [`createVis`](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartodbcreatevis) API Methods trigger two important listener events for you to take advantage of:
- **done**, tells your code that the library has successfully read the information from the viz.json, and loaded the layer you requested.
- **error**, tells you that something did not go as expected when trying to load the requested layer:
```javascript
cartodb.createLayer(map, 'http://examples.carto.com/api/v1/viz/0001/viz.json')
.addTo(map)
.on('done', function(layer) {
alert(‘CartoDB layer loaded!’);
}).on('error', function(err) {
alert("some error occurred: " + err);
});
```
**Note:** For information about active layer events, which are triggered by layers on your webpage that are already loaded, see [Events](http://docs.carto.com/carto-engine/carto-js/events/).
### CARTO.js Usage Examples
The best way to start learning about the library is by taking a look at some of the examples below:
+ An easy example using the library - ([view live](http://cartodb.github.com/carto.js/examples/v3/easy.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html)).
+ Leaflet integration - ([view live](http://cartodb.github.com/carto.js/examples/v3/leaflet.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/leaflet.html)).
+ Customizing infowindow data - ([view live](http://cartodb.github.com/carto.js/examples/v3/custom_infowindow.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/custom_infowindow.html)).
+ An example using a layer selector - ([view live](http://cartodb.github.com/carto.js/examples/v3/layer_selector.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/layer_selector.html)).
lib/assets/javascripts/cdb/docs/guides/02-layer-source-object.md
+100
View File
@@ -0,0 +1,100 @@
## Layer Source Object
### Standard Layer Source Object (_type: 'cartodb'_)
Used for most maps with tables that are set to public or public with link.
##### Arguments
Layer Source Objects are defined with the [Layergroup Configurations](http://docs.carto.com/carto-engine/maps-api/mapconfig/#layergroup-configurations).
Name |Description
--- | ---
type | A string value that defines the layer type. Required.
options | Options vary, depending on the `type` of layer source you are using:
--- | ---
&#124;_ `mapnik`| See [Mapnik Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#mapnik-layer-options).
&#124;_ `cartodb` | An alias for Mapnik (for backward compatibility).
&#124;_ `torque` | See [Torque Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#torque-layer-options).
&#124;_ `http` | See [HTTP Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#http-layer-options).
&#124;_ `plain` | See [Plain Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#plain-layer-options).
&#124;_ `named` | See [Named Map Layer Options](http://docs.carto.com/carto-engine/maps-api/mapconfig/#named-map-layer-options).
##### Example
```javascript
{
user_name: 'your_user_name', // Required
type: 'cartodb', // Required
sublayers: [{
sql: "SELECT * FROM table_name", // Required
cartocss: '#table_name {marker-fill: #F0F0F0;}', // Required
interactivity: "column1, column2, ...", // Optional
},
{
sql: "SELECT * FROM table_name", // Required
cartocss: '#table_name {marker-fill: #F0F0F0;}', // Required
interactivity: "column1, column2, ...", // Optional
},
...
]
}
```
For other layer source definitions, see [this example](https://github.com/CartoDB/cartodb.js/blob/4ba5148638091fd2c194f48b2fa3ed6ac4ecdb23/examples/layer_definition.html).
### Named Maps Layer Source Object (_type: 'namedmap'_)
Used for making public maps with private data. See [Named Maps](http://docs.carto.com/carto-engine/maps-api/named-maps/) for more information.
##### Example
```javascript
{
user_name: 'your_user_name', // Required
type: 'namedmap', // Required
named_map: {
name: 'name_of_map', // Required
// Optional
layers: [{
layer_name: "sublayer0", // Optional
interactivity: "column1, column2, ..." // Optional
},
{
layer_name: "sublayer1",
interactivity: "column1, column2, ..."
},
...
],
// Optional
params: {
color: "hex_value",
num: 2
}
}
}
```
### Multiple types of layers Source Object
`cartodb.createLayer` combining multiple types of layers and setting a filter
##### Example
```javascript
cartodb.createLayer(map, {
user_name: 'examples',
type: 'cartodb',
sublayers: [
{
type: "http",
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
},
{
sql: 'select * from country_boundaries',
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
},
],
}, { filter: ['http', 'mapnik'] })
```
lib/assets/javascripts/cdb/docs/guides/03-events.md
+135
View File
@@ -0,0 +1,135 @@
## Events
You can bind custom functions to layer events by adding listeners and callbacks to the async portions of the CARTO.js library. Active layer events are triggered by layers on your webpage that are already loaded (**Tip:** these are the `createLayer` and `createVis` functions that return the _done_ event. For details, see [Loading Events](http://docs.carto.com/carto-engine/carto-js/getting-started/#loading-listener-events)). Each event requires the layer to include an **interactivity** layer. This is useful for integrating your website with your maps, adding events for mouseovers and click events.
**Note:** Be mindful of using these events, as these functions can get costly if you have a lot of features on a map.
### layer
#### layer.featureOver(_event, latlng, pos, data, layerIndex_)
Triggered when the user mouse hovers on any feature.
##### Callback arguments
Name |Description
--- | ---
event | Browser mouse event object.
latlng | Array with the `LatLng ([lat,lng])` where the layer was clicked.
pos | Object with x and y position in the DOM map element.
data | The CARTO data of the clicked feature with the `interactivity` param.
layerIndex | the `layerIndex` where the event happened.
##### Example
```javascript
layer.on('featureOver', function(e, latlng, pos, data, subLayerIndex) {
console.log("mouse over polygon with data: " + data);
});
```
#### layer.featureOut(_layerIndex_)
Triggered when the user hovers out any feature. For example, you might want to use this event if you highlight polygons on mouseover and need a way to know when to remove the highlighting after the mouse has left.
##### Example
```javascript
layer.on('featureOut', function(e, latlng, pos, data, layer) {
console.log("mouse left polygon with data: " + data);
});
```
#### layer.featureClick(_event, latlng, pos, data, layerIndex_)
Triggered when when the user clicks on a feature of a layer.
##### Example
```javascript
layer.on('featureClick', function(e, latlng, pos, data, layer) {
console.log("mouse clicked polygon with data: " + data);
});
```
##### Callback arguments
Same as `featureOver`.
#### layer.mouseover()
Triggered when the mouse enters in **any** feature. Useful to change the cursor while hovering.
#### layer.mouseout()
Triggered when the mouse leaves all the features. Useful to revert the cursor after hovering.
##### Example
```javascript
layer.on('mouseover', function() {
cursor.set('hand')
});
layer.on('mouseout', function() {
cursor.set('auto')
});
```
#### layer.loading()
Triggered when the layer or any of its sublayers are about to be loaded. This is also triggered when any properties are changed but not yet visible.
##### Example
```javascript
layer.on("loading", function() {
console.log("layer about to load");
});
layer.getSubLayer(0).set({
cartocss: "#export { polygon-opacity: 0; }"
});
```
#### layer.load()
Triggered when the layer or its sublayers have been loaded. This is also triggered when any properties are changed and visible.
##### Example
```javascript
layer.on("load", function() {
console.log("layer loaded");
});
layer.getSubLayer(0).set({
cartocss: "#export { polygon-opacity: 0; }"
});
```
---
### subLayer
#### sublayer.featureOver(_event, latlng, pos, data, layerIndex_)
Same as `layer.featureOver()` but sublayer specific.
##### Callback arguments
Same as `layer.featureOver()`.
#### sublayer.featureClick(_event, latlng, pos, data, layerIndex_)
Same as `layer.featureClick()` but sublayer specific.
##### Callback arguments
Same as `layer.featureClick()`.
#### sublayer.mouseover()
Same as `layer.mouseover()` but sublayer specific.
#### sublayer.mouseout()
Same as `layer.mouseover()` but sublayer specific.
lib/assets/javascripts/cdb/docs/guides/04-specific-UI-functions.md
+82
View File
@@ -0,0 +1,82 @@
## Specific UI Functions
There are a few functions in CARTO.js for creating, enabling, and disabling pieces of the user interface.
### vis.addOverlay(tooltip)
A tooltip is an infowindow that appears when you hover your mouse over a map feature with [`vis.addOverlay(options)`](http://docs.carto.com/carto-engine/carto-js/api-methods/#visaddoverlayoptions). A tooltip appears where the mouse cursor is located on the map. You can customize the position of how the tooltip appears by defining the position options.
##### Example
```javascript
var tooltip = vis.addOverlay({
type: 'tooltip',
template: '<p>{{variable}}</p>' // mustache template
width: 200,
position: 'bottom|right', // top, bottom, left and right are available
fields: [{ name: 'name', population: 'pop2005' }]
});
```
**Note:** If you are using `createLayer` for a map object that contains an enabled tooltip, you can disable the tooltip by applying the `false` value. See the [cartodb.createLayer(map, layerSource [, options] [, callback])](https://carto.com/docs/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback) `tooltip` description for how to enable/disable an interactive tooltip.
### vis.addOverlay(infobox)
Similar to a tooltip, an infobox displays a small box when you hover your mouse over a map feature. When viewing an infobox on a map, _the position of the infobox is fixed_, and always appears in the same position; depending on how you defined the position values for the infobox.
##### Example
```javascript
var infoBox = layer.leafletMap.viz.addOverlay({
type: 'infobox',
template: '<p>{{name_to_display}}</p>',
width: 200, // width of the box
position: 'bottom|right' // top, bottom, left and right are available
});
```
### cartodb.vis.Vis.addInfowindow(_map, layer, fields [, options]_)
Infowindows provide additional interactivity for your published map, controlled by layer events. It enables interaction and overrides the layer interactivity. A pop-up information window appears when a viewer clicks on a map feature.
##### Arguments
Option | Description
--- | ---
map | native map object or leaflet.
layer | cartodb layer (or sublayer).
fields | array of column names.<br /><br />**Note:** This tells CARTO what columns from your dataset should appear in your infowindow.
options |
--- | ---
&#124;_ infowindowTemplate | allows you to set the HTML of the template.
&#124;_templateType | indicates the type of template ([`Mustache` template](http://mustache.github.io/mustache.5.html) or `Underscore` template placeholders).
**Tip:** See [How can I use CARTO.js to create and style infowindows?](http://docs.carto.com/faqs/infowindows/#how-can-i-use-cartojs-to-create-and-style-infowindows) for an overview of how to create infowindows.
##### Returns
An infowindow object, see [sublayer.infowindow](http://docs.carto.com/carto-engine/carto-js/api-methods/#sublayerinfowindow)
##### Example
The following example displays how to enable infowindow interactivity with the "click" action. This is the default for infowindows.
{% highlight html %}
cartodb.vis.Vis.addInfowindow(map, sublayer, ['cartodb_id', 'lat', 'lon', 'name'],{
infowindowTemplate: $('#infowindow_template').html(),
templateType: 'mustache'
});
{% endhighlight %}
##### Example (Infowindow with Tooltip)
The following example displays how to enable infowindow interactivity with the mouse "hover" action. This is referred to as a tooltip, and is defined with [`vis.addOverlay`](http://docs.carto.com/carto-engine/carto-js/api-methods/#visaddoverlayoptions).
{% highlight html %}
layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: sublayer,
template: '<div class="cartodb-tooltip-content-wrapper"><img style="width: 100%" src={{_url}}>{{name}}, {{age}}, {{city}}, {{country}}</div>',
position: 'bottom|right',
fields: [{ name: 'name' }]
});
{% endhighlight %}
lib/assets/javascripts/cdb/docs/guides/05-getting-data-with-sql.md
+93
View File
@@ -0,0 +1,93 @@
## Getting Data with SQL
CARTO offers a powerful SQL API for you to query and retreive data from your CARTO tables. CARTO.js offers a simple to use wrapper for sending those requests and using the results.
### cartodb.SQL
`cartodb.SQL` is the tool you will use to access data you store in your CARTO tables. This is a really powerful technique for returning things like: **items closest to a point**, **items ordered by date**, or **GeoJSON vector geometries**. It’s all powered with SQL and our tutorials will show you how easy it is to begin with SQL.
##### Arguments
Name | Description
--- | ---
format | should be GeoJSON.
dp | float precision.
jsonp | if jsonp should be used instead of CORS. This param is enabled if the browser does not support CORS.
These arguments will be applied to all the queries performed by this object. If you want to override them for one query see **execute** options.
##### Example
```javascript
var sql = new cartodb.SQL({ user: 'cartodb_user' });
sql.execute("SELECT * FROM table_name WHERE id > {{id}}", { id: 3 })
.done(function(data) {
console.log(data.rows);
})
.error(function(errors) {
// errors contains a list of errors
console.log("errors:" + errors);
})
```
### sql.execute(_sql [,vars][, options][, callback]_)
It executes a sql query.
##### Arguments
Name |Description
--- | ---
sql | a string with the sql query to be executed. You can specify template variables like {{variable}} which will be filled with `vars` object.
vars | a map with the variables to be interpolated in the sql query.
options | accepts `format`, `dp` and `jsonp`. This object also overrides the params passed to `$.ajax`.
##### Returns
A promise object. You can listen for the following events:
Events | Description
--- | ---
done | triggered when the data arrives.
error | triggered when something failed.
##### Example
You can also use done and error methods:
```javascript
sql.execute('SELECT * FROM table_name')
.done(fn)
.error(fnError)
```
### sql.getBounds(_sql [,vars][, options][, callback]_)
This query gets the bounding box for any dataset or filtered query using the CARTO.js library. The **getBounds** function is useful for guiding users to the right location on a map, or for loading the right data (at the right time), based on user actions.
Returns the bounds `[ [sw_lat, sw_lon], [ne_lat, ne_lon ] ]` for the geometry resulting of specified query.
##### Arguments
Name |Description
--- | ---
sql | a string with the sql query to calculate the bounds from.
##### Example
```javascript
sql.getBounds('select * from table').done(function(bounds) {
console.log(bounds);
});
```
#### getBounds and Leaflet
You can use the results from `getBounds` to center data on your maps using Leaflet.
```javascript
sql.getBounds('select * from table').done(function(bounds) {
map.setBounds(bounds);
// or map.fitBounds(bounds, mapView.getSize());
});
```
lib/assets/javascripts/cdb/docs/guides/06-static-maps.md
+213
View File
@@ -0,0 +1,213 @@
## Static Maps
Static views of CARTO maps can be generated using the [Static Maps API](https://carto.com/docs/carto-engine/maps-api/static-maps-api/) within CARTO.js. The map's style, including the zoom and bounding box, follows from what was set in the `viz.json` file, but you can change the zoom, center, and size of your image with a few lines of code. You can also change your basemap Images can be placed in specified DOM elements on your page, or you can generate a URL for the image.
### Quick Start
The easiest way to generate an image is by using the following piece of code, which generates is replaced by an `img` tag once run in an HTML file:
```javascript
<script>
var vizjson_url = 'https://documentation.carto.com/api/v2/viz/008b3ec6-02c3-11e4-b687-0edbca4b5057/viz.json';
cartodb.Image(vizjson_url)
.size(600, 400)
.center([-3.4, 44.2])
.zoom(4)
.write({ class: "thumb", id: "AwesomeMap" });
</script>
```
##### Result
```html
<img id="AwesomeMap" src="https://cartocdn-ashbu.global.ssl.fastly.net/documentation/api/v1/map/static/center/04430594691ff84a3fdac56259e5180b:1419270587670/4/-3.4/44.2/600/400.png" class="thumb">
```
#### cartodb.Image(_layerSource[, options]_)
##### Arguments
Name |Description
--- | ---
layerSource | can be either a `viz.json` object or a [MapConfig object](https://carto.com/docs/carto-engine/maps-api/mapconfig#mapnik-layer-options).<br/><br/>**Note:** If defining an image through the MapConfig layer definition, you must set the `tiler_domain`, `tiler_port`, and `tiler_protocol`, as displayed in this [example](https://github.com/CartoDB/cartodb.js/blob/4ba5148638091fd2c194f48b2fa3ed6ac4ecdb23/examples/layer_definition.html). Otherwise the Static Image API tries to use your localhost to source the tiles and an error appears.
options |
--- | ---
&#124;_ basemap | change the basemap specified in the layer definition. Type: Object defining base map properties (see example below).
&#124;_ no_cdn | Disable CDN usage. Type: Boolean. Default: `false` (use CDN)
&#124;_ override_bbox | Override default of using the bounding box of the visualization. This is needed to use `Image.center` and `Image.zoom`. Type: Boolean. Default: `false` (use bounding box)
##### Returns
An `Image` object
##### Example
```javascript
<script>
var vizjson_url = 'https://documentation.carto.com/api/v2/viz/008b3ec6-02c3-11e4-b687-0edbca4b5057/viz.json';
var basemap = {
type: "http",
options: {
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
}
};
cartodb.Image(vizjson_url, {basemap: basemap})
.size(600, 400)
.center([0,0])
.write({ class: "thumb", id: "AwesomeMap" });
</script>
```
---
### cartodb.Image
#### Image.size(_width, height_)
Sets the size of the image.
##### Arguments
Name |Description
--- | ---
width | the width of the resulting image in pixels
height | the height of the resulting image in pixels
##### Returns
An `Image` object
#### Image.center(_latLng_)
Sets the center of the map.
##### Arguments
Name |Description
--- | ---
latLng | an array of the latitude and longitude of the center of the map. Example: `[40.4378271, -3.6795367]`
##### Returns
An `Image` object
#### Image.zoom(_zoomLevel_)
Sets the zoom level of the static map. Must be used with the option `override_bbox: true` if not using `Image.center` or `Image.bbox`.
##### Arguments
Name |Description
--- | ---
zoomLevel | the zoom of the resulting static map. `zoomLevel` must be an integer in the range [0,24].
##### Returns
An `Image` object
#### Image.bbox(_boundingBox_)
If you set `bbox`, `center` and `zoom` will be overridden.
##### Arguments
Name |Description
--- | ---
boundingBox | an array of coordinates making up the bounding box for your map. `boundingBox` takes the form: `[sw_lat, sw_lon, ne_lat, ne_lon]`.
##### Returns
An `Image` object
#### Image.into(_HTMLImageElement_)
Inserts the image into the HTML DOM element specified.
##### Arguments
Name |Description
--- | ---
HTMLImageElement | the DOM element where your image is to be located.
##### Returns
An `Image` object
##### Example
```javascript
cartodb.Image(vizjson_url).into(document.getElementById('map_preview'))
```
#### Image.write(_attributes_)
Adds an `img` tag in the same place script is executed. It's possible to specify a class name (`class`) and/or an id attribute (`id`) for the resulting image:
##### Arguments
Name |Description
--- | ---
class | the DOM class applied to the resulting `img` tag.
id | the DOM id applied to the resulting `img` tag.
src | path to a temporary image that acts as a placeholder while the static map is retrieved.
##### Returns
An `Image` object
##### Example
```javascript
<script>
cartodb.Image(vizjson_url)
.size(600, 400)
.center([-3.4, 44.2])
.zoom(10)
.write({ class: "thumb", id: "ImageHeader", src: 'spinner.gif' });
</script>
```
#### Image.getUrl(_callback(err, url)_)
Gets the URL for the image requested.
##### Callback Arguments
Name |Description
--- | ---
err | error associated with the image request, if any.
url | URL of the generated image.
##### Returns
An `Image` object
##### Example
```javascript
<script>
cartodb.Image(vizjson_url)
.size(600, 400)
.getUrl(function(err, url) {
console.log('image url',url);
})
</script>
```
#### Image.format(_format_)
Gets the URL for the image requested.
##### Arguments
Name |Description
--- | ---
format | image format of resulting image. One of `png` (default) or `jpg` (which have a quality of 85 dpi)
##### Returns
An `Image` object
lib/assets/javascripts/cdb/docs/guides/07-core-API-functionality.md
+77
View File
@@ -0,0 +1,77 @@
## Core API Functionality
In case you are not using Leaflet, or you want to implement your own layer object, CARTO provides a way to get the tiles url for a layer definition.
If you want to use this functionality, you only need to load cartodb.core.js from our cdn. No CSS is needed:
```html
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
```
An example using this functionality can be found in a ModestMaps example: [view live](http://cartodb.github.com/cartodb.js/examples/modestmaps.html) / [source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/modestmaps.html).
Notice that `cartodb.SQL` is also included in that JavaScript file
---
### cartodb.Tiles
#### cartodb.Tiles.getTiles(_layerOptions, callback_)
Fetch the tile template for the layer definition.
##### Arguments
Name |Description
--- | ---
layerOptions | the data that defines the layer. It should contain at least `user_name` and `sublayers` list.
options |
--- | ---
&#124;_ user_name |
&#124;_ sublayers |
&#124;_ maps_api_template |
callback(tilesUrl, error) | a function that recieves the tiles templates. In case of an error, the first param is null and the second one will be an object with an errors attribute that contains the list of errors.
##### Example
In this example, a layer with one sublayer is created. The sublayer renders all the content from a table.
```javascript
var layerData = {
user_name: 'username',
sublayers: [{
sql: "SELECT * FROM table_name";
cartocss: '#layer { marker-fill: #F0F0F0; }'
}],
maps_api_template: 'https://{username}.carto.com' // Optional
};
cartodb.Tiles.getTiles(layerData, function(tilesUrl, error) {
if (tilesUrl == null) {
console.log("error: ", error.errors.join('\n'));
return;
}
console.log("url template is ", tilesUrl.tiles[0]);
}
```
The `tilesUrl` object contains url template for tiles and interactivity grids:
```javascript
{
tiles: [
"http://{s}.carto.com/HASH/{z}/{x}/{y}.png",
...
],
grids: [
// for each sublayer there is one entry on this array
[
"http://{s}.carto.com/HASH/0/{z}/{x}/{y}.grid.json"
],
[
"http://{s}.carto.com/HASH/1/{z}/{x}/{y}.grid.json"
],
...
]
}
```
lib/assets/javascripts/cdb/docs/guides/08-how-to-use-raster-with-carto-JS.md
View File
lib/assets/javascripts/cdb/docs/guides/09-metrics.md
+35
View File
@@ -0,0 +1,35 @@
## cartodb.js metrics
these are the metrics collected by cartodb.js. Can be printed in the browser opening a console and
executing
```
cartodb.core.Profiler.print_stats()
```
### layergroup stats
- **cartodb-js.layergroup.[type].time**: type can be get or post, depending on how the layergroup was fetch. It contains the time taken to fetch layergroup (including network time)
- **cartodb-js.layergroup.[type].error**: number of errors when fetching layergroup
**cartodb-js.layergroup.attributes.time**: time to fetch attributes (for example when an
infowindow is open)
**cartodb-js.layergroup.attributes.error**: fetching errors
**cartodb-js.named_map.attributes.time**: same than layergroup.attributes but for named maps
**cartodb-js.named_map.attributes.error**: fetching errors
### tiles stats
- **cartodb-js.tile.png.load.time**: time taken to load a *png* tile
- **cartodb-js.tile.png.error**: number of errors loading a png tile
### torque
- **torque.provider.windshaft.points**: number of points per tile
- **torque.provider.windshaft.process_time**: time used to process a tile. It does NOT include fetch
time
- **torque.provider.windshaft.tile.fetch**: time to fetch a torque tile
- **torque.provider.windshaft.tile.error**: failed tiles
- **torque.provider.windshaft.layergroup.time**: time to instanciate the map for torque tiles
- **torque.provider.windshaft.layergroup.error**:
- **torque.renderer.point.generateSprite**: time taken to generate a sprite based on css and point
properties
- **torque.renderer.point.renderLayers**: time to render all the layers for a tile
- **torque.renderer.point.renderTile**: time to render a tile
lib/assets/javascripts/cdb/docs/reference/01-API-methods.md
+551
View File
@@ -0,0 +1,551 @@
This documentation is intended for developers and describes specific methods from the [latest version](https://github.com/CartoDB/cartodb.js/releases) of the CARTO.js library.
## cartodb.createVis
### cartodb.createVis(_map_id, vizjson_url[, options] [, callback]_)
Creates a visualization inside the map_id DOM object.
#### Arguments
Name |Description
--- | ---
map_id | a DOM object, for example `$('#map')` or a DOM id.
vizjson_url | url of the vizjson object.
options |
--- | ---
&#124;_ shareable | add facebook and twitter share buttons.
&#124;_ title | adds a header with the title of the visualization.
&#124;_ description | adds description to the header (as you set in the UI).
&#124;_ search | adds a search control (default: true).
&#124;_ zoomControl | adds zoom control (default: true).
&#124;_ loaderControl | adds loading control (default: true).
&#124;_ center_lat | latitude where the map is initializated.
&#124;_ center_lon | longitude where the map is initializated.
&#124;_ zoom | initial zoom.
&#124;_ cartodb_logo | default to true, set to false if you want to remove the CARTO logo.
&#124;_ infowindow | set to false if you want to disable the infowindow (enabled by default).
&#124;_ time_slider | show an animated time slider with Torque layers. This option is enabled by default, as shown with `time_slider: true` value. To disable the time slider, use `time_slider: false`. See [No Torque Time Slider - Example Code](http://bl.ocks.org/michellechandra/081ca7160a8c782266d2) for an example.<br/><br/> For details about customizing the time slider, see the [Torque.js](https://carto.com/docs/carto-engine/torque/torque-time-slider/) documentation.
&#124;_ layer_selector | show layer selector (default: false).
&#124;_ legends | if it's true legends are shown in the map.
&#124;_ https | if true, it makes sure that basemaps are converted to https when possible. If explicitly false, converts https maps to http when possible. If undefined, the basemap template is left as declared at `urlTemplate` in the viz.json.
&#124;_ scrollwheel | enable/disable the ability of zooming using scrollwheel (default enabled)
&#124;_ fullscreen | if true adds a button to toggle the map fullscreen
&#124;_ mobile_layout | if true enables a custom layout for mobile devices (default: false)
&#124;_ force_mobile | forces enabling/disabling the mobile layout (it has priority over mobile_layout argument)
&#124;_ gmaps_base_type | Use Google Maps as map provider whatever is the one specified in the viz.json". Available types: 'roadmap', 'gray_roadmap', 'dark_roadmap', 'hybrid', 'satellite', 'terrain'.
&#124;_ gmaps_style | Google Maps styled maps. See [documentation](https://developers.google.com/maps/documentation/javascript/styling).
&#124;_ no_cdn | true to disable CDN when fetching tiles
callback(vis,layers) | if a function is specified, it is called once the visualization is created, passing vis and layers as arguments
#### Returns
A promise object. You can listen for the following events:
Event | Description
--- | ---
done | triggered when the visualization is created, `vis` is passed as the first argument and `layers` is passed as the second argument. Each layer type has different options, see layers section.
error | triggered when the layer couldn't be created. The error string is the first argument.
#### Example
```javascript
var url = 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
cartodb.createVis('map', url)
.done(function(vis, layers) {
});
```
---
## cartodb.Vis
### vis.getLayers()
Returns an array of layers in the map. The first is the base layer.
### vis.addOverlay(_options_)
Adds an overlay to the map that can be either a tooltip or an infobox.
#### Arguments
Option | Description
--- | ---
layer | layer from the visualization where the overlay should be applied (optional)
type | - tooltip (an infowindow that appears when you hover your mouse over a map feature)<br /><br /> - infobox (similar to a tooltip but always appears in the same fixed position that you define)
If no layer is provided, the overlay will be added to the first layer of the visualization. Extra options are available based on the [specific UI function](https://carto.com/docs/carto-engine/carto-js/ui-functions/).
#### Returns
An overlay object, see [vis.Overlays](#visoverlays).
#### Example (Infowindow with Tooltip)
The following example displays how to enable infowindow interactivity with the mouse "hover" action. The hover action is referred to as a tooltip, and enables you to control the positioning.
{% highlight html %}
layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: sublayer,
template: '<div class="cartodb-tooltip-content-wrapper"><img style="width: 100%" src={{_url}}>{{name}}, {{age}}, {{city}}, {{country}}</div>',
position: 'bottom|right',
fields: [{ name: 'name' }]
});
{% endhighlight %}
**Tip:** For a description of the infowindow specific parameters, see [`cartodb.vis.Vis.addInfowindow(_map, layer, fields [, options]_)`](https://carto.com/docs/carto-engine/carto-js/ui-functions/#cartodbvisvisaddinfowindowmap-layer-fields--options). Optionally, you can also use the `cartodb.vis.Vis.addInfowindow` function to define the click action for an infowindow.
### vis.getOverlay(_type_)
Returns the first overlay with the specified **type**.
#### Example
```javascript
var zoom = vis.getOverlay('zoom');
```
### vis.getOverlays()
Returns a list of the overlays that are currently on the screen (see overlays description).
### vis.getNativeMap()
Returns the native map object being used (e.g. a `L.Map` object for Leaflet).
### vis.Overlays
An overlay is a control shown on top of the map.
Overlay objects are always created using the `addOverlay` method of a `cartodb.Vis` object.
An overlay is internally a [Backbone.View](http://backbonejs.org/#View) so if you know how Backbone works you can use it. If you want to use plain DOM objects you can access `overlay.el` (`overlay.$el` for jQuery object).
## cartodb.createLayer(_map, layerSource [, options] [, callback]_)
With visualizations already created through the CARTO console, you can simply use the `createLayer` function to add them into your web pages. Unlike `createVis`, this method requires an already activated `map` object and it does not load a basemap for you.
#### Arguments
Name |Description
--- | ---
map | Leaflet `L.Map` object. The map should be initialized before calling this function.
layerSource | contains information about the layer. It can be specified in multiple ways<br/><br/>**Tip:** See [Multiple types of layers Source Object](http://docs.carto.com/carto-engine/carto-js/layer-source-object/#multiple-types-of-layers-source-object)
options |
--- | ---
&#124;_ https | loads the layer as HTTPS. True forces the layer to load. See [HTTPS support](https://carto.com/docs/carto-engine/carto-js/getting-started/#https-support) for example code.
&#124;_ refreshTime | if set, the layer is auto refreshed in milliseconds. See a refreshTime code [example](https://github.com/CartoDB/cartodb.js/blob/develop/examples/createLayer_refresh_time.html).<br/><br/>**Tip:** To refresh and display the latest data in seconds, include the seconds after the defined milliseconds in the code (i.e., `refreshTime: 2000 // 2 seconds`).
&#124;_ infowindow | set to false if you want to disable the infowindow (enabled by default). For details, see [Creating an infowindow with the `createLayer()` function](http://docs.carto.com/faqs/infowindows/#creating-an-infowindow-with-the-createlayer-function).
&#124;_ tooltip | set to false if you want to disable the tooltip (enabled by default). This option is specific for when you create a map using the CARTO Editor, and have enabled the tooltip [(infowindow hover)](http://docs.carto.com/carto-editor/maps/#infowindows) option. This option disables the tooltip in createLayer.<br/><br/>See a tooltip code [example](https://github.com/CartoDB/cartodb.js/blob/develop/examples/createLayer_custom_tooltip.html).
&#124;_ legends | set to true to show legends in the map. For an example, see this [CARTO.js example with legends disabled](https://github.com/CartoDB/cartodb.js/blob/develop/examples/createLayer_noLegend.html).
&#124;_ time_slider | show an animated time slider with Torque layers. This option is enabled by default, as shown with `time_slider: true` value. To disable the time slider, use `time_slider: false`. See a Torque Time Slider code [example](https://github.com/CartoDB/cartodb.js/blob/develop/examples/torque_time_slider.html).<br/><br/> For details about customizing the time slider, see the [Torque.js](http://docs.carto.com/carto-engine/torque/torque-time-slider/) documentation.
&#124;_ loop | a boolean object that defines the animation loop with Torque layers. Default value is `true`. If `false`, the animation is paused when it reaches the last frame. For details about Torque, see the [Torque.js](http://docs.carto.com/carto-engine/torque-js/) documentation.
&#124;_ layerIndex | when the visualization contains more than one layer this index allows you to select what layer is created. Take into account that `layerIndex == 0` is the base layer and that all the tiled layers (non animated ones) are merged into a single one. The default value for this option is 1 (usually tiled layers).<br/><br/>See [`layer.featureOver(_event, latlng, pos, data, layerIndex_`)](http://docs.carto.com/carto-engine/carto-js/events/#layerfeatureoverevent-latlng-pos-data-layerindex) for details about binding functions to layer events.
&#124;_ filter | A string, or array of values, that specifies the type(s) of sublayers to be rendered if you are using multiple types of layer source objects (eg: `['http', 'mapnik')](http://docs.carto.com/carto-engine/maps-api/mapconfig/#layergroup-configurations). All non-torque layers (http and mapnik) will be rendered if this option is not present.<br/><br/>See a createLayer filter [example](http://docs.carto.com/carto-engine/carto-js/layer-source-object/#multiple-types-of-layers-source-object).
&#124;_ no_cdn | set to true to disable CDN when fetching tiles. For a complete example of this code, see ["odyssey_test.html"](https://github.com/CartoDB/cartodb.js/blob/2983b2fdcef914afdb1f4fdae173471143930452/examples/odyssey_test.html).
callback(_layer_) | if a function is specified, it will be invoked after the layer has been created. The layer will be passed as an argument.<br/><br/> See the [example of loading multiple layers from CARTO in a Leaflet Map](https://github.com/CartoDB/cartodb.js/blob/develop/examples/callback_layer.html).
### Passing the url where the layer data is located
```javascript
cartodb.createLayer(map, 'http://myserver.com/layerdata.json')
```
### Passing the data directly
```javascript
cartodb.createLayer(map, { layermetadata })
```
#### Returns
A promise object. You can listen for the following events:
Events | Description
--- | ---
done | triggered when the layer is created, the layer is passed as first argument. Each layer type has different options, see layers section.
error | triggered when the layer couldn't be created. The error string is the first argument.
You can call to `addTo(map[, position])` in the promise so when the layer is ready it will be added to the map.
#### Example
`cartodb.createLayer` using a url
```javascript
var map;
var mapOptions = {
zoom: 5,
center: [43, 0]
};
map = new L.Map('map', mapOptions);
cartodb.createLayer(map, 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
layer
.on('featureOver', function(e, latlng, pos, data) {
console.log(e, latlng, pos, data);
})
.on('error', function(err) {
console.log('error: ' + err);
});
}).on('error', function(err) {
console.log("some error occurred: " + err);
});
```
Layer metadata must take one of the forms of the [Layer Source Object](http://docs.carto.com/carto-engine/carto-js/layer-source-object/).
---
## cartodb.CartoDBLayer
CartoDBLayer allows you to manage tiled layers from CARTO, and manage sublayers.
### layer.clear()
Clears the layer. It should be invoked after removing the layer from the map.
### layer.hide()
Hides the layer from the map.
### layer.show()
Shows the layer in the map if it was previously added.
### layer.toggle()
Toggles the visibility of the layer and returns a boolean that indicates the new status (true if the layer is shown, false if it is hidden)
### layer.setOpacity(_opacity_)
Changes the opacity of the layer.
#### Arguments
Name |Description
--- | ---
opacity | value in range [0, 1]
### layer.getSubLayer(_layerIndex_)
Gets a previously created sublayer. And exception is raised if no sublayer exists.
#### Arguments
Name |Description
--- | ---
layerIndex | 0 based index of the sublayer to get. Should be within [0, getSubLayerCount())
#### Returns
A `SubLayer` object.
#### Example
```javascript
layer.getSubLayer(1).hide();
var sublayer = layer.getSubLayer(0);
sublayer.setSQL('SELECT * FROM table_name limit 10');
```
### layer.getSubLayerCount()
Gets the number of sublayers in layer.
#### Returns
The number of sublayers.
#### Example
Hide layers using `layer.getSubLayerCount`
```javascript
var num_sublayers = layer.getSubLayerCount();
for (var i = 0; i < num_sublayers; i++) {
layer.getSubLayer(i).hide();
}
```
### layer.createSubLayer(_layerDefinition_)
Adds a new data to the current layer. With this method, data from multiple tables can be easily visualized.
#### Arguments
Name |Description
--- | ---
layerDefinition | an object with the sql and cartocss that defines the data, should be like
```javascript
{
sql: "SELECT * FROM table_name",
cartocss: "#layer { marker-fill: red; }",
interactivity: 'cartodb_id, area, column' // optional
}
```
`sql` and `cartocss` are mandatory. An exception is raised if either of them are not present. If the interactivity is not set, there is no interactivity enabled for that layer (better performance). SQL and CartoCSS syntax should be correct. View the documentation for [PostgreSQL](http://www.postgresql.org/docs/9.3/interactive/sql-syntax.html) and [CartoCSS](http://docs.carto.com/carto-engine/cartocss/) for more information. There are some restrictions in the SQL queries:
- Must not write. INSERT, DELETE, UPDATE, ALTER and so on are not allowed (the query will fail)
- Must not contain trailing semicolon
#### Returns
A `SubLayer` object.
#### Example
```javascript
cartodb.createLayer(map, 'http://examples.carto.com/api/v2/viz/european_countries_e/viz.json', function(layer) {
// add populated places points over the countries layer
layer.createSubLayer({
sql: 'SELECT * FROM ne_10m_populated_places_simple',
cartocss: '#layer { marker-fill: red; }'
});
}).addTo(map);
```
### layer.invalidate()
Refreshes the data. If the data has been changed in the CARTO server those changes will be displayed. Nothing happens otherwise. Every time a parameter is changed in a sublayer, the layer is refreshed automatically, so there's no need to call this method manually.
### layer.setAuthToken(_auth_token_)
Sets the auth token that will be used to create the layer. Only available for private visualizations. An exception is
raised if the layer is not being loaded with HTTPS. See [Named Maps](https://carto.com/docs/carto-engine/maps-api/named-maps/) for more information.
#### Arguments
Name |Description
--- | ---
auth_token | string
#### Returns
The layer itself.
### layer.setParams(_key, value_)
Sets the configuration of a layer when using [Named Maps](https://carto.com/docs/carto-engine/maps-api/named-maps/). It can be invoked in different ways.
**Note:** This function is not supported when using Named Maps for Torque.
#### Arguments
Name |Description
--- | ---
key | string
value | string or number
#### Returns
The layer itself.
#### Example
```javascript
layer.setParams('test', 10); // sets test = 10
layer.setParams('test', null); // unset test
layer.setParams({'test': 1, 'color': '#F00'}); // set more than one parameter at once
```
### layer.setSQL()
Sets the 'sql' request to the user database that will create the layer from the fetched data
### layer.setCartoCSS()
Sets the 'cartocss' attribute that will render the tiles to create the layer, based on the specified CartoCSS style
---
## cartodb.SubLayerBase
### sublayer.set(_layerDefinition_)
Sets sublayer parameters. Useful when more than one parameter needs to be changed.
#### Arguments
Name |Description
--- | ---
layerDefinition | an object with the sql and cartocss that defines the data
#### Returns
The layer itself.
#### Example
```javascript
sublayer.set({
sql: "SELECT * FROM table_name WHERE cartodb_id < 100",
cartocss: "#layer { marker-fill: red }",
interactivity: "cartodb_id, the_geom, magnitude"
});
```
### sublayer.get(_attr_)
Gets the attribute for the sublayer, for example 'sql', 'cartocss'.
#### Returns
The requested attribute or `undefined` if it's not present.
### sublayer.remove()
Removes the sublayer. An exception will be thrown if a method is called and the layer has been removed.
### sublayer.show()
Shows a previously hidden sublayer. The layer is refreshed after calling this function.
### sublayer.hide()
Removes the sublayer from the layer temporarily. The layer is refreshed after calling this function.
### sublayer.toggle()
Toggles the visibility of the sublayer and returns a boolean that indicates the new status (`true` if the sublayer is visible, `false` if it is hidden)
### sublayer.isVisible()
It returns `true` if the sublayer is visible.
## cartodb.CartoDBSubLayer
_This is a subclass of [`cartodb.SubLayerBase`](#cartodbsublayerbase)._
### sublayer.getSQL()
Shortcut for `get('sql')`
### sublayer.getCartoCSS()
Shortcut for `get('cartocss')`
### sublayer.setSQL(_sql_)
Shortcut for `set({'sql': 'SELECT * FROM table_name'})`
### sublayer.setCartoCSS(_css_)
Shortcut for `set({'cartocss': '#layer {...}' })`
### sublayer.setInteractivity(_'cartodb_id, name, ...'_)
Shortcut for `set({'interactivity': 'cartodb_id, name, ...' })`
Sets the columns which data will be available via the interaction with the sublayer.
### sublayer.setInteraction(_true_)
Enables (`true`) or disables (`false`) the interaction of the layer. When disabled, **featureOver**, **featureClick**, **featureOut**, **mouseover** and **mouseout** are **not** triggered.
#### Arguments
Name |Description
--- | ---
enable | `true` if the interaction needs to be enabled.
### sublayer.infowindow
`sublayer.infowindow` is a Backbone model where we modify the parameters of the [infowindow](https://carto.com/docs/carto-engine/carto-js/ui-functions/#cartodbvisvisaddinfowindowmap-layer-fields--options).
#### Attributes
Name | Description
--- | ---
template | Custom HTML template for the infowindow. You can write simple HTML or use [Mustache templates](http://mustache.github.com/).
sanitizeTemplate | By default all templates are sanitized from unsafe tags/attrs (e.g. `<script>`), set this to `false` to skip sanitization, or a function to provide your own sanitization (e.g. `function(inputHtml) { return inputHtml })`).
width | Width of the infowindow (value must be a number).
maxHeight | Max height of the scrolled content (value must be a number).
**Tip:** If you are customizing your infowindow with CARTO.js, reference the [CSS library](https://github.com/CartoDB/cartodb.js/tree/develop/themes/css/infowindow) for the latest stylesheet code.
#### Example
```html
<div id="map"></div>
<script>
sublayer.infowindow.set({
template: $('#infowindow_template').html(),
width: 218,
maxHeight: 100
});
</script>
<script type="infowindow/html" id="infowindow_template">
<span> custom </span>
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<img style="width: 100%" src="http://rambo.webcindario.com/images/18447755.jpg"></src>
<!-- content.data contains the field info -->
<h4>{{content.data.name}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
```
[Here is the complete example source code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/custom_infowindow.html)
---
## cartodb.HttpSubLayer
_This is a subclass of [`cartodb.SubLayerBase`](#cartodbsublayerbase)._
### sublayer.setURLTemplate(_urlTemplate_)
Shortcut for `set({'urlTemplate': 'http://{s}.example.com/{z}/{x}/{y}.png' })`
### sublayer.setSubdomains(_subdomains_)
Shortcut for `set({'subdomains': ['a', 'b', '...'] })`
### sublayer.setTms(_tms_)
Shortcut for `set({'tms': true|false })`
### sublayer.getURLTemplate
Shortcut for `get('urlTemplate')`
### sublayer.getSubdomains
Shortcut for `get('subdomains')`
### sublayer.getTms
Shortcut for `get('tms')`
### sublayer.legend
`sublayer.legend` is a Backbone model with the information about the legend.
#### Attributes
Name | Description
--- | ---
template | Custom HTML template for the legend. You can write simple HTML.
title | Title of the legend.
show_title | Set this to `false` if you don't want the title to be displayed.
items | An array with the items that are displayed in the legend.
visible | Set this to `false` if you want to hide the legend.
lib/assets/javascripts/cdb/docs/reference/02-vizjson-format.md
+219
View File
@@ -0,0 +1,219 @@
## Vizjson
This is the spec for visjson:
```
{
// required
// follows the http://semver.org/ style version number
"version": "0.1.0"
// optional
// default: [0, 0]
// [lat, lon] where map is placed when is loaded. If bounds is present it is ignored
"center": [0, 0],
// optional
// default: 4
"zoom": 4,
// optional
// default: null
// bounds the map show at the beginning. If center and/or zoom are present
// they are ignored
"bounds": [
[-1, -1], // sw lat, lon
[ 1, 1] // ne lat, lon
],
// optional
// visualization title
// default: ''
"title": ""
// optional
// visualization description
// default: ''
"description": ""
// optional
// visualization description
// default: ''
url: "http://javi.carto.com/tables/20343",
// mandatory
map_provider: "leaflet",
// optional
// default: []
// contains the layers
"layers": [
// xyz tiled
{
type: "tiled"
order: 0,
options: {
name: "CartoDB Flat Blue",
urlTemplate: "http://{s}.api.cartocdn.com/base-flatblue/{z}/{x}/{y}.png",
maxZoom: 10,
attribution: "©2013 CARTO <a href='https://carto.com' target='_blank'>Terms of use</a>",
},
},
// plain color layer
{
order: 0,
type: "background"
options: {
color: "#eeeeee",
image: "",
maxZoom: 28,
id: 59811,
},
},
// cartodb layer (deprecated)
{
type: 'cartodb',
order: 1,
options: {
type: "CartoDB",
active: true,
opacity: 0.99,
interactivity: "cartodb_id",
debug: false,
tiler_domain: "cartodb.com",
tiler_port: "443",
tiler_protocol: "https",
sql_domain: "cartodb.com",
sql_port: "443",
sql_protocol: "https",
extra_params: {
cache_policy: "persist",
cache_buster: 1364213207314
},
cdn_url: "",
auto_bound: false,
visible: true,
style_version: "2.1.1",
table_name: "counties_ny_export",
user_name: "javi",
query_wrapper: null
},
infowindow: {
fields: [{
name: "fips",
title: true,
position: 2
},
...
],
template_name: '...',
template: 'html template'
}
},
// layergroup
{
type: 'layergroup',
order: 1,
options: {
type: "CartoDBLayerGroup",
tiler_domain: "cartodb.com",
tiler_port: "443",
tiler_protocol: "https",
sql_domain: "cartodb.com",
sql_port: "443",
sql_protocol: "https",
user_name: "javi",
layerdefinition: see https://github.com/Vizzuality/Windshaft/wiki/Multilayer-API
},
infowindow: {
fields: [{
name: "fips",
title: true,
position: 2
},
...
],
template_name: '...',
template: 'html template'
}
},
// named-map
{
type: 'namedmap',
order: 1,
options: {
type: "namedmap",
tiler_domain: "cartodb.com",
tiler_port: "443",
tiler_protocol: "https",
user_name: "javi",
require_password: true/false,
cdn_url: {
http: "api.cartocdn.com",
https: "cartocdn.global.ssl.fastly.net"
},
named_map: {
name: 'test',
params: {
//template params
color: '#FFF',
other_var: 1
},
layers: [{
infowindow: '',
legend: '',
layer_name: 'name_of_layer',
interactivity: 'column1, column2, ...',
visible: true/false
}, {...}
],
stat_tag: "a5c626a0-a29f-11e4-bee0-010c4c326911"
},
}
},
// torque
{
type: 'torque',
order: XX,
options: {
stat_tag: "d4a5c7e4-4ad6-11e3-ab17-3085a9a9563c",
tiler_protocol: "http",
tiler_domain: "cartodb.com",
tiler_port: "80",
cdn_url: {
http: "api.cartocdn.com",
https: "cartocdn.global.ssl.fastly.net"
},
query: null,
table_name: "sensor_log_2013_10_27_12_01",
user_name: "javi", // CARTO username
cartocss: "valid cartocss",
named_map: { //if this key is present named_map is used, if not it means it's an anonymous map
name: 'test',
layer_index: 1, // layer_index inside Named Map
params: {
//template params
color: '#FFF',
other_var: 1
},
}
}
},
],
overlays: [{
type: 'zoom',
template: 'mustache template'
options: {
... other options
}
}],
}
```
lib/assets/javascripts/cdb/docs/support/01-versions.md
+35
View File
@@ -0,0 +1,35 @@
## Versions
Be mindful of the CARTO.js version that you are using for development. For any live code, it is recommended to link directly to the tested CARTO.js version from your development environment. You can check the version of CARTO.js as follows:
### cartodb.VERSION
Returns the version of the library. It should be something such as, `3.0.1`.
### Persistent Version Hosting
CARTO is committed to making sure your website works as intended, no matter what changes in the future. As time progresses, it is expected that we will find more efficient, and useful, features to add to the library. Since we never want to break things that you have already developed, we provide versioned CARTO.js libraries. Regardless of the version, the library functionality will never unexpectedly change on you.
**Note:** It is recommended to always develop against the most recent version of CARTO.js:
```html
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
```
Anytime you wish to push a stable version of your site to the web, you can find the version of CARTO.js that you are using located in the first line of the library, or by running the following in your code:
```javascript
alert(cartodb.VERSION)
```
Once you know which version of CARTO.js you are using, you can point your site to that release. For example, if the current version of CARTO.js is 3.15.8, the URL would be:
```html
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15.8/cartodb.js"></script>
```
You can do the same for the CSS documents we provide:
```html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15.8/themes/css/cartodb.css" />
```
lib/assets/javascripts/cdb/docs/support/02-support-options.md
+13
View File
@@ -0,0 +1,13 @@
## Support Options
*CartoDB.js v3.15* is **no longer being actively developed**. Major bugs will be addressed as needed.
You can check out the new release of *CARTO.js v4* in the [documentation](https://carto.com/developers/carto-js/) and its [support options](https://carto.com/developers/carto-js/support/support-options/).
However, if you feel stuck, there are many ways to find help.
* Ask a question on [GIS StackExchange](https://gis.stackexchange.com/questions/tagged/carto) using the `CARTO` tag.
* [Report an issue](https://github.com/CartoDB/carto.js/issues) in Github.
* Enterprise Plan customers have additional access to enterprise-level support through CARTO's support representatives.
If you just want to describe an issue or share an idea, just <a class="typeform-share" href="https://cartohq.typeform.com/to/mH6RRl" data-mode="popup" target="blank"> send your feedback</a><script>(function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>.
lib/assets/javascripts/cdb/docs/support/03-contribute.md
+5
View File
@@ -0,0 +1,5 @@
## Contribute
*CartoDB.js v3.15* is **no longer being actively developed**. Major bugs will be addressed as needed.
You can check out the new release of *CARTO.js v4* in the [documentation](https://carto.com/developers/carto-js/) and how to [contribute](https://carto.com/developers/carto-js/support/contribute/).
lib/assets/javascripts/cdb/examples/TheHobbitLocations/css/reset.css
+32
View File
@@ -0,0 +1,32 @@
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
ul{list-style:none;}
a:focus {outline:none;}
input:focus {outline:none;}
lib/assets/javascripts/cdb/examples/TheHobbitLocations/css/style.css
+220
View File
@@ -0,0 +1,220 @@
@font-face {
font-family: 'robotoregular';
src: url('../fonts/roboto-regular-webfont.eot');
src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto-regular-webfont.woff') format('woff'),
url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
background-color: #99BDBC;
}
div#map{
position: absolute;
z-index: 0;
bottom: 0;
top: 0;
right: 0;
left: 350px;
background-color: #99BDBC;
}
div#overlay{
position: absolute;
z-index: 2;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: url(../img/overlay.png) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progrid:DXImageTransform.Microsoft.AlphaImage(src='.../img/overlay.png', sizingMethod='scale');
-ms-filter: "progrid:DXImageTransform.Microsoft.AlphaImage(src='../img/overlay.png', sizingMethod='scale')";
pointer-events: none;
}
div#leftBkg{
background: url(../img/leftBkg.png) repeat-y;
width: 619px;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
pointer-events: none;
}
div.left{
position: absolute;
left: 60px;
top: 60px;
z-index: 3;
}
div.left div#title{
width: 428px;
height: 195px;
background: url(../img/title.png) no-repeat;
}
div.left p{
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
font-size: 17px;
width: 320px;
margin: 30px 0 0 10px;
opacity: .5;
}
div.left p a,
div.left p a:visited{
color:#000;
}
div.left div#legendBox{
background: url(../img/legendBullets.png) 0 0 no-repeat;
margin: 30px 0 0 10px;
}
div.left div#legendBox ul li{
list-style: none;
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
font-size: 15px;
margin: 7px 0 0 22px;
opacity: .5;
}
div.cartodb_tooltip {
position: absolute;
z-index: 5;
display: none;
}
div.cartodb_tooltip p {
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
font-size: 15px;
color: #333;
text-shadow:
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF,
1px 1px 0 #FFF;
}
/*SYLES FOR THE CUSTOM INFOWINDOW*/
div.cartodb-popup {
background: none;
width: 240px;
padding: 0;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-moz-border-radius-toplleft: 4px;
border-top-left-radius: 4px;
box-shadow: 0 0 9px rgba(0,0,0,0.4);
}
div.cartodb-popup a.cartodb-popup-close-button{
top: -12px;
right: -13px;
}
div.cartodb-popup div.cartodb-popup-content-wrapper{
padding: 0;
width: 240px;
max-width: none;
background: none;
background-color: #FFF;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-moz-border-radius-toplleft: 4px;
border-top-left-radius: 4px;
}
div.cartodb-popup div.cartodb-popup-cont{
width: 248px;
max-width: none;
max-height: none;
}
div.cartodb-popup div.cartodb-popup-cont h4{
font-family: Times New Roman, Times, serif;
font-size: 25px;
color:#FFF;
position: absolute;
text-transform: none;
font-weight: normal;
z-index: 5px;
top:98px;
left: 14px;
text-shadow: 0 1px 0 #000;
letter-spacing: -1px;
}
div.cartodb-popup div.cartodb-popup-cont a.videoButton{
background: url(../img/videoButton.png) 0 0 no-repeat;
width: 20px;
height: 17px;
position: absolute;
z-index: 6px;
top:105px;
right: 14px;
}
div.cartodb-popup div.cartodb-popup-cont a.videoButton:hover{
background: url(../img/videoButton.png) 0 -17px no-repeat;
}
div.cartodb-popup div.cartodb-popup-cont p{
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
font-size: 14px;
padding: 12px 15px 0 15px;
opacity: .5;
}
div.cartodb-popup div.cartodb-popup-tip-container{
background: none;
background-color: #FFF;
width: 240px;
height: 15px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomlleft: 4px;
border-bottom-left-radius: 4px;
margin-bottom: 10px;
}
div.cartodb-popup div.cartodb-popup-tip-container::after {
position: absolute;
bottom: -10px;
left: 26px;
content: '';
border: 5px solid white;
border-color: white transparent transparent white;
width: 0;
height: 0;
z-index: 1;
}
div.cartodb-infobox {
bottom:35px!important;
font-family: "Helvetica",Arial;
}
div.cartodb-infobox h3 {
color:#333333;
font-size:15px;
}
div.cartodb-infobox p {
display:block;
margin:10px 0 0 0;
color:#788787;
font-size:13px;
line-height:16px;
}
lib/assets/javascripts/cdb/examples/TheHobbitLocations/fonts/roboto-regular-webfont.eot
Executable
BIN
View File
Binary file not shown.
lib/assets/javascripts/cdb/examples/TheHobbitLocations/fonts/roboto-regular-webfont.svg
Executable
+247
View File
@@ -0,0 +1,247 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata></metadata>
<defs>
<font id="robotoregular" horiz-adv-x="1164" >
<font-face units-per-em="2048" ascent="1536" descent="-512" />
<missing-glyph horiz-adv-x="509" />
<glyph unicode="&#xfb01;" horiz-adv-x="1140" d="M28 936v146h170v117q0 182 106.5 282t295.5 100q67 0 132 -15.5t153 -45.5l-34 -160q-53 21 -113 36t-123 15q-117 0 -168.5 -52t-51.5 -160v-117h215v-146h-215v-936h-197v936h-170zM783 0v1082h198v-1082h-198z" />
<glyph horiz-adv-x="2048" />
<glyph horiz-adv-x="2048" />
<glyph unicode="&#xd;" horiz-adv-x="509" />
<glyph horiz-adv-x="0" />
<glyph unicode="&#x9;" horiz-adv-x="0" />
<glyph unicode=" " horiz-adv-x="509" />
<glyph unicode="&#x09;" horiz-adv-x="509" />
<glyph unicode="&#xa0;" horiz-adv-x="509" />
<glyph unicode="!" horiz-adv-x="539" d="M171 0v204h198v-204h-198zM171 478v978h197v-978h-197z" />
<glyph unicode="&#x22;" horiz-adv-x="733" d="M126 936l1 240v280h197v-270l-101 -250h-97zM435 936v520h198v-270l-101 -250h-97z" />
<glyph unicode="#" horiz-adv-x="1276" d="M70 410v140h264l68 348h-256v142h284l82 416h151l-82 -416h255l82 416h151l-82 -416h199v-142h-226l-68 -348h219v-140h-247l-80 -410h-152l80 410h-255l-80 -410h-151l80 410h-236zM485 550h255l68 348h-255z" />
<glyph unicode="$" horiz-adv-x="1193" d="M131 424l2 5h190q0 -154 78 -219.5t190 -65.5q129 0 201.5 61.5t72.5 170.5q0 90 -63.5 153.5t-210.5 113.5q-202 61 -305 163t-103 272q0 165 95 269t261 125v221h158v-222q167 -22 259.5 -137t92.5 -308h-196q0 127 -63 206t-174 79q-118 0 -177 -61.5t-59 -168.5 q0 -97 61 -157t219 -114q204 -66 303 -164.5t99 -267.5q0 -172 -103 -273.5t-283 -120.5v-192h-157v191q-172 18 -282 125.5t-106 315.5z" />
<glyph unicode="%" horiz-adv-x="1498" d="M104 1099v77q0 127 82 214t219 87t219 -86.5t82 -214.5v-77q0 -127 -81.5 -213t-217.5 -86q-138 0 -220.5 86t-82.5 213zM250 1099q0 -74 40.5 -125.5t116.5 -51.5q73 0 113 51t40 126v77q0 74 -40.5 126.5t-114.5 52.5q-75 0 -115 -52.5t-40 -126.5v-77zM349 177 l711 1138l109 -67l-711 -1138zM809 279v78q0 127 82 213.5t219 86.5q136 0 218.5 -86.5t82.5 -213.5v-78q0 -128 -82 -214t-217 -86q-138 0 -220.5 86t-82.5 214zM955 279q0 -75 40.5 -126.5t116.5 -51.5q73 0 113 51.5t40 126.5v78q0 74 -41 126t-114 52q-74 0 -114.5 -52 t-40.5 -126v-78z" />
<glyph unicode="&#x26;" horiz-adv-x="1276" d="M64 392q0 122 70.5 213.5t210.5 183.5q-78 99 -116 176.5t-38 159.5q0 169 97.5 260.5t268.5 91.5q158 0 257 -91t99 -219q0 -98 -52.5 -169.5t-155.5 -146.5l-109 -80l340 -409q41 65 64 144t23 167h176q0 -132 -39 -244t-113 -201l185 -223l-2 -5h-229l-85 102 q-80 -60 -177 -91.5t-201 -31.5q-217 0 -345.5 115t-128.5 298zM261 392q0 -113 71 -186t206 -73q72 0 142 24.5t132 70.5l-361 435l-40 -29q-91 -68 -120.5 -130t-29.5 -112zM388 1127q0 -53 27 -110.5t81 -125.5l138 95q57 38 77.5 82.5t20.5 98.5q0 61 -48.5 108 t-126.5 47q-81 0 -125 -56.5t-44 -138.5z" />
<glyph unicode="'" horiz-adv-x="445" d="M126 951l1 265v240h197v-223l-101 -282h-97z" />
<glyph unicode="(" horiz-adv-x="679" d="M132 582v9q0 394 159 673t334 372l6 -1l38 -116q-137 -107 -238.5 -343t-101.5 -583v-13q0 -347 101 -583t239 -352l-38 -108h-6q-175 93 -334 371.5t-159 673.5z" />
<glyph unicode=")" horiz-adv-x="687" d="M6 -355q135 105 237.5 345.5t102.5 589.5v13q0 342 -105.5 583.5t-234.5 351.5l38 108h6q174 -93 333.5 -372t159.5 -673v-9q0 -395 -159.5 -673.5t-333.5 -371.5h-6z" />
<glyph unicode="*" horiz-adv-x="884" d="M88 763l49 154l236 -90l-10 254h161l-10 -260l233 89l48 -156l-242 -68l153 -200l-132 -96l-140 218l-135 -210l-133 92l158 206z" />
<glyph unicode="+" horiz-adv-x="1162" d="M78 605v178h402v423h197v-423h399v-178h-399v-459h-197v459h-402z" />
<glyph unicode="," horiz-adv-x="404" d="M48 -258l70 316v163h197v-173l-150 -306h-117z" />
<glyph unicode="-" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
<glyph unicode="." horiz-adv-x="548" d="M161 0v202h197v-202h-197z" />
<glyph unicode="/" horiz-adv-x="850" d="M16 -125l608 1581h167l-607 -1581h-168z" />
<glyph unicode="0" horiz-adv-x="1153" d="M113 514v428q0 245 125.5 390t336.5 145q212 0 338.5 -145t126.5 -390v-428q0 -247 -125.5 -391t-337.5 -144q-211 0 -337.5 144t-126.5 391zM310 474q0 -157 70.5 -249t196.5 -92q128 0 197 91.5t69 249.5v509q0 157 -70 248t-198 91q-127 0 -196 -91t-69 -248v-509z " />
<glyph unicode="1" horiz-adv-x="1153" d="M195 1271v152l515 54v-1477h-198v1274z" />
<glyph unicode="2" horiz-adv-x="1153" d="M138 1052q-5 178 119 301.5t337 123.5q195 0 307 -108t112 -279q0 -115 -63.5 -225t-193.5 -276l-367 -430l2 -5h663v-154h-904v135l457 545q122 148 165.5 235.5t43.5 176.5q0 101 -59 165.5t-163 64.5q-129 0 -196.5 -79t-67.5 -197h-190z" />
<glyph unicode="3" horiz-adv-x="1153" d="M120 378l2 6h188q0 -106 76.5 -178.5t197.5 -72.5q120 0 189 74.5t69 194.5q0 137 -63.5 205t-199.5 68h-162v153h162q132 0 186.5 65.5t54.5 183.5q0 110 -59.5 177.5t-176.5 67.5q-114 0 -188.5 -70.5t-74.5 -176.5h-188l-3 6q-5 164 124 280t330 116q203 0 318 -102.5 t115 -301.5q0 -102 -53.5 -186t-149.5 -131q110 -44 167.5 -133.5t57.5 -216.5q0 -200 -126.5 -313.5t-328.5 -113.5q-186 0 -327.5 109.5t-136.5 289.5z" />
<glyph unicode="4" horiz-adv-x="1153" d="M72 336v111l613 1009h208v-966h201v-154h-201v-336h-196v336h-625zM283 490h414v683l-6 1l-19 -50z" />
<glyph unicode="5" horiz-adv-x="1153" d="M157 377l2 6h178q0 -119 68.5 -184.5t177.5 -65.5q125 0 194 88t69 241q0 139 -69.5 225t-193.5 86q-116 0 -168 -35t-77 -108l-163 17l84 809h729v-175h-563l-47 -419q47 35 104 57.5t130 23.5q202 2 316.5 -126.5t114.5 -352.5q0 -219 -117.5 -352t-342.5 -133 q-185 0 -308 101t-118 297z" />
<glyph unicode="6" horiz-adv-x="1153" d="M137 552v335q0 256 145.5 423t358.5 167q86 0 170 -17t139 -43l-42 -151q-57 25 -120 40.5t-147 15.5q-137 0 -222.5 -117t-85.5 -296v-113q61 61 144.5 96t179.5 35q188 0 297.5 -126t109.5 -331q0 -224 -122.5 -357.5t-330.5 -133.5q-202 0 -338 153.5t-136 419.5z M333 533q0 -185 80.5 -292.5t197.5 -107.5q123 0 189.5 93.5t66.5 243.5q0 142 -71.5 226t-201.5 84q-93 0 -159.5 -39.5t-101.5 -106.5v-101z" />
<glyph unicode="7" horiz-adv-x="1153" d="M97 1301v155h966v-155q-276 -328 -373 -579t-97 -563v-159h-197v159q0 330 121.5 594.5t351.5 547.5h-772z" />
<glyph unicode="8" horiz-adv-x="1153" d="M102 400q0 123 76.5 217t206.5 138q-112 42 -177 128.5t-65 200.5q0 191 122.5 292t319.5 101q186 0 305.5 -101.5t119.5 -291.5q0 -114 -64 -200.5t-170 -129.5q124 -43 199 -137t75 -217q0 -201 -130.5 -311t-332.5 -110q-214 0 -349.5 110t-135.5 311zM299 404 q0 -123 80.5 -197t207.5 -74q114 0 190.5 74.5t76.5 196.5q0 119 -77.5 196t-191.5 77q-124 0 -205 -77t-81 -196zM340 1081q0 -111 70 -180t177 -69q97 0 161.5 69t64.5 180q0 105 -65.5 173t-162.5 68q-107 0 -176 -65.5t-69 -175.5z" />
<glyph unicode="9" horiz-adv-x="1153" d="M93 978q0 220 127 359.5t314 139.5q218 0 350 -137t132 -387v-442q0 -251 -144 -391.5t-371 -140.5q-77 0 -157.5 16t-150.5 47l30 150q66 -32 129.5 -45.5t148.5 -13.5q142 0 229.5 98t87.5 278v124q-48 -71 -119.5 -107.5t-156.5 -36.5q-210 0 -329.5 129.5 t-119.5 359.5zM290 978q0 -150 66 -242.5t186 -92.5q103 0 173.5 47t102.5 120v172q0 163 -73 251.5t-205 88.5q-107 0 -178.5 -95.5t-71.5 -248.5z" />
<glyph unicode=":" horiz-adv-x="517" d="M161 0v202h197v-202h-197zM161 876v202h197v-202h-197z" />
<glyph unicode=";" horiz-adv-x="525" d="M99 -258l70 316v163h197v-173l-150 -306h-117zM162 876v202h197v-202h-197z" />
<glyph unicode="&#x3c;" horiz-adv-x="1040" d="M71 486v149l816 378v-201l-559 -233l-85 -18v-6l85 -19l559 -228v-201z" />
<glyph unicode="=" horiz-adv-x="1153" d="M152 407v164h834v-164h-834zM152 823v164h834v-164h-834z" />
<glyph unicode="&#x3e;" horiz-adv-x="1072" d="M136 87v196l598 238l85 17v6l-85 20l-598 234v195l856 -378v-149z" />
<glyph unicode="?" horiz-adv-x="974" d="M61 1122q-3 161 113.5 258t296.5 97q197 0 306 -100.5t109 -280.5q0 -129 -70.5 -236t-186.5 -219q-54 -54 -65.5 -97t-11.5 -134h-197q1 145 25 201t126 148q99 117 141 180t42 152q0 106 -56.5 163t-161.5 57q-91 0 -155 -49.5t-64 -145.5h-188zM353 0v208h206v-208 h-206z" />
<glyph unicode="@" horiz-adv-x="1833" d="M114 478q19 423 249 688t602 265q379 0 581.5 -250t185.5 -679q-9 -214 -120 -368.5t-332 -154.5q-73 0 -126 41.5t-76 117.5q-50 -80 -122 -119.5t-168 -39.5q-125 0 -194 120.5t-51 316.5q23 259 137.5 415.5t279.5 156.5q105 0 169 -26t139 -80l-4 -4h6l-51 -585 q-9 -110 21.5 -151.5t81.5 -41.5q123 0 197 113.5t82 288.5q16 382 -144 595.5t-496 213.5q-308 0 -495.5 -231t-202.5 -602q-18 -376 150 -594.5t482 -218.5q88 0 178.5 21.5t152.5 56.5l38 -107q-67 -42 -170.5 -65.5t-202.5 -23.5q-380 0 -587.5 249.5t-189.5 681.5z M720 416q-11 -142 21.5 -216t106.5 -74q64 0 117 24.5t97 87.5q-1 12 -0.5 25.5t2.5 29.5l47 538q-26 12 -54.5 19t-59.5 7q-125 0 -191 -109.5t-86 -331.5z" />
<glyph unicode="A" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM431 540h435l-212 625h-6z" />
<glyph unicode="B" horiz-adv-x="1302" d="M170 0v1456h475q228 0 357 -98.5t129 -295.5q0 -94 -58 -168.5t-154 -113.5q143 -20 226.5 -124t83.5 -245q0 -200 -130 -305.5t-352 -105.5h-577zM367 154h380q135 0 209.5 66.5t74.5 188.5q0 121 -76 195t-205 79h-13h-370v-529zM367 837h319q110 0 179 60.5t69 168.5 q0 118 -74.5 176.5t-214.5 58.5h-278v-464z" />
<glyph unicode="C" horiz-adv-x="1297" d="M118 598v259q0 269 155.5 444.5t402.5 175.5q247 1 393 -131q142 -128 142 -337v-12l-2 -6h-189q0 153 -90 242t-254 89q-165 0 -263 -133t-98 -330v-261q0 -199 98 -332t263 -133q164 0 254 88.5t90 244.5h189l2 -6v-11q0 -198 -144 -332q-148 -138 -391 -138 q-247 0 -402.5 175t-155.5 444z" />
<glyph unicode="D" horiz-adv-x="1387" d="M170 0v1456h458q285 0 458.5 -175.5t173.5 -453.5v-199q0 -279 -173.5 -453.5t-458.5 -174.5h-458zM367 154h261q202 0 318.5 133t116.5 341v201q0 206 -116.5 339t-318.5 133h-261v-1147z" />
<glyph unicode="E" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897z" />
<glyph unicode="F" horiz-adv-x="1130" d="M170 0v1456h913v-155h-716v-502h614v-155h-614v-644h-197z" />
<glyph unicode="G" horiz-adv-x="1387" d="M121 578v300q0 265 159 432t410 167q243 0 384 -129q137 -126 137 -319v-11l-2 -6h-189q0 133 -86 221.5t-244 88.5q-167 0 -269 -125t-102 -317v-302q0 -194 108 -319.5t276 -125.5q129 0 204.5 33.5t112.5 79.5v328h-330v154h527v-532q-52 -81 -180.5 -149t-333.5 -68 q-252 0 -417 167t-165 432z" />
<glyph unicode="H" horiz-adv-x="1441" d="M170 0v1456h197v-658h707v658h197v-1456h-197v643h-707v-643h-197z" />
<glyph unicode="I" horiz-adv-x="579" d="M190 0v1456h198v-1456h-198z" />
<glyph unicode="J" horiz-adv-x="1123" d="M79 395l2 6h189q0 -136 63 -202t179 -66q109 0 178 79t69 210v1034h197v-1034q0 -203 -123.5 -323t-320.5 -120q-201 0 -320 107q-113 102 -113 293v16z" />
<glyph unicode="K" horiz-adv-x="1302" d="M170 0v1456h197v-644h108l540 644h222l2 -5l-590 -689l632 -757l-2 -5h-239l-545 658h-128v-658h-197z" />
<glyph unicode="L" horiz-adv-x="1126" d="M170 0v1456h197v-1302h710v-154h-907z" />
<glyph unicode="M" horiz-adv-x="1779" d="M170 0v1456h259l463 -1183h6l465 1183h245v-1456h-197v1091l-6 1l-441 -1092h-137l-454 1128l-6 -1v-1127h-197z" />
<glyph unicode="N" horiz-adv-x="1442" d="M170 0v1456h197l701 -1111l6 2v1109h197v-1456h-197l-701 1112l-6 -2v-1110h-197z" />
<glyph unicode="O" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261z" />
<glyph unicode="P" horiz-adv-x="1302" d="M170 0v1456h557q233 0 362.5 -120t129.5 -316q0 -198 -129.5 -317t-362.5 -119h-360v-584h-197zM367 738h360q148 0 221 79.5t73 200.5t-73.5 202t-220.5 81h-360v-563z" />
<glyph unicode="Q" horiz-adv-x="1427" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -115 -33.5 -217.5t-95.5 -183.5l217 -211l-135 -129l-222 213q-70 -45 -152 -68t-174 -23q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5 t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128t-102.5 -328v-261z" />
<glyph unicode="R" horiz-adv-x="1303" d="M170 0v1455h498q239 0 365 -106t126 -308q0 -112 -58.5 -195t-170.5 -132q120 -39 172.5 -126.5t52.5 -216.5v-137q0 -68 15 -122t52 -88v-24h-203q-39 34 -50 100t-11 136v133q0 118 -69 190t-185 72h-337v-631h-197zM367 786h281q167 0 240.5 63.5t73.5 193.5 q0 123 -71.5 190.5t-222.5 67.5h-301v-515z" />
<glyph unicode="S" horiz-adv-x="1252" d="M114 413l2 6h188q0 -137 104 -211.5t235 -74.5q140 0 221.5 63t81.5 171q0 99 -71 166t-250 114q-222 55 -346.5 162t-124.5 269q0 171 134 285t348 114q230 -1 366 -131q133 -127 133 -294v-10l-3 -6h-188q0 124 -86.5 205t-221.5 81q-138 0 -211.5 -67t-73.5 -174 q0 -95 80.5 -158.5t261.5 -111.5q220 -57 335 -168t115 -274q0 -176 -138.5 -283t-361.5 -107q-211 0 -373 118q-157 114 -156 304v12z" />
<glyph unicode="T" horiz-adv-x="1225" d="M37 1301v155h1151v-155h-480v-1301h-197v1301h-474z" />
<glyph unicode="U" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5z" />
<glyph unicode="V" horiz-adv-x="1295" d="M22 1456h214l376 -1074l33 -121h6l33 121l376 1074h213l-541 -1456h-169z" />
<glyph unicode="W" horiz-adv-x="1763" d="M37 1456h213l212 -951l25 -191l6 -1l34 192l258 951h193l260 -951l34 -195h6l27 195l208 951h214l-352 -1456h-176l-291 1010l-22 131h-6l-21 -131l-295 -1010h-176z" />
<glyph unicode="X" horiz-adv-x="1295" d="M66 0l472 734l-462 722h236l338 -568l340 568h238l-462 -722l472 -734h-235l-349 578l-350 -578h-238z" />
<glyph unicode="Y" horiz-adv-x="1295" d="M40 1456h225l380 -740l380 740h225l-511 -944v-512h-196v527z" />
<glyph unicode="Z" horiz-adv-x="1225" d="M97 0v146l778 1155h-767v155h992v-141l-781 -1161h814v-154h-1036z" />
<glyph unicode="[" horiz-adv-x="552" d="M143 -312v1976h385v-155h-188v-1666h188v-155h-385z" />
<glyph unicode="\" horiz-adv-x="846" d="M39 1456h186l608 -1581h-186z" />
<glyph unicode="]" horiz-adv-x="552" d="M11 -157h189v1666h-189v155h386v-1976h-386v155z" />
<glyph unicode="^" horiz-adv-x="856" d="M61 729l299 727h134l298 -727h-181l-166 419l-16 70h-6l-16 -70l-163 -419h-183z" />
<glyph unicode="_" horiz-adv-x="931" d="M4 0h923v-154h-923v154z" />
<glyph unicode="`" horiz-adv-x="641" d="M82 1512l3 6h230l175 -266h-158z" />
<glyph unicode="a" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6v13q1 110 111 203q118 98 303 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
<glyph unicode="b" d="M143 0v1560h197v-606q51 72 126.5 110t176.5 38q200 0 312 -160t112 -421v-21q0 -234 -112.5 -377.5t-309.5 -143.5q-108 0 -187.5 42.5t-131.5 125.5l-32 -147h-151zM340 309q38 -80 99.5 -125t155.5 -45q139 0 207 99t68 262v21q0 186 -68.5 303.5t-208.5 117.5 q-91 0 -153.5 -44.5t-99.5 -119.5v-469z" />
<glyph unicode="c" horiz-adv-x="1072" d="M97 520v42q0 229 124.5 384.5t351.5 155.5q181 0 297 -112q112 -108 111 -264v-11l-2 -6h-179q0 99 -64.5 168.5t-162.5 69.5q-145 0 -211.5 -112.5t-66.5 -272.5v-42q0 -163 65.5 -275t212.5 -112q91 0 159 60.5t68 148.5h178l3 -6v-9q0 -135 -120 -239 q-124 -108 -288 -109q-228 0 -352 155t-124 386z" />
<glyph unicode="d" d="M98 500v21q0 261 111.5 421t312.5 160q95 0 168.5 -35t125.5 -102v595h197v-1560h-151l-30 137q-53 -78 -131 -118t-181 -40q-198 0 -310 143.5t-112 377.5zM295 500q0 -164 67 -262.5t208 -98.5q88 0 148 40t98 112v505q-38 67 -98.5 106.5t-145.5 39.5 q-142 0 -209.5 -117t-67.5 -304v-21z" />
<glyph unicode="e" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM307 664l2 -5h488v16q0 118 -58 195t-179 77 q-103 0 -170.5 -79.5t-82.5 -203.5z" />
<glyph unicode="f" horiz-adv-x="674" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169z" />
<glyph unicode="g" d="M108 500v21q0 261 111.5 421t311.5 160q103 0 181 -41.5t131 -119.5l24 141h157v-1088q0 -208 -121 -319.5t-349 -111.5q-78 0 -168.5 21.5t-159.5 58.5l30 153q57 -30 137.5 -48.5t158.5 -18.5q144 0 209.5 65.5t65.5 199.5v123q-53 -68 -127 -103t-171 -35 q-198 0 -309.5 143.5t-111.5 377.5zM305 500q0 -163 67 -262t207 -99q89 0 149 40.5t99 114.5v498q-38 69 -99 109.5t-147 40.5q-141 0 -208.5 -117t-67.5 -304v-21z" />
<glyph unicode="h" d="M143 0v1560h197v-623q56 78 137.5 121.5t180.5 43.5q173 0 269.5 -104t96.5 -320v-678h-197v680q0 134 -57.5 198t-171.5 64q-88 0 -153 -34.5t-105 -96.5v-811h-197z" />
<glyph unicode="i" horiz-adv-x="516" d="M159 0v1082h197v-1082h-197zM159 1359v201h197v-201h-197z" />
<glyph unicode="j" horiz-adv-x="530" d="M-66 -419l14 155q14 -5 40 -8.5t43 -3.5q65 0 103.5 44t38.5 143v1171h197v-1171q0 -167 -86 -257.5t-239 -90.5q-31 0 -56.5 4.5t-54.5 13.5zM167 1363v197h197v-197h-197z" />
<glyph unicode="k" horiz-adv-x="1050" d="M144 0v1560h197v-904h99l325 426h236l-393 -499l427 -583h-233l-360 499h-101v-499h-197z" />
<glyph unicode="l" horiz-adv-x="516" d="M159 0v1560h197v-1560h-197z" />
<glyph unicode="m" horiz-adv-x="1790" d="M143 0v1082h176l14 -142q53 77 134.5 119.5t189.5 42.5t185.5 -50t116.5 -150q52 93 135.5 146.5t195.5 53.5q165 0 261 -113.5t96 -341.5v-647h-197v649q0 160 -55 226.5t-164 66.5q-101 0 -163.5 -70t-73.5 -177v-8v-687h-198v649q0 152 -56.5 222.5t-162.5 70.5 q-90 0 -148 -37t-89 -104v-801h-197z" />
<glyph unicode="n" d="M143 0v1082h176l14 -161q54 86 135.5 133.5t185.5 47.5q175 0 271 -102.5t96 -316.5v-683h-197v679q0 143 -56.5 203t-172.5 60q-91 0 -154.5 -36.5t-100.5 -102.5v-803h-197z" />
<glyph unicode="o" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z" />
<glyph unicode="p" d="M143 -416v1498h151l31 -140q53 78 132 119t184 41q201 0 312.5 -159.5t111.5 -421.5v-21q0 -234 -112 -377.5t-309 -143.5q-100 0 -175.5 33.5t-128.5 100.5v-529h-197zM340 275q37 -67 97 -104.5t147 -37.5q140 0 212 102.5t72 264.5v21q0 184 -72.5 302.5t-213.5 118.5 q-85 0 -145 -38.5t-97 -105.5v-523z" />
<glyph unicode="q" d="M98 500v21q0 261 111.5 421t312.5 160q98 0 173 -37.5t128 -108.5l28 126h151v-1498h-197v518q-52 -61 -123 -92t-162 -31q-198 0 -310 143.5t-112 377.5zM295 500q0 -164 67.5 -265.5t207.5 -101.5q81 0 138.5 36t96.5 101v546q-39 61 -96.5 96t-136.5 35 q-141 0 -209 -119.5t-68 -306.5v-21z" />
<glyph unicode="r" horiz-adv-x="717" d="M143 0v1082h176l19 -158q46 84 113.5 131t155.5 47q22 0 42 -3.5t33 -7.5l-27 -183l-101 6q-78 0 -131.5 -37t-82.5 -104v-773h-197z" />
<glyph unicode="s" horiz-adv-x="1071" d="M109 329l2 6h188q5 -105 78 -153.5t171 -48.5q105 0 164.5 44.5t59.5 113.5q0 65 -49.5 106t-187.5 72q-191 41 -293.5 115t-102.5 198q0 132 112.5 226t291.5 94q184 0 298 -100q109 -96 109 -222v-11l-2 -6h-188q0 70 -61.5 127t-155.5 57q-104 0 -155.5 -47 t-51.5 -112q0 -64 44.5 -99t183.5 -64q199 -42 302 -119t103 -201q0 -144 -116.5 -235t-304.5 -91q-207 0 -326 105q-113 100 -113 232v13z" />
<glyph unicode="t" horiz-adv-x="690" d="M48 936v146h172v261h197v-261h205v-146h-205v-657q0 -76 31.5 -107t83.5 -31q17 0 38 4.5t35 9.5l27 -135q-22 -18 -65 -29.5t-85 -11.5q-120 0 -191 72.5t-71 227.5v657h-172z" />
<glyph unicode="u" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352z" />
<glyph unicode="v" horiz-adv-x="1030" d="M46 1082h202l256 -763l17 -76h6l19 76l249 763h201l-398 -1082h-149z" />
<glyph unicode="w" horiz-adv-x="1550" d="M45 1082h205l170 -688l25 -139h6l26 139l216 688h158l217 -688l28 -155h6l32 155l160 688h206l-314 -1082h-159l-214 659l-41 172h-6l-38 -172l-210 -659h-159z" />
<glyph unicode="x" horiz-adv-x="1030" d="M46 0l361 547l-351 535h227l227 -399l230 399h230l-351 -535l361 -547h-226l-240 409l-240 -409h-228z" />
<glyph unicode="y" horiz-adv-x="1030" d="M26 1082h220l228 -681l35 -136h6l266 817h219l-455 -1248q-41 -109 -117.5 -190t-206.5 -81q-24 0 -61 5.5t-57 10.5l20 155q-6 1 35.5 -2t52.5 -3q63 0 103 56t67 124l47 113z" />
<glyph unicode="z" horiz-adv-x="1030" d="M94 0v138l585 788h-578v156h819v-134l-591 -794h625v-154h-860z" />
<glyph unicode="{" horiz-adv-x="696" d="M63 543v147q106 0 157.5 61.5t51.5 174.5v206q0 171 82 290.5t277 174.5l40 -117q-110 -35 -156 -125.5t-46 -222.5v-206q0 -105 -42.5 -185t-127.5 -125q85 -46 127.5 -126.5t42.5 -183.5v-205q0 -132 46 -221.5t156 -125.5l-40 -118q-195 55 -277 175t-82 290v205 q0 112 -51.5 174.5t-157.5 62.5z" />
<glyph unicode="|" horiz-adv-x="507" d="M145 -270v1726h197v-1726h-197z" />
<glyph unicode="}" horiz-adv-x="696" d="M21 -246q109 36 156 125.5t47 221.5v205q0 107 45 187t139 123q-94 41 -139 121t-45 189v206q0 132 -47 222.5t-156 125.5l41 117q194 -55 276.5 -174.5t82.5 -290.5v-206q0 -113 50.5 -174.5t158.5 -61.5v-147q-108 0 -158.5 -62.5t-50.5 -174.5v-205q0 -170 -82.5 -290 t-276.5 -175z" />
<glyph unicode="~" horiz-adv-x="1391" d="M128 474q0 136 85.5 232.5t217.5 96.5q88 0 163 -34.5t160 -104.5q58 -51 106 -74t100 -23q66 0 114.5 57t48.5 134l141 -18q0 -137 -87 -238t-217 -101q-90 0 -163.5 33t-158.5 107q-59 48 -108 72t-99 24q-67 0 -114.5 -53t-47.5 -128z" />
<glyph unicode="&#xa1;" horiz-adv-x="507" d="M144 -374v978h197v-978h-197zM144 876v206h197v-206h-197z" />
<glyph unicode="&#xa2;" horiz-adv-x="1122" d="M97 520v42q0 202 99 350t282 181v225h198v-227q140 -30 225 -134.5t82 -242.5l-3 -5h-180q0 99 -64.5 168.5t-162.5 69.5q-145 0 -211.5 -112.5t-66.5 -272.5v-42q0 -163 65.5 -275t212.5 -112q91 0 159 60.5t68 148.5h180l2 -5q3 -116 -86 -215t-220 -130v-237h-198v233 q-184 31 -282.5 179t-98.5 353z" />
<glyph unicode="&#xa3;" horiz-adv-x="1194" d="M70 615v155h158l-10 270q0 204 112 320.5t300 116.5q200 0 310 -104.5t106 -276.5l-2 -6h-190q0 118 -63 175t-161 57q-99 0 -157 -74.5t-58 -207.5l10 -270h418v-155h-413l6 -149q0 -90 -15.5 -171.5t-44.5 -140.5h735l-1 -154h-976v154h10q48 13 72 111t24 201l-6 149 h-164z" />
<glyph unicode="&#xa4;" horiz-adv-x="1456" d="M104 112l138 140q-50 76 -76.5 166.5t-26.5 189.5q0 102 28.5 196t82.5 172l-146 149l139 139l143 -146q74 55 163 85.5t185 30.5q97 0 186 -31t164 -87l146 149l140 -140l-150 -153q52 -78 80.5 -170.5t28.5 -193.5q0 -98 -26.5 -187.5t-74.5 -165.5l142 -143l-140 -139 l-133 135q-77 -62 -169.5 -95t-193.5 -33t-193.5 32.5t-167.5 93.5l-130 -132zM321 608q0 -188 120.5 -320.5t292.5 -132.5q170 0 290.5 132.5t120.5 320.5q0 186 -120.5 318t-290.5 132q-172 0 -292.5 -132t-120.5 -318z" />
<glyph unicode="&#xa5;" horiz-adv-x="1243" d="M30 1456h226l359 -663l360 663h224l-418 -718h312v-123h-383v-167h383v-122h-383v-326h-197v326h-375v122h375v167h-375v123h311z" />
<glyph unicode="&#xa6;" horiz-adv-x="499" d="M145 -270v792h197v-792h-197zM145 698v758h197v-758h-197z" />
<glyph unicode="&#xa7;" horiz-adv-x="1259" d="M94 551q0 91 47 161.5t134 111.5q-68 50 -102 119.5t-34 166.5q0 166 134 266.5t358 100.5q233 0 363 -111.5t126 -313.5l-3 -6h-188q0 118 -79 197t-219 79q-145 0 -220 -59.5t-75 -150.5q0 -99 67 -148.5t278 -107.5q244 -69 355.5 -159.5t111.5 -265.5q0 -94 -48 -164 t-135 -110q69 -51 104 -119t35 -166q0 -172 -133 -269.5t-358 -97.5q-221 0 -372 102.5t-146 322.5l2 6l188 2q0 -143 96.5 -210.5t231.5 -67.5q137 0 215.5 59.5t78.5 150.5t-72 141.5t-276 113.5q-239 63 -352 156t-113 270zM291 553q0 -100 68 -151.5t278 -110.5 q56 -17 93 -28t70 -23q72 20 112 69.5t40 118.5q0 91 -73.5 144.5t-275.5 116.5q-47 12 -88.5 24.5t-77.5 27.5q-73 -19 -109.5 -69t-36.5 -119z" />
<glyph unicode="&#xa8;" horiz-adv-x="1021" d="M170 1256v200h219v-200h-219zM640 1256v200h219v-200h-219z" />
<glyph unicode="&#xa9;" horiz-adv-x="1604" d="M88 729q0 315 207 531t503 216q295 0 502 -216t207 -531q0 -316 -207.5 -533t-501.5 -217q-296 0 -503 217t-207 533zM209 729q0 -265 171.5 -447t417.5 -182q245 0 417 182t172 447q0 263 -172 444t-417 181q-246 0 -417.5 -181t-171.5 -444zM436 669v119q0 173 94 280 t254 107q157 0 245.5 -79t84.5 -228l-2 -6h-146q0 95 -45.5 138.5t-136.5 43.5q-94 0 -145 -70.5t-51 -184.5v-120q0 -117 51 -187t145 -70q91 0 136 43t45 141h146l2 -6q4 -151 -84 -229.5t-245 -78.5q-160 0 -254 106.5t-94 280.5z" />
<glyph unicode="&#xaa;" horiz-adv-x="917" d="M120 920q0 110 84.5 170t245.5 60h139v52q0 63 -30 97t-88 34q-67 0 -103.5 -27t-36.5 -76l-162 13l-1 6q-6 98 78.5 163t224.5 65q134 0 212 -71t78 -205v-314q0 -50 6 -94t20 -87h-174q-8 21 -13 45t-8 50q-33 -47 -89.5 -78t-133.5 -31q-119 0 -184 61t-65 167z M293 924q0 -45 29 -69t89 -24q51 0 105.5 30t72.5 65v110h-138q-75 0 -116.5 -33t-41.5 -79z" />
<glyph unicode="&#xab;" horiz-adv-x="966" d="M97 506v19l295 389h148l-255 -399l255 -398h-148zM432 506v19l295 389h148l-255 -399l255 -398h-148z" />
<glyph unicode="&#xac;" horiz-adv-x="1137" d="M127 637v165h835v-427h-198v262h-637z" />
<glyph unicode="&#xad;" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
<glyph unicode="&#xae;" horiz-adv-x="1604" d="M88 729q0 315 207 531t503 216q295 0 502 -216t207 -531q0 -316 -207.5 -533t-501.5 -217q-296 0 -503 217t-207 533zM209 729q0 -266 171.5 -447.5t417.5 -181.5q244 0 416 182t172 447q0 264 -171.5 444.5t-416.5 180.5q-246 0 -417.5 -180.5t-171.5 -444.5zM504 316 v850h280q152 0 238.5 -65.5t86.5 -191.5q0 -62 -33 -109t-96 -78q66 -26 95.5 -79t29.5 -128v-56q0 -41 3.5 -73.5t13.5 -53.5v-16h-153q-9 21 -11 61.5t-2 82.5v54q0 72 -33.5 106t-110.5 34h-159v-338h-149zM653 784h152q65 1 110.5 32.5t45.5 87.5q0 73 -39.5 102.5 t-137.5 29.5h-131v-252z" />
<glyph unicode="&#xaf;" horiz-adv-x="950" d="M123 1310v146h721v-146h-721z" />
<glyph unicode="&#xb0;" horiz-adv-x="763" d="M128 1216q0 106 76 183.5t181 77.5q103 0 177.5 -77.5t74.5 -183.5q0 -108 -74 -182.5t-178 -74.5q-106 0 -181.5 74.5t-75.5 182.5zM259 1216q0 -55 36.5 -91t89.5 -36q52 0 87.5 36t35.5 91t-36 92.5t-87 37.5q-53 0 -89.5 -37.5t-36.5 -92.5z" />
<glyph unicode="&#xb1;" horiz-adv-x="1097" d="M99 702v154h381v411h177v-411h358v-154h-358v-413h-177v413h-381zM136 4v155h835v-155h-835z" />
<glyph unicode="&#xb2;" horiz-adv-x="868" d="M119 1240q-6 99 78 169t225 70q135 0 211 -64t76 -180q0 -80 -44.5 -136t-160.5 -161l-153 -135l2 -6h361v-130h-592v130l302 262q69 60 91 97.5t22 79.5q0 50 -28.5 81t-86.5 31q-67 0 -103.5 -32t-36.5 -82h-161z" />
<glyph unicode="&#xb3;" horiz-adv-x="876" d="M112 882l1 6h163q0 -46 37.5 -74.5t100.5 -28.5q72 0 114 29.5t42 77.5q0 62 -36.5 90.5t-109.5 28.5h-132v126h132q67 0 99.5 28.5t32.5 80.5q0 43 -36.5 72t-105.5 29q-56 0 -90.5 -24t-34.5 -64h-162l-2 6q-6 94 78.5 153.5t210.5 59.5q145 0 229 -59.5t84 -169.5 q0 -55 -35.5 -100.5t-97.5 -71.5q70 -23 108 -71t38 -116q0 -111 -90 -173t-236 -62q-127 0 -217.5 58t-84.5 169z" />
<glyph unicode="&#xb4;" horiz-adv-x="654" d="M131 1252l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xb5;" d="M153 -416v1498h196v-642q2 -178 57.5 -242.5t155.5 -64.5q98 0 158.5 36t92.5 106v807h197v-1082h-177l-9 108q-44 -63 -107.5 -96t-146.5 -33q-72 0 -126.5 16.5t-94.5 51.5v-463h-196z" />
<glyph unicode="&#xb6;" horiz-adv-x="1006" d="M63 988q0 207 129.5 337.5t362.5 130.5h281v-1456h-197v520h-84q-233 0 -362.5 129.5t-129.5 338.5z" />
<glyph unicode="&#xb7;" horiz-adv-x="540" d="M161 624v212h198v-212h-198z" />
<glyph unicode="&#xb8;" horiz-adv-x="509" d="M119 -326q72 0 116 24.5t44 73.5q0 48 -36 67t-123 26l32 135h140l-12 -52q65 -11 108 -52t43 -121q0 -96 -79 -153t-226 -57z" />
<glyph unicode="&#xb9;" horiz-adv-x="557" d="M95 1320v134l301 23v-812h-174v655h-127z" />
<glyph unicode="&#xba;" horiz-adv-x="933" d="M120 1025v117q0 148 94 241.5t251 93.5q158 0 252 -93.5t94 -241.5v-117q0 -149 -93.5 -241.5t-250.5 -92.5q-158 0 -252.5 92.5t-94.5 241.5zM293 1025q0 -88 44 -140.5t130 -52.5q83 0 127.5 53t44.5 140v117q0 84 -45 137.5t-129 53.5t-128 -53.5t-44 -137.5v-117z " />
<glyph unicode="&#xbb;" horiz-adv-x="966" d="M116 170l231 380l-231 380h148l278 -357h5l1 -9l5 -5l-2 -9l2 -9l-5 -6l-1 -7h-4l-279 -358h-148zM462 170l231 380l-231 380h148l278 -357h5l1 -9l5 -5l-2 -9l2 -9l-5 -6l-1 -7h-4l-279 -358h-148z" />
<glyph unicode="&#xbc;" horiz-adv-x="1595" d="M184 1319v134l301 23v-812h-174v655h-127zM339 185l711 1138l109 -67l-711 -1138zM785 254l422 547h173v-519h126v-130h-126v-152h-170v152h-417zM967 282h243v310l-6 1l-13 -22z" />
<glyph unicode="&#xbd;" horiz-adv-x="1708" d="M184 1319v134l301 23v-812h-174v655h-127zM352 185l711 1138l109 -67l-711 -1138zM930 573q-6 99 78 169t225 70q135 0 211 -64t76 -180q0 -80 -44.5 -136t-160.5 -161l-153 -135l2 -6h361v-130h-592v130l302 262q69 60 91 97.5t22 79.5q0 50 -28.5 81t-86.5 31 q-67 0 -103.5 -32t-36.5 -82h-161z" />
<glyph unicode="&#xbe;" horiz-adv-x="1781" d="M128 883l1 6h163q0 -46 37.5 -74.5t100.5 -28.5q72 0 114 29.5t42 77.5q0 62 -36.5 90.5t-109.5 28.5h-132v126h132q67 0 99.5 28.5t32.5 80.5q0 43 -36.5 72t-105.5 29q-56 0 -90.5 -24t-34.5 -64h-162l-2 6q-6 94 78.5 153.5t210.5 59.5q145 0 229 -59.5t84 -169.5 q0 -55 -35.5 -100.5t-97.5 -71.5q70 -23 108 -71t38 -116q0 -111 -90 -173t-236 -62q-127 0 -217.5 58t-84.5 169zM522 185l711 1138l109 -67l-711 -1138zM974 254l422 547h173v-519h126v-130h-126v-152h-170v152h-417zM1156 282h243v310l-6 1l-13 -22z" />
<glyph unicode="&#xbf;" horiz-adv-x="1013" d="M114 -13q0 127 70 233.5t187 220.5q53 53 65 96t12 135h197q-2 -146 -26 -202t-125 -147q-100 -118 -141.5 -181t-41.5 -150q0 -106 56 -163t162 -57q90 0 154.5 49.5t64.5 145.5h188l3 -6q2 -161 -114.5 -258t-295.5 -97q-198 0 -306.5 100.5t-108.5 280.5zM441 874v209 h206v-209h-206z" />
<glyph unicode="&#xc0;" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM323 1861l3 6h230l175 -266h-158zM431 540h435l-212 625h-6z" />
<glyph unicode="&#xc1;" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM431 540h435l-212 625h-6zM558 1597l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xc2;" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM342 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM431 540h435l-212 625h-6z" />
<glyph unicode="&#xc3;" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM301 1628q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5zM431 540h435l-212 625h-6z " />
<glyph unicode="&#xc4;" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM304 1605v200h219v-200h-219zM431 540h435l-212 625h-6zM774 1605v200h219v-200h-219z" />
<glyph unicode="&#xc5;" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM431 540h435l-212 625h-6zM471 1734q0 72 51.5 120.5t124.5 48.5q72 0 122.5 -48.5t50.5 -120.5q0 -73 -50.5 -118.5t-122.5 -45.5q-74 0 -125 46t-51 118zM571 1734q0 -31 22.5 -52.5t53.5 -21.5 q30 0 51.5 21t21.5 53t-21.5 54.5t-51.5 22.5q-32 0 -54 -22.5t-22 -54.5z" />
<glyph unicode="&#xc6;" horiz-adv-x="1999" d="M14 0l881 1456h967v-155h-691l20 -466h590v-155h-584l22 -526h705v-154h-895l-15 350h-557l-201 -350h-242zM560 529h447l-31 710l-5 2z" />
<glyph unicode="&#xc7;" horiz-adv-x="1297" d="M118 598v259q0 269 155.5 444.5t402.5 175.5t393 -131.5t142 -348.5l-2 -6h-189q0 153 -90 242t-254 89q-165 0 -263 -133t-98 -330v-261q0 -199 98 -332t263 -133q164 0 254 88.5t90 244.5h189l2 -6q4 -205 -144 -343t-391 -138q-247 0 -402.5 175t-155.5 444zM581 -335 q72 0 116 24.5t44 73.5q0 48 -36 67t-123 26l32 135h140l-12 -52q65 -11 108 -52t43 -121q0 -96 -79 -153t-226 -57z" />
<glyph unicode="&#xc8;" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM294 1861l3 6h230l175 -266h-158z" />
<glyph unicode="&#xc9;" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM529 1597l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xca;" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM313 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
<glyph unicode="&#xcb;" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM275 1605v200h219v-200h-219zM745 1605v200h219v-200h-219z" />
<glyph unicode="&#xcc;" horiz-adv-x="579" d="M-35 1861l3 6h230l175 -266h-158zM190 0v1456h198v-1456h-198z" />
<glyph unicode="&#xcd;" horiz-adv-x="579" d="M190 0v1456h198v-1456h-198zM199 1597l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xce;" horiz-adv-x="579" d="M-16 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM190 0v1456h198v-1456h-198z" />
<glyph unicode="&#xcf;" horiz-adv-x="579" d="M-54 1605v200h219v-200h-219zM190 0v1456h198v-1456h-198zM416 1605v200h219v-200h-219z" />
<glyph unicode="&#xd0;" horiz-adv-x="1387" d="M2 663v155h168v638h458q285 0 458.5 -175.5t173.5 -453.5v-199q0 -279 -173.5 -453.5t-458.5 -174.5h-458v663h-168zM367 154h261q202 0 318.5 133t116.5 341v201q0 206 -116.5 339t-318.5 133h-261v-483h276v-155h-276v-509z" />
<glyph unicode="&#xd1;" horiz-adv-x="1442" d="M170 0v1456h197l701 -1111l6 2v1109h197v-1456h-197l-701 1112l-6 -2v-1110h-197zM372 1628q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
<glyph unicode="&#xd2;" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM373 1882l3 6h230l175 -266h-158z" />
<glyph unicode="&#xd3;" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM608 1618l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xd4;" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM392 1622v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
<glyph unicode="&#xd5;" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM351 1649q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
<glyph unicode="&#xd6;" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM354 1626v200h219v-200h-219zM824 1626v200h219v-200h-219z" />
<glyph unicode="&#xd7;" horiz-adv-x="1096" d="M88 351l327 334l-327 334l126 126l326 -333l327 333l126 -126l-328 -334l328 -334l-126 -126l-327 332l-326 -332z" />
<glyph unicode="&#xd8;" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q94 0 178.5 -25.5t156.5 -71.5l81 137h149l-132 -221q77 -84 119.5 -197t42.5 -242v-259q0 -267 -165.5 -443t-429.5 -176q-85 0 -160.5 20.5t-139.5 60.5l-91 -154h-149l139 234q-84 84 -128.5 202t-44.5 256zM310 598 q0 -85 19 -158t54 -125l6 -1l544 916q-50 41 -112 63t-134 22q-172 0 -274.5 -128t-102.5 -328v-261zM475 208q44 -34 97 -51t115 -17q183 0 290.5 127.5t107.5 330.5v261q0 75 -16.5 142t-46.5 117l-6 1z" />
<glyph unicode="&#xd9;" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM372 1861l3 6h230l175 -266h-158z" />
<glyph unicode="&#xda;" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM607 1597l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xdb;" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM391 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
<glyph unicode="&#xdc;" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM353 1605v200h219v-200h-219zM823 1605v200h219v-200h-219z" />
<glyph unicode="&#xdd;" horiz-adv-x="1295" d="M40 1456h225l380 -740l380 740h225l-511 -944v-512h-196v527zM556 1596l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xde;" horiz-adv-x="1209" d="M163 0v1456h197v-293h269q232 0 362 -118t130 -307q0 -190 -130 -307.5t-362 -117.5h-269v-313h-197zM360 467h269q147 0 220.5 78t73.5 191q0 114 -73.5 193.5t-220.5 79.5h-269v-542z" />
<glyph unicode="&#xdf;" horiz-adv-x="1221" d="M137 0v1082q0 223 117.5 348t300.5 125q161 0 262 -86t101 -253q0 -118 -64.5 -228t-64.5 -167q0 -82 173.5 -224t173.5 -281q0 -167 -104.5 -252t-282.5 -85q-84 0 -172.5 20.5t-125.5 50.5l44 159q43 -28 108 -52t126 -24q108 0 159 47.5t51 125.5q0 84 -173.5 227.5 t-173.5 289.5q0 80 70.5 190.5t70.5 186.5q0 93 -51 147t-117 54q-104 0 -168 -83.5t-64 -235.5v-1082h-196z" />
<glyph unicode="&#xe0;" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM230 1539l3 6h230l175 -266h-158zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
<glyph unicode="&#xe1;" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141zM465 1275l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xe2;" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM249 1279v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
<glyph unicode="&#xe3;" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM208 1306q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55 t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
<glyph unicode="&#xe4;" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM211 1283v200h219v-200h-219zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141zM681 1283v200h219v-200h-219z" />
<glyph unicode="&#xe5;" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141zM378 1412q0 72 51.5 120.5t124.5 48.5q72 0 122.5 -48.5t50.5 -120.5q0 -73 -50.5 -118.5t-122.5 -45.5q-74 0 -125 46t-51 118 zM478 1412q0 -31 22.5 -52.5t53.5 -21.5q30 0 51.5 21t21.5 53t-21.5 54.5t-51.5 22.5q-32 0 -54 -22.5t-22 -54.5z" />
<glyph unicode="&#xe6;" horiz-adv-x="1789" d="M88 304q0 157 115 243t335 86h229v87q0 106 -52 166.5t-149 60.5q-103 0 -164 -55t-61 -133l-188 18l-2 6q-5 138 110 228.5t305 90.5q114 0 201.5 -40.5t137.5 -117.5q64 75 151.5 116.5t188.5 41.5q214 0 329.5 -130t115.5 -358v-119h-709l-2 -5q1 -159 79.5 -258 t233.5 -99q103 0 169.5 27.5t144.5 78.5l67 -138q-53 -44 -147 -83t-234 -39q-136 0 -240 48.5t-170 138.5q-56 -79 -167.5 -133t-271.5 -54q-170 0 -262.5 87t-92.5 238zM285 300q0 -74 50 -120.5t147 -46.5q76 0 159 43.5t126 100.5v214h-227q-120 0 -187.5 -55.5 t-67.5 -135.5zM983 645l2 -5h508v31q0 122 -60 199t-188 77q-113 0 -182 -84.5t-80 -217.5z" />
<glyph unicode="&#xe7;" horiz-adv-x="1072" d="M97 520v42q0 229 124.5 384.5t351.5 155.5q181 0 296.5 -112t111.5 -275l-2 -6h-179q0 99 -64.5 168.5t-162.5 69.5q-145 0 -211.5 -112.5t-66.5 -272.5v-42q0 -163 65.5 -275t212.5 -112q91 0 159 60.5t68 148.5h178l3 -6q4 -140 -120 -248.5t-288 -108.5 q-228 0 -352 155t-124 386zM450 -335q72 0 116 24.5t44 73.5q0 48 -36 67t-123 26l32 135h140l-12 -52q65 -11 108 -52t43 -121q0 -96 -79 -153t-226 -57z" />
<glyph unicode="&#xe8;" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM214 1540l3 6h230l175 -266h-158zM307 664 l2 -5h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5t-82.5 -203.5z" />
<glyph unicode="&#xe9;" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM307 664l2 -5h488v16q0 118 -58 195t-179 77 q-103 0 -170.5 -79.5t-82.5 -203.5zM449 1276l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xea;" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM233 1280v26l246 237h120l248 -238v-25h-161 l-147 148l-146 -148h-160zM307 664l2 -5h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5t-82.5 -203.5z" />
<glyph unicode="&#xeb;" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM195 1284v200h219v-200h-219zM307 664l2 -5 h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5t-82.5 -203.5zM665 1284v200h219v-200h-219z" />
<glyph unicode="&#xec;" horiz-adv-x="515" d="M-72 1518l3 6h230l175 -266h-158zM153 0v1082h197v-1082h-197z" />
<glyph unicode="&#xed;" horiz-adv-x="515" d="M153 0v1082h197v-1082h-197zM162 1254l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xee;" horiz-adv-x="515" d="M-53 1258v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM153 0v1082h197v-1082h-197z" />
<glyph unicode="&#xef;" horiz-adv-x="515" d="M-91 1262v200h219v-200h-219zM153 0v1082h197v-1082h-197zM379 1262v200h219v-200h-219z" />
<glyph unicode="&#xf0;" horiz-adv-x="1202" d="M72 466q0 228 138 370t351 142q90 0 169.5 -37t131.5 -97l4 5q-9 109 -51.5 197t-110.5 154l-290 -165l-77 102l256 146q-39 22 -80.5 39t-85.5 31l60 164q79 -19 151 -52t135 -79l218 125l77 -102l-195 -112q95 -104 147 -241.5t52 -300.5v-220q0 -245 -144 -400.5 t-359 -155.5q-218 0 -357.5 140t-139.5 347zM269 466q0 -132 82 -232.5t222 -100.5q133 0 217.5 114t84.5 288v148q-35 59 -115.5 99.5t-198.5 40.5q-131 0 -211.5 -104t-80.5 -253z" />
<glyph unicode="&#xf1;" d="M143 0v1082h176l14 -161q54 86 135.5 133.5t185.5 47.5q175 0 271 -102.5t96 -316.5v-683h-197v679q0 143 -56.5 203t-172.5 60q-91 0 -154.5 -36.5t-100.5 -102.5v-803h-197zM231 1306q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32 q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
<glyph unicode="&#xf2;" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM257 1539l3 6h230l175 -266h-158zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113 q-141 0 -213.5 -113t-72.5 -283v-22z" />
<glyph unicode="&#xf3;" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z M492 1275l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xf4;" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM276 1279v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22 q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z" />
<glyph unicode="&#xf5;" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM235 1306q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5 t-128 46.5q-43 0 -72 -32.5t-29 -78.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z" />
<glyph unicode="&#xf6;" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM238 1283v200h219v-200h-219zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113 q-141 0 -213.5 -113t-72.5 -283v-22zM708 1283v200h219v-200h-219z" />
<glyph unicode="&#xf7;" horiz-adv-x="1170" d="M71 597v188h998v-188h-998zM472 180v203h198v-203h-198zM472 999v203h198v-203h-198z" />
<glyph unicode="&#xf8;" d="M97 529v22q0 240 130 395.5t353 155.5q56 0 107.5 -11t97.5 -31l74 149h129l-104 -211q88 -74 135 -190t47 -257v-22q0 -242 -130 -396t-354 -154q-51 0 -97 8.5t-88 24.5l-72 -147h-129l100 204q-96 71 -147.5 191t-51.5 269zM294 529q0 -91 20 -166.5t61 -123.5h6 l332 674q-29 16 -62.5 25t-70.5 9q-141 0 -213.5 -113t-72.5 -283v-22zM469 156q24 -12 52 -17.5t61 -5.5q141 0 214 112t73 284v22q0 80 -17.5 150.5t-49.5 117.5h-6z" />
<glyph unicode="&#xf9;" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM255 1518l3 6h230l175 -266h-158z" />
<glyph unicode="&#xfa;" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM490 1254l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xfb;" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM274 1258v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
<glyph unicode="&#xfc;" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM236 1262v200h219v-200h-219zM706 1262v200h219v-200h-219z" />
<glyph unicode="&#xfd;" horiz-adv-x="1030" d="M26 1082h220l228 -681l35 -136h6l266 817h219l-455 -1248q-41 -109 -117.5 -190t-206.5 -81q-24 0 -61 5.5t-57 10.5l20 155q-6 1 35.5 -2t52.5 -3q63 0 103 56t67 124l47 113zM424 1254l185 266h230l2 -6l-269 -260h-148z" />
<glyph unicode="&#xfe;" horiz-adv-x="1186" d="M153 -416v1976h197v-598q53 68 128 104t173 36q201 0 312.5 -159.5t111.5 -421.5v-21q0 -234 -112 -377.5t-309 -143.5q-100 0 -175.5 33.5t-128.5 100.5v-529h-197zM350 275q37 -67 97 -104.5t147 -37.5q140 0 212 102.5t72 264.5v21q0 184 -72.5 302.5t-213.5 118.5 q-85 0 -145 -38.5t-97 -105.5v-523z" />
<glyph unicode="&#xff;" horiz-adv-x="1030" d="M26 1082h220l228 -681l35 -136h6l266 817h219l-455 -1248q-41 -109 -117.5 -190t-206.5 -81q-24 0 -61 5.5t-57 10.5l20 155q-6 1 35.5 -2t52.5 -3q63 0 103 56t67 124l47 113zM170 1262v200h219v-200h-219zM640 1262v200h219v-200h-219z" />
<glyph unicode="&#x152;" horiz-adv-x="1960" d="M104 576v304q0 265 154.5 431t403.5 166q69 0 140.5 -6t150.5 -15h838v-155h-689v-471h598v-155h-598v-521h700v-154h-849q-92 -10 -157 -15.5t-132 -5.5q-249 0 -404.5 166t-155.5 431zM301 576q0 -214 97 -328t266 -114q61 0 122 4.5t119 13.5v1151q-61 8 -122 13.5 t-121 5.5q-169 0 -265 -113.5t-96 -326.5v-306z" />
<glyph unicode="&#x153;" horiz-adv-x="1854" d="M97 529v22q0 240 130 395.5t353 155.5q128 0 228 -54t164 -150q64 96 160 150t208 54q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-135 0 -237 51.5t-165 146.5 q-64 -94 -162.5 -146t-224.5 -52q-224 0 -354.5 154.5t-130.5 395.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22zM1087 664l2 -5h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5 t-82.5 -203.5z" />
<glyph unicode="&#x178;" horiz-adv-x="1295" d="M40 1456h225l380 -740l380 740h225l-511 -944v-512h-196v527zM302 1604v200h219v-200h-219zM772 1604v200h219v-200h-219z" />
<glyph unicode="&#x2c6;" horiz-adv-x="979" d="M171 1252v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
<glyph unicode="&#x2dc;" horiz-adv-x="979" d="M135 1275q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
<glyph unicode="&#x2000;" horiz-adv-x="951" />
<glyph unicode="&#x2001;" horiz-adv-x="1903" />
<glyph unicode="&#x2002;" horiz-adv-x="951" />
<glyph unicode="&#x2003;" horiz-adv-x="1903" />
<glyph unicode="&#x2004;" horiz-adv-x="634" />
<glyph unicode="&#x2005;" horiz-adv-x="475" />
<glyph unicode="&#x2006;" horiz-adv-x="317" />
<glyph unicode="&#x2007;" horiz-adv-x="317" />
<glyph unicode="&#x2008;" horiz-adv-x="237" />
<glyph unicode="&#x2009;" horiz-adv-x="380" />
<glyph unicode="&#x200a;" horiz-adv-x="105" />
<glyph unicode="&#x2010;" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
<glyph unicode="&#x2011;" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
<glyph unicode="&#x2012;" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
<glyph unicode="&#x2013;" horiz-adv-x="1416" d="M167 648v155h1086v-155h-1086z" />
<glyph unicode="&#x2014;" horiz-adv-x="1660" d="M139 648v155h1336v-155h-1336z" />
<glyph unicode="&#x2018;" horiz-adv-x="524" d="M145 917v184l101 355h97l-1 -361v-178h-197z" />
<glyph unicode="&#x2019;" horiz-adv-x="516" d="M160 917l1 343v196h197v-193l-101 -346h-97z" />
<glyph unicode="&#x201a;" horiz-adv-x="540" d="M168 -255l1 263v241h197v-223l-101 -281h-97z" />
<glyph unicode="&#x201c;" horiz-adv-x="788" d="M123 917v184l101 355h97l-1 -361v-178h-197zM451 917v184l101 355h97l-1 -361v-178h-197z" />
<glyph unicode="&#x201d;" horiz-adv-x="769" d="M125 917l1 343v196h197v-193l-101 -346h-97zM461 917l1 343v196h197v-193l-101 -346h-97z" />
<glyph unicode="&#x201e;" horiz-adv-x="767" d="M138 -239l1 325v194h197v-184l-101 -335h-97zM446 -239l1 333v186h197v-184l-101 -335h-97z" />
<glyph unicode="&#x2022;" horiz-adv-x="695" d="M137 733v60q0 88 56 144t150 56q95 0 151.5 -56t56.5 -144v-60q0 -89 -56 -143.5t-151 -54.5t-151 55t-56 143z" />
<glyph unicode="&#x2026;" horiz-adv-x="1380" d="M161 0v202h197v-202h-197zM604 0v202h197v-202h-197zM1024 0v202h197v-202h-197z" />
<glyph unicode="&#x202f;" horiz-adv-x="380" />
<glyph unicode="&#x2039;" horiz-adv-x="615" d="M108 541v19l295 389h148l-255 -399l255 -398h-148z" />
<glyph unicode="&#x203a;" horiz-adv-x="615" d="M94 170l231 380l-231 380h148l278 -357h5l1 -9l5 -5l-2 -9l2 -9l-5 -6l-1 -7h-4l-279 -358h-148z" />
<glyph unicode="&#x205f;" horiz-adv-x="475" />
<glyph unicode="&#x20ac;" horiz-adv-x="1088" d="M79 512v124h146v166h-146v125h146v15q0 244 141.5 389.5t372.5 145.5q59 0 117.5 -8t124.5 -23l-19 -159q-54 16 -110.5 25.5t-112.5 9.5q-146 0 -231.5 -103t-85.5 -275v-17h492v-125h-492v-166h492v-124h-485l-2 -5q-4 -169 81.5 -271.5t232.5 -102.5q57 0 113 8.5 t108 25.5l19 -157q-56 -15 -117.5 -23t-122.5 -8q-231 0 -373.5 144.5t-142.5 388.5h-146z" />
<glyph unicode="&#x2122;" horiz-adv-x="1284" d="M103 1374v82h384v-82h-145v-455h-94v455h-145zM565 919v537h116l161 -390h6l162 390h110v-537h-93v343l-6 2l-150 -345h-51l-156 359l-6 -2v-357h-93z" />
<glyph unicode="&#xe000;" horiz-adv-x="1080" d="M0 0v1080h1080v-1080h-1080z" />
<glyph unicode="&#xfb02;" horiz-adv-x="1190" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM833 0v1560h197v-1560h-197z" />
<glyph unicode="&#xfb03;" horiz-adv-x="1814" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM702 936v146h170v117q0 182 106.5 282t295.5 100q67 0 132 -15.5t153 -45.5l-34 -160 q-53 21 -113 36t-123 15q-117 0 -168.5 -52t-51.5 -160v-117h215v-146h-215v-936h-197v936h-170zM1457 0v1082h198v-1082h-198z" />
<glyph unicode="&#xfb04;" horiz-adv-x="1864" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM730 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5 l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM1507 0v1560h197v-1560h-197z" />
</font>
</defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

lib/assets/javascripts/cdb/examples/TheHobbitLocations/fonts/roboto-regular-webfont.ttf
Executable
BIN
View File
Binary file not shown.
lib/assets/javascripts/cdb/examples/TheHobbitLocations/fonts/roboto-regular-webfont.woff
Executable
BIN
View File
Binary file not shown.
lib/assets/javascripts/cdb/examples/TheHobbitLocations/img/leftBkg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

lib/assets/javascripts/cdb/examples/TheHobbitLocations/img/legendBullets.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

lib/assets/javascripts/cdb/examples/TheHobbitLocations/img/overlay.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

lib/assets/javascripts/cdb/examples/TheHobbitLocations/img/title.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

lib/assets/javascripts/cdb/examples/TheHobbitLocations/img/videoButton.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

lib/assets/javascripts/cdb/examples/TheHobbitLocations/index.html
+60
View File
@@ -0,0 +1,60 @@
<html>
<head>
<title>THE HOBBIT FILMING LOCATIONS - A Cartodb.js map</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="map"></div>
<div id="leftBkg"></div>
<div id="overlay"></div>
<div class="left">
<div id="title"></div>
<p>Click on each location to discover pics of the places and comments from the production videos.</p>
<p>The data is hosted on <a href="http://cartodb.com">CartoDB</a> and was assembled from various data sources. </p>
<p>This map was developed using the CartoDB JavaScript library, <a href="https://github.com/CartoDB/cartodb.js">Cartodb.js</a> Fork it and create your own.</p>
<div id="legendBox">
<ul>
<li>Natural Parks</li>
<li>Villages</li>
<li>Rivers</li>
<li>Fields</li>
<li>Caves</li>
</ul>
</div>
</div>
<div id="pointTT">
<p></p>
</div>
<!--Custom html for the infowindow customization-->
<!--You can write simple html or use Mustache templates http://mustache.github.com/-->
<!--Content.data contains the field info-->
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-cont">
<img src="{{content.data.pic}}" />
<h4>{{content.data.name_to_display}}</h4>
{{#content.data.video_url}}
<a class="videoButton" href="{{content.data.video_url}}" target="_blank"> </a>
{{/content.data.video_url}}
<p>{{content.data.description}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<!--Include the js. Please be sure that you use a locked version in case you go to production-->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
lib/assets/javascripts/cdb/examples/TheHobbitLocations/js/app.js
+39
View File
@@ -0,0 +1,39 @@
var map;
function main() {
var options = {
center: [-42.27730877423707, 172.63916015625],
zoom: 6,
zoomControl: false, // dont add the zoom overlay (it is added by default)
loaderControl: false //dont show tiles loader
};
cartodb.createVis('map', 'http://saleiva.carto.com/api/v2/viz/20a26a6a-eef9-11e2-8999-3085a9a9563c/viz.json', options)
.done(function(vis, layers) {
// there are two layers, base layer and points layer
var sublayer = layers[1].getSubLayer(0);
sublayer.set({ 'interactivity': ['cartodb_id', 'name_to_display', 'description'] });
// Set the custom infowindow template defined on the html
sublayer.infowindow.set('template', $('#infowindow_template').html());
// add the tooltip show when hover on the point
vis.addOverlay({
type: 'tooltip',
position: 'top|center',
template: '<p>{{name_to_display}}</p>'
});
vis.addOverlay({
type: 'infobox',
template: '<h3>{{name_to_display}}</h3><p>{{description}}</p>',
width: 200,
position: 'bottom|right'
});
});
}
window.onload = main;
lib/assets/javascripts/cdb/examples/add_custom_searchbox.html
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body,#map {
width:100%;
height:100%;
padding: 0;
margin: 0;
}
div#searchbox{
background-color: #d2eaef;
opacity: 0.8;
position: absolute;
top: 10px;
left: 50px;
width: auto;
height: auto;
padding: 10px;
display: block;
z-index: 9000;
}
div#searchbox input{
width: 200px;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div id="searchbox">
<input type="text" name="ad" value="" id="ad" size="10" />
<button type="button" id="searchButton">Search</button>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var input;
function main () {
var layerUrl = 'https://documentation.carto.com/api/v2/viz/34dfd2e4-d62b-11e5-b5e7-0ea31932ec1d/viz.json';
// add CartoDB layer
cartodb.createVis(map, layerUrl)
.done(function (vis,layer) {
// set the map options
map = vis.getNativeMap().setView([41.390205, 2.154007],4);
// When the search button is clicked
$('#searchButton').click(function () {
// store in the input variable the value from the input box
input = $('#ad').val();
// execute the CARTO SQL API
var sql = new cartodb.SQL({ user: 'documentation' });
// get the bounds of the geometry which has the same string value (in the name column) than the string value written in the input box
sql.getBounds("SELECT * FROM world_borders_1 where name ILIKE '" + input + "'").done(function (bounds) {
// sets the map view that contains the bounds defined by the getBounds method with the maximum zoom possible
map.fitBounds(bounds);
});
});
})
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/annotations.html
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<title>Easy example | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
shareable: true,
title: false,
description: true,
search: true,
tiles_loader: true,
center_lat: 0,
center_lon: 0,
zoom: 2
})
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// setInteraction is disabled by default
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data) {
cartodb.log.log(e, latlng, pos, data);
});
// you can get the native map to work with it
var map = vis.getNativeMap();
var annotation = new cdb.geo.ui.Annotation({
latlng:[-20, -54],
text: "Hi, I'm <strong>here</strong>",
mapView: vis.mapView,
style: {
"z-index": 1000,
"color": "#FFF",
"text-align": "right",
"font-size": "13",
"font-family-name": "Helvetica",
"box-color": "#F84F40",
"box-opacity": 0.7,
"box-padding": 10,
"line-color": "#F84F40",
"line-width": 50
}
});
this.mapView.$el.append(annotation.render().$el);
window.annotation = annotation = new cdb.geo.ui.Annotation({
latlng:[14, 34],
text: "… and I'm here :)",
style: {
boxColor: "#FEB24C",
lineColor: "#FEB24C"
},
mapView: vis.mapView
});
this.mapView.$el.append(annotation.render().$el);
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/basemap.html
+50
View File
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>Basemap | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var basemap = {
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
}
};
</script>
</head>
<body>
<div id="content">
<div class="map">
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/01f93132-d5e6-11e3-855b-0e10bcd91c2b/viz.json", { basemap: basemap }).size(500, 500).write();
</script>
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/bing.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps + CartoDB.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
html, body, #myMap{
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
cartodb.Tiles.getTiles({
type: 'cartodb',
user_name: 'examples',
sublayers: [{
sql: 'select * from ne_10m_populated_p_2',
cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
}]
}, function(tileTemplate) {
var options = {
uriConstructor: function(tile, zoom) {
var i = tile.x + tile.y;
return tileTemplate.tiles[0]
.replace('{s}', 'abcd'[i%3])
.replace('{z}', tile.levelOfDetail)
.replace('{x}', tile.x)
.replace('{y}', tile.y)
},
width: 256,
height: 256
};
var tileSource = new Microsoft.Maps.TileSource(options);
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource});
map.entities.push(tilelayer);
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:100%; height:100%;"></div>
</body>
</html>
lib/assets/javascripts/cdb/examples/bounds.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>Set Bounds example | CartoDB.js</title>
<!--
This example shows you how to get a bounding box for a feature from CartoDB
and move your map according to that bbox.
-->
<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;
background-color: #E5F5F7;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var layer;
function main() {
var map = L.map('map', {
zoomControl: false,
center: [53, 20],
zoom: 3
});
cartodb.createLayer(map, {
type: 'cartodb',
user_name: 'examples',
sublayers: [{
sql: 'select * from country_boundaries',
cartocss: '#layer{ polygon-fill: #f7e5d1; polygon-opacity: 1; line-color: #d2c0b1; line-width: 0.8; }'
}]
})
.addTo(map)
.on('done', function(layer_) {
var sql = new cartodb.SQL({ user: 'examples' });
sql.getBounds("select * from country_boundaries where iso_a3='MEX'").done(function(bounds) {
map.fitBounds(bounds)
});
}).on('error', function() {
cartodb.log.log("some error occurred");
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/callback_layer.html
+56
View File
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet example | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
function main() {
var map = new L.Map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
});
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
var layers = [
'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json',
'https://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json'
// add here more layers
]
var q = queue(3);
layers.forEach(function(vizjson) {
q.defer(function(vizjson, callback) {
cartodb.createLayer(map, vizjson, function(layer) { callback(null, layer); })
}, vizjson);
})
q.await(function() {
var leafletLayers = Array.prototype.slice.call(arguments, 1);
leafletLayers.forEach(function(lyr) {
lyr.addTo(map);
});
})
}
// you could use $(window).load(main);
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/core.html
+152
View File
@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html>
<head>
<title>Core | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 250px;
height: 250px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
<script>
/* 1: We can create an image using a custom build layer definition: */
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM nyc_wifi",
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
cartocss_version: "2.1.1"
}
}]
};
// and now we just ask for the URL and append it to the page
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
/* 2: Another option: with a vizjson defined in the CartoDB editor */
var vizjsons = [
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
{ zoom: 17, url: "https://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
{ basemap:"dark_nolabels", zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
{ basemap:"dark_nolabels", zoom: 5, url: "https://team.cartodb.com/api/v2/viz/a5a2b18a-5ea0-11e4-a944-0e4fddd5de28/viz.json" }
];
// Let's load all those URLs and add them to the page
for (var i = 0; i < vizjsons.length; i++) {
var v = vizjsons[i];
cartodb.Image(v.url, { basemap: v.basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
}
/* 3. Wait, say you have some images defined like this:
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
then you can create the images with the following code: */
$(function() {
$('.thumb').each(function() {
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
});
});
</script>
</head>
<body>
<div id="content">
<div class="map">
<script>
<!-- 4. You can also inject the image directly in the page like this: -->
cartodb.Image(vizjsons[1].url).size(250, 250).write();
</script>
</div>
<div class="map">
<script>
<!-- and you can specify a bunch of options too: -->
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
</script>
</div>
<div class="map">
<img data-vizjson-url="http://arce.cartodb.com/api/v2/viz/378a0910-a229-11e4-9569-0e018d66dc29/viz.json" class="thumb" />
</div>
<div class="map">
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/createLayer_custom_tooltip.html
+70
View File
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>Tooltip on hover with createLayer() | Cartodb.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="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<style>
html, body,#map {
width:100%;
height:100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script type="tooltip/html" id="tooltip_template">
<div class="cartodb-tooltip-content-wrapper">
<div class="cartodb-tooltip-content">
<h3>Name</h3>
<p>{{name}}</p>
<h3>Population</h3>
<p>{{pop2005}}</p>
</div>
</div>
</script>
<div id='map'></div>
<script type="text/javascript">
function main() {
var map = new L.Map('map', {center: [20, 20], zoom: 2});
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution/">CartoDB</a>'
}).addTo(map);
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
//do stuff
var sublayer = layer.getSubLayer(0);
sublayer.setInteractivity('cartodb_id, name, pop2005');
// tooltip definition for createLayer()
var testTooltip = layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: sublayer,
template: $('#tooltip_template').html(),
width: 200,
position: 'bottom|right',
fields: [{ name: 'name', population: 'pop2005' }]
});
$('body').append(testTooltip.render().el);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/createLayer_noLegend.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>CartoTemplate | CartoDB</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://carto.com/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!--
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
-->
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!--
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
-->
<!-- Drop your code between the script tags below! -->
<script>
mapUrl='https://documentation.cartodb.com/api/v2/viz/34dfd2e4-d62b-11e5-b5e7-0ea31932ec1d/viz.json'
map= new L.Map('map', {
zoom:2,
center:[0,0]
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
{attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution/">CartoDB</a>'
}).addTo(map);
cartodb.createLayer(map, mapUrl,{
//options
legends:false
}).addTo(map)
.done(function(layer){
//do stuff
console.log('legends active :'+ layer.options.legends);
});
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/createLayer_refresh_time.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>CartoTemplate | CartoDB</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;
}
/*.cartodb-logo{
display:none!important;
}*/
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!--
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
-->
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!--
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
-->
<!-- Drop your code between the script tags below! -->
<script>
mapUrl='https://team.cartodb.com/u/ernestomb/api/v2/viz/066ff802-a580-11e5-a9bb-0e3ff518bd15/viz.json'
map= new L.Map('map', {
zoom:9,
center:[40.5,-3.6]
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
{attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
cartodb.createLayer(map, mapUrl,{
//options
refreshTime:3500
}).addTo(map)
.done(function(layer){
//do stuff
});
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/css/OLstyle.css
+543
View File
@@ -0,0 +1,543 @@
div.olMap {
z-index: 0;
padding: 0 !important;
margin: 0 !important;
cursor: default;
}
div.olMapViewport {
text-align: left;
-ms-touch-action: none;
}
div.olLayerDiv {
-moz-user-select: none;
-khtml-user-select: none;
}
.olLayerGoogleCopyright {
left: 2px;
bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
right: auto !important;
}
.olLayerGooglePoweredBy {
left: 2px;
bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
bottom: 15px !important;
}
/* GMaps should not set styles on its container */
.olForeignContainer {
opacity: 1 !important;
}
.olControlAttribution {
font-size: smaller;
right: 3px;
bottom: 4.5em;
position: absolute;
display: block;
}
.olControlScale {
right: 3px;
bottom: 3em;
display: block;
position: absolute;
font-size: smaller;
}
.olControlScaleLine {
display: block;
position: absolute;
left: 10px;
bottom: 15px;
font-size: xx-small;
}
.olControlScaleLineBottom {
border: solid 2px black;
border-bottom: none;
margin-top:-2px;
text-align: center;
}
.olControlScaleLineTop {
border: solid 2px black;
border-top: none;
text-align: center;
}
.olControlPermalink {
right: 3px;
bottom: 1.5em;
display: block;
position: absolute;
font-size: smaller;
}
div.olControlMousePosition {
bottom: 0;
right: 3px;
display: block;
position: absolute;
font-family: Arial;
font-size: smaller;
}
.olControlOverviewMapContainer {
position: absolute;
bottom: 0;
right: 0;
}
.olControlOverviewMapElement {
padding: 10px 18px 10px 10px;
background-color: #00008B;
-moz-border-radius: 1em 0 0 0;
}
.olControlOverviewMapMinimizeButton,
.olControlOverviewMapMaximizeButton {
height: 18px;
width: 18px;
right: 0;
bottom: 80px;
cursor: pointer;
}
.olControlOverviewMapExtentRectangle {
overflow: hidden;
background-image: url("img/blank.gif");
cursor: move;
border: 2px dotted red;
}
.olControlOverviewMapRectReplacement {
overflow: hidden;
cursor: move;
background-image: url("img/overview_replacement.gif");
background-repeat: no-repeat;
background-position: center;
}
.olLayerGeoRSSDescription {
float:left;
width:100%;
overflow:auto;
font-size:1.0em;
}
.olLayerGeoRSSClose {
float:right;
color:gray;
font-size:1.2em;
margin-right:6px;
font-family:sans-serif;
}
.olLayerGeoRSSTitle {
float:left;font-size:1.2em;
}
.olPopupContent {
padding:5px;
overflow: auto;
}
.olControlNavigationHistory {
background-image: url("img/navigation_history.png");
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.olControlNavigationHistoryPreviousItemActive {
background-position: 0 0;
}
.olControlNavigationHistoryPreviousItemInactive {
background-position: 0 -24px;
}
.olControlNavigationHistoryNextItemActive {
background-position: -24px 0;
}
.olControlNavigationHistoryNextItemInactive {
background-position: -24px -24px;
}
div.olControlSaveFeaturesItemActive {
background-image: url(img/save_features_on.png);
background-repeat: no-repeat;
background-position: 0 1px;
}
div.olControlSaveFeaturesItemInactive {
background-image: url(img/save_features_off.png);
background-repeat: no-repeat;
background-position: 0 1px;
}
.olHandlerBoxZoomBox {
border: 2px solid red;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olHandlerBoxSelectFeature {
border: 2px solid blue;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olControlPanPanel {
top: 10px;
left: 5px;
}
.olControlPanPanel div {
background-image: url(img/pan-panel.png);
height: 18px;
width: 18px;
cursor: pointer;
position: absolute;
}
.olControlPanPanel .olControlPanNorthItemInactive {
top: 0;
left: 9px;
background-position: 0 0;
}
.olControlPanPanel .olControlPanSouthItemInactive {
top: 36px;
left: 9px;
background-position: 18px 0;
}
.olControlPanPanel .olControlPanWestItemInactive {
position: absolute;
top: 18px;
left: 0;
background-position: 0 18px;
}
.olControlPanPanel .olControlPanEastItemInactive {
top: 18px;
left: 18px;
background-position: 18px 18px;
}
.olControlZoomPanel {
top: 71px;
left: 14px;
}
.olControlZoomPanel div {
background-image: url(img/zoom-panel.png);
position: absolute;
height: 18px;
width: 18px;
cursor: pointer;
}
.olControlZoomPanel .olControlZoomInItemInactive {
top: 0;
left: 0;
background-position: 0 0;
}
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 18px;
left: 0;
background-position: 0 -18px;
}
.olControlZoomPanel .olControlZoomOutItemInactive {
top: 36px;
left: 0;
background-position: 0 18px;
}
/*
* When a potential text is bigger than the image it move the image
* with some headers (closes #3154)
*/
.olControlPanZoomBar div {
font-size: 1px;
}
.olPopupCloseBox {
background: url("img/close.gif") no-repeat;
cursor: pointer;
}
.olFramedCloudPopupContent {
padding: 5px;
overflow: auto;
}
.olControlNoSelect {
-moz-user-select: none;
-khtml-user-select: none;
}
.olImageLoadError {
background-color: pink;
opacity: 0.5;
filter: alpha(opacity=50); /* IE */
}
/**
* Cursor styles
*/
.olCursorWait {
cursor: wait;
}
.olDragDown {
cursor: move;
}
.olDrawBox {
cursor: crosshair;
}
.olControlDragFeatureOver {
cursor: move;
}
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
cursor: -moz-grabbing;
}
/**
* Layer switcher
*/
.olControlLayerSwitcher {
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: white;
background-color: transparent;
}
.olControlLayerSwitcher .layersDiv {
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: darkblue;
}
.olControlLayerSwitcher .layersDiv .baseLbl,
.olControlLayerSwitcher .layersDiv .dataLbl {
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
}
.olControlLayerSwitcher .layersDiv .baseLayersDiv,
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
padding-left: 10px;
}
.olControlLayerSwitcher .maximizeDiv,
.olControlLayerSwitcher .minimizeDiv {
width: 18px;
height: 18px;
top: 5px;
right: 0;
cursor: pointer;
}
.olBingAttribution {
color: #DDD;
}
.olBingAttribution.road {
color: #333;
}
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
color: #EEE;
}
.olGoogleAttribution {
color: #333;
}
span.olGoogleAttribution a {
color: #77C;
}
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
color: #EEE;
}
/**
* Editing and navigation icons.
* (using the editing_tool_bar.png sprint image)
*/
.olControlNavToolbar ,
.olControlEditingToolbar {
margin: 5px 5px 0 0;
}
.olControlNavToolbar div,
.olControlEditingToolbar div {
background-image: url("img/editing_tool_bar.png");
background-repeat: no-repeat;
margin: 0 0 5px 5px;
width: 24px;
height: 22px;
cursor: pointer
}
/* positions */
.olControlEditingToolbar {
right: 0;
top: 0;
}
.olControlNavToolbar {
top: 295px;
left: 9px;
}
/* layouts */
.olControlEditingToolbar div {
float: right;
}
/* individual controls */
.olControlNavToolbar .olControlNavigationItemInactive,
.olControlEditingToolbar .olControlNavigationItemInactive {
background-position: -103px -1px;
}
.olControlNavToolbar .olControlNavigationItemActive ,
.olControlEditingToolbar .olControlNavigationItemActive {
background-position: -103px -24px;
}
.olControlNavToolbar .olControlZoomBoxItemInactive {
background-position: -128px -1px;
}
.olControlNavToolbar .olControlZoomBoxItemActive {
background-position: -128px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
background-position: -77px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
background-position: -77px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
background-position: -51px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
background-position: -51px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
background-position: -26px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
background-position: -26px -24px;
}
div.olControlZoom, div.olControlTextButtonPanel {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
div.olControlZoom a {
font-size: 18px;
line-height: 19px;
height: 22px;
width:22px;
padding: 0;
}
div.olControlZoom a, div.olControlTextButtonPanel .olButton {
display: block;
margin: 1px;
color: white;
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 60, 136, 0.5);
filter: alpha(opacity=80);
}
div.olControlZoom a:hover, div.olControlTextButtonPanel .olButton:hover {
background: #130085; /* fallback for IE */
background: rgba(0, 60, 136, 0.7);
filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
div.olControlZoom a:hover, div.olControlTextButtonPanel .olButton:hover {
background: rgba(0, 60, 136, 0.5);
}
}
a.olControlZoomIn {
border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
border-radius: 0 0 4px 4px;
}
/**
* TextButtonPanel
*/
div.olControlTextButtonPanel .olButton {
float: left;
padding: 4px;
}
div.olControlTextButtonPanel.vertical .olButton {
float: none;
}
div.olControlTextButtonPanel .olButton:first-child {
border-radius: 4px 0 0 4px;
}
div.olControlTextButtonPanel .olButton:last-child {
border-radius: 0 4px 4px 0;
}
div.olControlTextButtonPanel.vertical .olButton:first-child {
border-radius: 4px 4px 0 0
}
div.olControlTextButtonPanel.vertical .olButton:last-child {
border-radius: 0 0 4px 4px;
}
/**
* Animations
*/
.olLayerGrid .olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
/* Turn on GPU support where available */
.olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
/* when replacing tiles, do not show tile and backbuffer at the same time */
.olTileReplacing {
display: none;
}
/* override any max-width image settings (e.g. bootstrap.css) */
img.olTileImage {
max-width: none;
}
lib/assets/javascripts/cdb/examples/cursor_interaction.html
+53
View File
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>Adding Cursor interaction to your map example | CartoDB.js</title>
<!--
This example shows you how to add cursor interaction to your map using CartoDB.js
-->
<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;
background-color: #E5F5F7;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
<script>
function main() {
var map = new L.Map('map', {
zoomControl: false,
center: [43, -30],
zoom: 3
});
cartodb.createLayer(map, 'http://examples.cartodb.com/api/v2/viz/255729a6-e28c-11e3-bcb7-0e10bcd91c2b/viz.json')
.addTo(map)
.on('done', function(layer) {
var subLayer = layer.getSubLayer(0);
subLayer.setInteraction(true); // Interaction for that layer must be enabled
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
layer.on('featureOver', featureOver);
})
function featureOver(e, latlng, pos, data) {
console.log(data.cartodb_id)
}
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/custom.html
+106
View File
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Legends | CartoDB.js</title>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
window.onload = function() {
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
var onVisDone = function(vis, layers) {
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
cartodb.log.log(e, latlng, pos, data, layerNumber);
});
// Adds our custom legend
var customLegend = new cdb.geo.ui.Legend.Custom({
title: "Custom Legend",
data: [
{ name: "Natural Parks", value: "#58A062" },
{ name: "Villages", value: "#F07971" },
{ name: "Rivers", value: "#54BFDE" },
{ name: "Fields", value: "#9BC562" },
{ name: "Caves", value: "#FABB5C" }
]
});
$(".legends").append(customLegend.render().$el);
};
cartodb.createVis('map', map_viz_url, {
legends: false,
zoom: 3,
no_cdn: true
}).done(onVisDone);
}
</script>
<style type="text/css">
html, body {
position:relative;
}
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.legend-selector {
position:absolute;
top: 20px; right: 20px;
margin: 0; padding: 0;
z-index: 100;
}
.legend-selector li {
display:inline-block;
margin: 0 0 0 10px; padding: 0;
list-style:none;
}
.legend-selector li a {
display:block;
text-decoration:none;
text-align:center;
font: normal 13px "Helvetica",Arial;
color: #858585;
webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 1px solid #999;
background: #FFF;
z-index: 5;
padding: 10px;
}
.legend-selector li a.selected {
background:#f1f1f1;
}
</style>
</head>
<body>
<ul class="legend-selector"> </ul>
<div id="map">
<div class="legends"></div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/custom_infowindow.html
+67
View File
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom infowindow example | CartoDB.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="https://carto.com/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<span> custom </span>
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<img style="width: 100%" src="http://rambo.webcindario.com/images/18447755.jpg">
<!-- content.data contains the field info -->
<h4>{{content.data.name}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: false,
center: [0, 0],
zoom: 3
});
// add a nice baselayer from Stamen
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
cartodb.createLayer(map, 'https://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
// get sublayer 0 and set the infowindow template
var sublayer = layer.getSubLayer(0);
sublayer.infowindow.set('template', $('#infowindow_template').html());
}).on('error', function() {
console.log("some error occurred");
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/easy.html
+59
View File
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<title>Easy example | CartoDB.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="https://carto.com/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
cartodb.createVis('map', 'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
shareable: true,
title: true,
description: true,
search: true,
tiles_loader: true,
center_lat: 0,
center_lon: 0,
zoom: 2
})
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// setInteraction is disabled by default
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data) {
cartodb.log.log(e, latlng, pos, data);
});
// you can get the native map to work with it
var map = vis.getNativeMap();
// now, perform any operations you need
// map.setZoom(3);
// map.panTo([50.5, 30.5]);
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/examples.json
+33
View File
@@ -0,0 +1,33 @@
{
"main": {
"file": "easy.html"
},
"categories": [
{
"title": "Basics",
"samples": [
{
"title": "Easy implementation",
"desc": "An easy example using the library",
"file": "easy.html"
},{
"title": "Leaflet integration",
"desc": "An example of leaflet integration",
"file": "leaflet.html"
}
]},
{
"title": "More than basics",
"samples": [
{
"title": "Infowindow",
"desc": "Customizing infowindow data",
"file": "custom_infowindow.html"
},{
"title": "Layer selector",
"desc": "An example using a layer selector",
"file": "layer_selector.html"
}
]}
]
}
lib/assets/javascripts/cdb/examples/filters-template/data.json
+44
View File
@@ -0,0 +1,44 @@
{
"interactions": [
{
"layers": {
"layer-0": {
"cartocss": "#european_countries_e {polygon-fill: red}",
"sql": "SELECT * FROM european_countries_e WHERE cartodb_id > 23",
"interactivity": "cartodb_id"
}
},
"name": "a",
"className": "test-1",
"text": "Red polygons"
},
{
"layers": {
"layer-0": {
"cartocss": "#european_countries_e {polygon-fill: blue}",
"sql": "SELECT * FROM european_countries_e WHERE cartodb_id < 2",
"interactivity": "cartodb_id"
}
},
"name": "a",
"className": "test-2",
"text": "Blue polygons"
},
{
"layers": {
"layer-0": {
"cartocss": "#european_countries_e {polygon-fill: yellow}",
"sql": "SELECT * FROM european_countries_e WHERE cartodb_id > 30",
"interactivity": "cartodb_id"
}
},
"name": "a",
"className": "test-3",
"text": "Yellow polygons long name dude"
}
],
"vizjson": "http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json"
}
lib/assets/javascripts/cdb/examples/filters-template/index.html
+26
View File
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CartoDB · Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div id="filters">
<ul></ul>
</div>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script src="main.js"></script>
</body>
</html>
lib/assets/javascripts/cdb/examples/filters-template/main.css
+49
View File
@@ -0,0 +1,49 @@
body, html, #map {
width:100%;
height:100%;
margin:0;
padding:0;
}
a {font-size:13px; color:#2483B4; text-decoration:none;}
a.selected {background:#F7F7F7; color:#333;}
a:hover {color:#333;}
a.selected:hover {color:#333; cursor:default;}
#filters {
position:absolute;
top:20px; right:20px;
width:147px;
z-index:10;
background:white;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:rgba(0, 0, 0, 0.2) 0 0 4px 2px;
border:1px solid rgba(204,204,204,0.35);
}
#filters ul {
margin:0;
padding:0;
list-style:none;
}
#filters li {
margin:0; padding:0;
border-bottom:1px solid rgba(204,204,204,0.35);
}
#filters li:last-child {
margin:0; padding:0;
border-bottom:none;
}
#filters li a {
display:block;
padding:13px 13px 15px 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
lib/assets/javascripts/cdb/examples/filters-template/main.js
+161
View File
@@ -0,0 +1,161 @@
$(document).ready(function() {
var Template = cdb.core.View.extend({
initialize: function() {
this._initElements();
},
_initElements: function() {
this.filters = new Filters({ el: this.$('#filters') });
this.map = new Map({ el: this.$('#map'), filters: this.filters });
}
});
window.template = new Template({ el: document.body });
})
/**
* Map
*/
var Map = cdb.core.View.extend({
initialize: function() {
_.bindAll(this, '_initMap');
this.filters = this.options.filters;
this._getVizJson();
this._bindEvents();
},
_getVizJson: function() {
$.ajax({
url: 'data.json',
success: this._initMap,
error: function() {
cdb.log.info('problems getting vizjson info, check tools.json url please')
}
})
},
_initMap: function(data) {
var self = this;
cartodb.createVis(this.$el, data.vizjson)
.done(function(vis, layers) {
self.layers = layers[1];
self.map = vis.getNativeMap();
});
},
_bindEvents: function() {
this.filters.bind('change', this._changeLayerGroup, this);
},
_changeLayerGroup: function(layers) {
var self = this;
_.each(layers, function(opts, i) {
var pos = i.split('-')[1];
var sublayer = self.layers.getSubLayer(pos);
if (sublayer) {
sublayer.set(opts);
}
});
}
})
/**
* Filters
*/
var Filters = cdb.core.View.extend({
initialize: function() {
_.bindAll(this, 'render');
this._getActions();
},
render: function(data) {
this.clearSubViews();
var self = this;
if (!data.interactions) return false;
var buttons = data.interactions;
for (var i = 0, l = buttons.length; i < l; i++) {
var a = new FiltersItem({ data: buttons[i] });
a.bind('change', this._triggerChange, this)
self.addView(a);
self.$('ul').append(a.render().el);
}
return this;
},
_triggerChange: function(d) {
this._setSelectedFilter(d);
this.trigger('change', d.layers, this);
},
_setSelectedFilter: function(d) {
this.$('ul li a').removeClass('selected');
this.$('ul li a').each(function(i,a) {
if ($(a).text() == d.text && $(a).attr('class') == d.className) {
$(a).addClass('selected')
}
})
},
_getActions: function() {
$.ajax({
url: 'data.json',
success: this.render,
error: function() {
cdb.log.info('oh no!, check your json location or if you are using a web server (Apache?)')
}
})
}
})
var FiltersItem = cdb.core.View.extend({
tagName: 'li',
events: {
'click': '_onClick'
},
initialize: function() {
_.bindAll(this, '_onClick');
this.data = this.options.data;
},
render: function() {
var $a = $('<a>');
$a
.addClass(this.data.className)
.text(this.data.text)
.attr('href', '#/' + this.data.text.replace(/ /gi,'-'));
this.$el.append($a);
return this;
},
_onClick: function(e) {
this.killEvent(e);
this.trigger('change', this.data, this);
}
})
lib/assets/javascripts/cdb/examples/format.html
+41
View File
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Single image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
</head>
<body>
<div id="content">
<div class="map">
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json").bbox([[-87.82814025878906,41.88719899247721], [ -87.5936508178711,41.942765696654604]]).size(500, 500).format("jpg").write();
</script>
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps/gmaps_driving_directions_plus_sql_api.html
+85
View File
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<title>Driving directions to clicked point | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
var map;
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
function main() {
// Map center
var myLatlng = new google.maps.LatLng(37.753, -122.433);
var myOptions = {
zoom: 13,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create services for later rendering of directions
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var directionsService = new google.maps.DirectionsService();
// The location of the Exploratorium
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
// Our CartoDB visualization
var vizjson_url = "http://team.cartodb.com/api/v2/viz/db067df4-8f8b-11e4-97e2-0e4fddd5de28/viz.json";
cartodb.createLayer(map, vizjson_url)
.addTo(map)
.done(function(layers) {
var subLayer = layers.getSubLayer(0);
// Change our SQL applied to the layer to include Lat and Lon values in the response
subLayer.set({"interactivity":"cartodb_id, lon, lat", "sql": "SELECT *, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM schools_public_pt"})
subLayer.setInteraction(true); // Interaction for that layer must be enabled
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
// Setup our event when an object is clicked
layers.on('featureClick', function(e, latlng, pos, data){
// the location of the clicked school
var school = new google.maps.LatLng(data.lat, data.lon);
var request = {
origin : school,
destination : exploratorium,
travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps/gmaps_heatmap_plus_sql_api.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps Heatmap of bike trips | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library + visualization-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.32&libraries=visualization"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
var map, pointarray, heatmap;
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
function main() {
// Map center
var myLatlng = new google.maps.LatLng(40.722, -73.997);
var myOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
var sql = cartodb.SQL({ user: 'andrew', format: 'geojson'});
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points").done(function(data) {
data = data.features.map(function(r) {
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
});
var pointArray = new google.maps.MVCArray(data);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.set('radius', heatmap.get('radius') ? null : 20);
heatmap.setMap(map);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps/gmaps_satellite.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps Satellite basemap | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="../../dist/cartodb.uncompressed.js"></script>
<script>
function main() {
var vizjson_url = "http://team.cartodb.com/api/v2/viz/7fff1080-f64b-11e3-82d4-0e230854a1cb/viz.json";
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
, gmaps_base_type: 'satellite'
})
.done(function(vis, layers) {
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps/gmaps_with_torque.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps plus Torque | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
function main() {
var vizjson_url = "http://team.cartodb.com/api/v2/viz/5d42a76a-96d1-11e4-976b-0e4fddd5de28/viz.json";
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
, gmaps_base_type: 'roadmap'
})
.done(function(vis, layers) {
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps_driving_directions_plus_sql_api.html
+85
View File
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<title>Driving directions to clicked point | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map;
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
function main() {
// Map center
var myLatlng = new google.maps.LatLng(37.753, -122.433);
var myOptions = {
zoom: 13,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create services for later rendering of directions
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var directionsService = new google.maps.DirectionsService();
// The location of the Exploratorium
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
// Our CartoDB visualization
var vizjson_url = "http://team.cartodb.com/api/v2/viz/db067df4-8f8b-11e4-97e2-0e4fddd5de28/viz.json";
cartodb.createLayer(map, vizjson_url)
.addTo(map)
.done(function(layers) {
var subLayer = layers.getSubLayer(0);
// Change our SQL applied to the layer to include Lat and Lon values in the response
subLayer.set({"interactivity":"cartodb_id, lon, lat", "sql": "SELECT *, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM schools_public_pt"})
subLayer.setInteraction(true); // Interaction for that layer must be enabled
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
// Setup our event when an object is clicked
layers.on('featureClick', function(e, latlng, pos, data){
// the location of the clicked school
var school = new google.maps.LatLng(data.lat, data.lon);
var request = {
origin : school,
destination : exploratorium,
travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps_force_basemap.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Force GMaps base type | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var vizjson_url = "http://documentation.cartodb.com/api/v2/viz/9f130ef2-6371-11e4-a0fd-0e9d821ea90d/viz.json";
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
, gmaps_base_type: 'roadmap'
, gmaps_style: '[{"featureType": "water","elementType": "geometry","stylers": [{ "color": "#80a580" }]}] '
})
.done(function(vis, layers) {
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps_heatmap_plus_sql_api.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps Heatmap of bike trips | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library + visualization-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.32&libraries=visualization"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map, pointarray, heatmap;
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
function main() {
// Map center
var myLatlng = new google.maps.LatLng(40.722, -73.997);
var myOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
var sql = cartodb.SQL({ user: 'andrew', format: 'geojson'});
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points").done(function(data) {
data = data.features.map(function(r) {
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
});
var pointArray = new google.maps.MVCArray(data);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.set('radius', heatmap.get('radius') ? null : 20);
heatmap.setMap(map);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps_satellite.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps Satellite basemap | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="../../dist/cartodb.uncompressed.js"></script>
<script>
function main() {
var vizjson_url = "http://team.cartodb.com/api/v2/viz/7fff1080-f64b-11e3-82d4-0e230854a1cb/viz.json";
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
, gmaps_base_type: 'satellite'
})
.done(function(vis, layers) {
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/gmaps_with_torque.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps plus Torque | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var vizjson_url = "http://team.cartodb.com/api/v2/viz/5d42a76a-96d1-11e4-976b-0e4fddd5de28/viz.json";
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
, gmaps_base_type: 'roadmap'
})
.done(function(vis, layers) {
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/header_overlay.html
+80
View File
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>Header with createLayer | CartoDB.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;
}
body > div.cartodb-header{
display: none;
position: absolute;
top:0px;
width: 100%;
background-color: rgba(0,0,0,.5);
font-family: 'Helvetica Neue',Helvetica,sans-serif;
line-height: normal;
z-index: 99999;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<script>
function main() {
var map = new L.Map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
});
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen',
}).addTo(map);
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json').addTo(map)
.done(function(layer) {
var sublayer = layer.getSubLayer(0);
var i = new cdb.geo.ui.Header({
model: new cdb.core.Model({
extra: {
title: "Title",
description: "Description",
show_title: true,
show_description: true
}
}),
template: cdb.core.Template.compile(
' \
<div class="content">\
<div class="title">{{{ title }}}</div>\
<div class="description">{{{ description }}}</div>\
</div>',
'mustache'
)
});
$('body').append(i.render().el);
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/image.html
+157
View File
@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<title>Image loading methods example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 250px;
height: 250px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
/* 1: We can create an image using a custom build layer definition: */
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM nyc_wifi",
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
cartocss_version: "2.1.1"
}
}]
};
// and now we just ask for the URL and append it to the page
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
var basemap = {
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
}
};
/* 2: Another option: with a vizjson defined in the CartoDB editor */
var vizjsons = [
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
{ zoom: 17, url: "https://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
{ zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
{ basemap: basemap, zoom: 5, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" }
];
// Let's load all those URLs and add them to the page
for (var i = 0; i < vizjsons.length; i++) {
var v = vizjsons[i];
cartodb.Image(v.url, { basemap: basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
}
/* 3. Wait, say you have some images defined like this:
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
then you can create the images with the following code: */
$(function() {
$('.thumb').each(function() {
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
});
});
</script>
</head>
<body>
<div id="content">
<div class="map">
<script>
<!-- 4. You can also inject the image directly in the page like this: -->
cartodb.Image(vizjsons[1].url).size(250, 250).write();
</script>
</div>
<div class="map">
<script>
<!-- and you can specify a bunch of options too: -->
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
</script>
</div>
<div class="map">
<img data-vizjson-url="https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" class="thumb" />
</div>
<div class="map">
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/basemap.html
+50
View File
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>Basemap | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
var basemap = {
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
}
};
</script>
</head>
<body>
<div id="content">
<div class="map">
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/01f93132-d5e6-11e3-855b-0e10bcd91c2b/viz.json", { basemap: basemap }).size(500, 500).write();
</script>
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/core.html
+152
View File
@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html>
<head>
<title>Core | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 250px;
height: 250px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.core.js"></script>
<script>
/* 1: We can create an image using a custom build layer definition: */
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM nyc_wifi",
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
cartocss_version: "2.1.1"
}
}]
};
// and now we just ask for the URL and append it to the page
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
/* 2: Another option: with a vizjson defined in the CartoDB editor */
var vizjsons = [
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
{ zoom: 17, url: "https://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
{ basemap:"dark_nolabels", zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
{ basemap:"dark_nolabels", zoom: 5, url: "https://team.cartodb.com/api/v2/viz/a5a2b18a-5ea0-11e4-a944-0e4fddd5de28/viz.json" }
];
// Let's load all those URLs and add them to the page
for (var i = 0; i < vizjsons.length; i++) {
var v = vizjsons[i];
cartodb.Image(v.url, { basemap: v.basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
}
/* 3. Wait, say you have some images defined like this:
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
then you can create the images with the following code: */
$(function() {
$('.thumb').each(function() {
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
});
});
</script>
</head>
<body>
<div id="content">
<div class="map">
<script>
<!-- 4. You can also inject the image directly in the page like this: -->
cartodb.Image(vizjsons[1].url).size(250, 250).write();
</script>
</div>
<div class="map">
<script>
<!-- and you can specify a bunch of options too: -->
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
</script>
</div>
<div class="map">
<img data-vizjson-url="http://arce.cartodb.com/api/v2/viz/378a0910-a229-11e4-9569-0e018d66dc29/viz.json" class="thumb" />
</div>
<div class="map">
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/format.html
+41
View File
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Single image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
</head>
<body>
<div id="content">
<div class="map">
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json").bbox([[-87.82814025878906,41.88719899247721], [ -87.5936508178711,41.942765696654604]]).size(500, 500).format("jpg").write();
</script>
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/image.html
+157
View File
@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<title>Image loading methods example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 250px;
height: 250px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
/* 1: We can create an image using a custom build layer definition: */
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM nyc_wifi",
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
cartocss_version: "2.1.1"
}
}]
};
// and now we just ask for the URL and append it to the page
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
var basemap = {
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
}
};
/* 2: Another option: with a vizjson defined in the CartoDB editor */
var vizjsons = [
{ zoom: 2, url: "http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
{ zoom: 17, url: "http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
{ zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
{ basemap: basemap, zoom: 5, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" }
];
// Let's load all those URLs and add them to the page
for (var i = 0; i < vizjsons.length; i++) {
var v = vizjsons[i];
cartodb.Image(v.url, { basemap: basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
};
img.src = url;
});
}
/* 3. Wait, say you have some images defined like this:
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
then you can create the images with the following code: */
$(function() {
$('.thumb').each(function() {
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
});
});
</script>
</head>
<body>
<div id="content">
<div class="map">
<script>
<!-- 4. You can also inject the image directly in the page like this: -->
cartodb.Image(vizjsons[1].url).size(250, 250).write();
</script>
</div>
<div class="map">
<script>
<!-- and you can specify a bunch of options too: -->
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
</script>
</div>
<div class="map">
<img data-vizjson-url="https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" class="thumb" />
</div>
<div class="map">
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/layer_definition.html
+81
View File
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>Image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
.map img { display: none; }
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
/* 1: We can create an image using a custom build layer definition: */
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM nyc_wifi",
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
cartocss_version: "2.1.1"
}
}]
};
// and now we just ask for the URL and append it to the page
cartodb.Image(layer_definition).size(500, 500).zoom(13).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
$img.fadeIn(250);
};
img.src = url;
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/plain-color.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>Plain color | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
.map img { display: none; }
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "plain",
options: {
color: "lightblue"
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM spreading_network",
cartocss: "#spreading_network{ marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #FF6600; marker-allow-overlap: true; } ",
cartocss_version: "2.1.1"
}
}
]
};
cartodb.Image(layer_definition).size(500, 500).zoom(2).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
$img.fadeIn(250);
};
img.src = url;
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/single-image.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Single image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
</head>
<body>
<div id="content">
<div class="map">
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json").bbox([-87.82814025878906,41.88719899247721, -87.5936508178711,41.942765696654604]).size(500, 500).write();
</script>
</div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/torque.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
.map img { display: none; }
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/3ec995a8-b6ae-11e4-849e-0e4fddd5de28/viz.json").size(500, 500).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
$img.fadeIn(250);
};
img.src = url;
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
lib/assets/javascripts/cdb/examples/images/torque_step.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
.map img { display: none; }
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<script>
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/3ec995a8-b6ae-11e4-849e-0e4fddd5de28/viz.json", { step: 100 }).size(500, 500).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
$img.fadeIn(250);
};
img.src = url;
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
lib/assets/javascripts/cdb/examples/index.html
+204
View File
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Legends | CartoDB.js</title>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
currentLegend = null;
legends = {};
legendsArray = [];
function selectLegend(e){
e.stopPropagation();
e.preventDefault();
var target = e.target;
var $link = $(e.target);
var type = $link.attr("data-legend");
if (type === 'stacked') {
$(".legend-selector a").addClass("selected");
var stackedLegend = new cdb.geo.ui.Legend.Stacked({
data: legendsArray
});
currentLegend = stackedLegend;
} else {
$(".legend-selector a.selected").removeClass("selected");
$link.addClass("selected");
currentLegend = legends[type].legend;
}
currentLegend.addTo(".legends");
// $("#map .legends").html(currentLegend.render().$el);
}
function renderLegendList() {
_.each(legends, function(legend, type) {
var li = '<li><a href="#" data-legend="' + type + '">' + legend.title + '</a></li>';
$(".legend-selector").append(li);
});
var li = '<li><a href="#" data-legend="stacked">Stacked</a></li>';
$(".legend-selector").append(li);
}
window.onload = function() {
var customLegend = new cdb.geo.ui.Legend.Custom({
title: "Custom Legend",
data: [
{ name: "Natural Parks", value: "#58A062" },
{ name: "Villages", value: "#F07971" },
{ name: "Rivers", value: "#54BFDE" },
{ name: "Fields", value: "#9BC562" },
{ name: "Caves", value: "#FABB5C" }
]
});
var categoryLegend = new cdb.geo.ui.Legend.Category({
title: "Category Legend",
data: [
{ name: "Airport Parks", value: "img/airport-24@2x.png", type: "image" },
{ name: "Heart", value: "img/heart-24@2x.png", type: "image" },
{ name: "Zoom", value: "img/zoo-24@2x.png", type: "image" },
{ name: "Fields", value: "img/tennis-24@2x.png", type: "image" },
{ name: "Caves", value: "img/town-hall-24@2x.png", type: "image" },
]
});
var bubbleLegend = new cdb.geo.ui.Legend.Bubble({
title: "Bubble Legend",
min: 21, max: 20, color: "red"
});
var densityLegend = new cdb.geo.ui.Legend.Density({
title: "Density Legend",
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
});
var intensityLegend = new cdb.geo.ui.Legend.Intensity({
title: "Intensity Legend",
left: "10", right: "20", color: "#f1f1f1"
});
legends = {
custom: { legend: customLegend, title: "Custom Legend" },
bubble: { legend: bubbleLegend, title: "Bubble Legend" },
density: { legend: densityLegend, title: "Density Legend" },
category: { legend: categoryLegend, title: "Category Legend" },
intensity: { legend: intensityLegend, title: "Intensity Legend" }
};
legendsArray = [{
title: "Category Legend",
data: [
{ name: "Natural Parks", value: "#58A062" },
{ name: "Villages", value: "#F07971" },
{ name: "Rivers", value: "#54BFDE" },
{ name: "Fields", value: "#9BC562" },
{ name: "Caves", value: "#FABB5C" }
]
}, {
type: "bubble",
title: "Bubble Legend",
min: 21, max: 20, color: "red"
}];
renderLegendList();
$(".legend-selector a").click(selectLegend);
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
var onVisDone = function(vis, layers) {
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
cartodb.log.log(e, latlng, pos, data, layerNumber);
});
};
cartodb.createVis('map', map_viz_url, { legends: false, no_cdn: true }).done(onVisDone);
}
</script>
<style type="text/css">
html, body {
position:relative;
}
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.legend-selector {
position:absolute;
top: 20px; right: 20px;
margin: 0; padding: 0;
z-index: 100;
}
.legend-selector li {
display:inline-block;
margin: 0 0 0 10px; padding: 0;
list-style:none;
}
.legend-selector li a {
display:block;
text-decoration:none;
text-align:center;
font: normal 13px "Helvetica",Arial;
color: #858585;
webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 1px solid #999;
background: #FFF;
z-index: 5;
padding: 10px;
}
.legend-selector li a.selected {
background:#f1f1f1;
}
</style>
</head>
<body>
<ul class="legend-selector"> </ul>
<div id="map">
<div class="legends"></div>
</div>
</body>
</html>
lib/assets/javascripts/cdb/examples/infowindow-on-hover.html
+51
View File
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Easy example | CartoDB.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://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
shareable: true,
title: true,
description: true,
search: true,
tiles_loader: true,
center_lat: 0,
center_lon: 0,
zoom: 2
})
.done(function(vis, layers) {
vis.addOverlay({
type: 'tooltip',
position: 'top|center',
template: '<p>id: #{{cartodb_id}}</p>'
});
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/infowindow-with-different-positioning.html
+59
View File
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<title>Infowindow working with different positionings | CartoDB.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 {
padding: 0;
margin: 0;
}
#map1 {
position: fixed;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
#map2 {
height: 400px;
padding: 0;
margin: 800px 50px 0 550px;
}
.scrollSign {
margin-left: 550px;
background: yellow;
position: absolute;
bottom: 0;
text-align: center;
padding: 10px 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map1"></div>
<div class="scrollSign">&#11015; &#11015; &#11015; Scroll down &#11015; &#11015; &#11015;</div>
<div id="map2"></div>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
cartodb.createVis('map1', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
})
cartodb.createVis('map2', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
})
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/infowindow_with_graph.html
+97
View File
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom infowindow example | CartoDB.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="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var INFOWINDOW_TEMPLATE = [
'<div class="cartodb-popup v2">',
' <a href="#close" class="cartodb-popup-close-button close">x</a>',
' <div class="cartodb-popup-content-wrapper">',
' <div class="cartodb-popup-content">',
' <div id="chart_div">',
' <script>',
' draw_chart([{{content.data.pop_min}}, {{content.data.pop_max}}], "{{content.data.name}}");',
' </scr' + 'ipt>',
' </div>',
' </div>',
' </div>',
' <div class="cartodb-popup-tip-container"></div>',
'</div>'].join('');
// load visualization library from google
google.load('visualization', '1.0', {'packages':['corechart']});
function draw_chart(data, name) {
var data = google.visualization.arrayToDataTable([
['', 'population'],
['max', data[0]],
['min', data[1]]
]);
var options = {
title: name + ' population',
legend: { position: "none" },
width: 300,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function main() {
// create map
var map = L.map('map', {
zoomControl: false,
center: [0, 0],
zoom: 3
});
// add a nice baselayer from Cartodb
L.tileLayer('http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/7eb2096a-51d9-11e3-89a7-5404a6a683d5/viz.json')
.addTo(map)
.on('done', function(layer) {
// get sublayer 0 and set the infowindow template
var sublayer = layer.getSubLayer(0);
sublayer.infowindow.set({
template: INFOWINDOW_TEMPLATE,
sanitizeTemplate: false,
width: 328,
maxHeight: 400
});
}).on('error', function() {
console.log("some error occurred");
});
}
window.onload = main;
</script>
</body>
</html>
lib/assets/javascripts/cdb/examples/layer_definition.html
+81
View File
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>Image example | CartoDB.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 {
height: 100%;
padding: 0;
margin: 0;
}
#content {
padding: 20px;
text-align: center;
}
.map {
float:left;
margin: 10px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
.map img { display: none; }
</style>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
/* 1: We can create an image using a custom build layer definition: */
var layer_definition = {
user_name: "documentation",
tiler_domain: "cartodb.com",
tiler_port: "80",
tiler_protocol: "http",
layers: [{
type: "http",
options: {
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}
}, {
type: "cartodb",
options: {
sql: "SELECT * FROM nyc_wifi",
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
cartocss_version: "2.1.1"
}
}]
};
// and now we just ask for the URL and append it to the page
cartodb.Image(layer_definition).size(500, 500).zoom(13).center([40.708517, -73.993414]).getUrl(function(error, url) {
var img = new Image();
img.onerror = function() {
console.log(error);
};
img.onload = function() {
var $map = $('<div class="map"></div>');
var $img = $('<img src="' + url + '" />');
$map.append($img);
$("#content").append($map);
$img.fadeIn(250);
};
img.src = url;
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More