https://github.com/atd/cartodb.js
Mini version of CartoDB.js from scratch
https://github.com/atd/cartodb.js
Last synced: 10 months ago
JSON representation
Mini version of CartoDB.js from scratch
- Host: GitHub
- URL: https://github.com/atd/cartodb.js
- Owner: atd
- License: mit
- Created: 2017-09-29T11:56:45.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-02T10:32:59.000Z (over 8 years ago)
- Last Synced: 2025-08-27T03:07:09.930Z (10 months ago)
- Language: JavaScript
- Size: 91.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# cartodb.js
Mini version of CartoDB.js
[](https://travis-ci.org/atd/cartodb.js)
[](https://codeclimate.com/github/atd/cartodb.js)
[](https://codeclimate.com/github/atd/cartodb.js)
[](https://david-dm.org/atd/cartodb.js)
[](https://david-dm.org/atd/cartodb.js#info=devDependencies)
## Quick start
1. Add jquery and cartodb.js to your site:
```html
```
2. Add the html element for the map and the config file
```html
var config = {
"center":"[52.5897007687178, 52.734375]",
"zoom":4,
"maps_api_config": {
"user_name": "documentation",
"maps_api_template": "http://{user}.cartodb.com:80"
},
"layers":[
{
"type":"tiled",
"options":{ "urlTemplate":"http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
"minZoom":"0",
"maxZoom":"18",
"attribution":"© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
}
},
{
"type":"CartoDB",
"options":{
"sql":"select * from european_countries_e",
"cartocss":"/** choropleth visualization */\n\n#european_countries_e{\n polygon-fill: #FFFFB2;\n polygon-opacity: 0.8;\n line-color: #FFF;\n line-width: 1;\n line-opacity: 0.5;\n}\n#european_countries_e [ area <= 1638094] {\n polygon-fill: #B10026;\n}\n#european_countries_e [ area <= 55010] {\n polygon-fill: #E31A1C;\n}\n#european_countries_e [ area <= 34895] {\n polygon-fill: #FC4E2A;\n}\n#european_countries_e [ area <= 12890] {\n polygon-fill: #FD8D3C;\n}\n#european_countries_e [ area <= 10025] {\n polygon-fill: #FEB24C;\n}\n#european_countries_e [ area <= 9150] {\n polygon-fill: #FED976;\n}\n#european_countries_e [ area <= 5592] {\n polygon-fill: #FFFFB2;\n}",
"cartocss_version":"2.1.1"
}
},
{
"options": {
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
"minZoom": "0",
"maxZoom": "18",
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
},
"type": "tiled"
}
],
}
```
2. Create the map from the config file
```html
var map = new CartoDB('#map', 'leaflet', config);
```
## Development
Use [yarn](https://yarnpkg.com/) to install node packages
```
yarn
```
Use `gulp watch` for development. It will run unit tests, rebuild the library and
launch a web server for accesing the example html pages.
TODO: html page live reload
### Testing
Run unit and acceptance tests with `gulp`
Alternatively, you can run either suite with `gulp test-unit` or `gulp test-acceptance`