Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Basemap selector | CARTO</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" />
|
||||
<link rel="stylesheet" href="../../dist/internal/themes/css/cartodb.css" />
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<style>
|
||||
html {
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#basemapSelector {
|
||||
background: white;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#basemapSelector h1 {
|
||||
font-size: 1.6em;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
#basemapSelector h2 {
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
#basemapSelector ul {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="basemapSelector">
|
||||
<h1>Basemap selector</h1>
|
||||
<h2>CartoDB</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="js-basemap" data-basemap-id="cartodb-positron" data-provider="leaflet">Positron</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-basemap" data-basemap-id="cartodb-dark-matter" data-provider="leaflet">Dark Matter</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Google Maps</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="js-basemap" data-basemap-id="gmaps-roadmap" data-provider="googlemaps">Roadmap</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-basemap" data-basemap-id="gmaps-satellite" data-provider="googlemaps">Satellite</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?key=AIzaSyCk5gRspKeHNJ0sS6iZotUsQvlAkXsieFg&v=3.32"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../../dist/internal/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
var BASEMAPS = {
|
||||
'cartodb-positron': {
|
||||
'urlTemplate': 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
|
||||
'attribution': '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
},
|
||||
'cartodb-dark-matter': {
|
||||
'urlTemplate': 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png',
|
||||
'attribution': '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
},
|
||||
'gmaps-roadmap': {
|
||||
'baseType': 'roadmap',
|
||||
'style': '[]'
|
||||
},
|
||||
'gmaps-satellite': {
|
||||
'baseType': 'satellite',
|
||||
'style': '[]'
|
||||
}
|
||||
};
|
||||
|
||||
var currentProvider = 'leaflet';
|
||||
var cartoDBMap;
|
||||
|
||||
function replaceBasemap(newProvider, basemapId) {
|
||||
var basemapAttrs = BASEMAPS[basemapId];
|
||||
if (!cartoDBMap) throw new Error('map not initialised yet');
|
||||
if (!basemapAttrs) throw new Error('unknown basemap');
|
||||
|
||||
// Remove the current baselayer
|
||||
cartoDBMap.removeLayerAt(0);
|
||||
|
||||
var changingProvider = currentProvider !== newProvider;
|
||||
var createLayerMethod;
|
||||
|
||||
if (newProvider === 'googlemaps') {
|
||||
createLayerMethod = cartoDBMap.createGMapsBaseLayer;
|
||||
} else { // leaflet
|
||||
createLayerMethod = cartoDBMap.createTileLayer;
|
||||
}
|
||||
|
||||
createLayerMethod.call(cartoDBMap, basemapAttrs, {
|
||||
at: 0,
|
||||
silent: changingProvider
|
||||
});
|
||||
|
||||
if (changingProvider) {
|
||||
cartoDBMap.set('provider', newProvider);
|
||||
currentProvider = newProvider;
|
||||
}
|
||||
}
|
||||
|
||||
$('.js-basemap').click(function (e) {
|
||||
e.preventDefault();
|
||||
replaceBasemap($(this).data('provider'), $(this).data('basemap-id'));
|
||||
});
|
||||
|
||||
function main() {
|
||||
var vizjson = {
|
||||
"id": "2b13c956-e7c1-11e2-806b-5404a6a683d5",
|
||||
"version": "0.1.0",
|
||||
"title": "european_countries_e 0",
|
||||
"likes": 0,
|
||||
"description": null,
|
||||
"scrollwheel": true,
|
||||
"legends": true,
|
||||
"url": null,
|
||||
"map_provider": "leaflet",
|
||||
"center": "[52.5897007687178, 52.734375]",
|
||||
"zoom": 4,
|
||||
"updated_at": "2015-03-13T11:24:37+00:00",
|
||||
"datasource": {
|
||||
"user_name": "documentation",
|
||||
"maps_api_template": "http://{user}.cartodb.com:80",
|
||||
"force_cors": true, // This is sometimes set in the editor,
|
||||
"stat_tag": "84ec6844-4b4b-11e5-9c1d-080027880ca6"
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"options": {
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"name": "Positron",
|
||||
"className": "default positron_rainbow",
|
||||
"baseType": "positron_rainbow",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
|
||||
"read_only": true,
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"subdomains": "abcd",
|
||||
"category": "CartoDB"
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"type": "tiled"
|
||||
},
|
||||
{
|
||||
"id": "923b7812-2d56-41c6-ac15-3ce430db090f",
|
||||
"type": "CartoDB",
|
||||
"infowindow": {
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 4
|
||||
}
|
||||
],
|
||||
"template": '' +
|
||||
'<div class="CDB-infowindow CDB-infowindow--custom js-infowindow" style="max-width: 200px;">' +
|
||||
'<div class="CDB-infowindow-close js-close"></div>' +
|
||||
'<div class="CDB-infowindow-container">' +
|
||||
'<div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--dark">' +
|
||||
'<div class="CDB-infowindow-list">' +
|
||||
'<div class="CDB-infowindow-listItem">' +
|
||||
'<h4 class="CDB-infowindow-title">{{ name }}</h4>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="CDB-hook CDB-hook--white">' +
|
||||
'<div class="CDB-hook-inner">' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
"alternative_names": {},
|
||||
"width": 226,
|
||||
"maxHeight": 180
|
||||
},
|
||||
"tooltip": {
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 1
|
||||
}
|
||||
],
|
||||
"template_name": "tooltip_light",
|
||||
"template": ' ' +
|
||||
'<div class="CDB-Tooltip CDB-Tooltip--isDark js-content">' +
|
||||
'<ul class="CDB-Tooltip-list">' +
|
||||
'{{#fields}}' +
|
||||
'<li class="CDB-Tooltip-listItem">' +
|
||||
'<h3 class="CDB-Tooltip-listTitle">NAME</h3>' +
|
||||
'<h4 class="CDB-Tooltip-listText">{{value}}</h4>' +
|
||||
'</li>' +
|
||||
'{{/fields}}' +
|
||||
'</ul>' +
|
||||
'</div>',
|
||||
"alternative_names": {},
|
||||
"maxHeight": 180
|
||||
},
|
||||
"legend": {
|
||||
"type": "choropleth",
|
||||
"show_title": false,
|
||||
"title": "",
|
||||
"template": "",
|
||||
"items": [
|
||||
{
|
||||
"name": "Left label",
|
||||
"visible": true,
|
||||
"value": "5592.00",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "Right label",
|
||||
"visible": true,
|
||||
"value": "1638094.00",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FFFFB2",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FED976",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FEB24C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FD8D3C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FC4E2A",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#E31A1C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#B10026",
|
||||
"type": "color"
|
||||
}
|
||||
]
|
||||
},
|
||||
"order": 1,
|
||||
"visible": true,
|
||||
"options": {
|
||||
"sql": "select * from european_countries_e",
|
||||
"layer_name": "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",
|
||||
"table_name": "\"\"."
|
||||
}
|
||||
}
|
||||
],
|
||||
"overlays": [
|
||||
{
|
||||
"type": "loader",
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 150
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "search",
|
||||
"options": {
|
||||
"display": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "zoom",
|
||||
"options": {
|
||||
"x": 20,
|
||||
"y": 20,
|
||||
"display": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"prev": null,
|
||||
"next": null,
|
||||
"transition_options": {}
|
||||
};
|
||||
cartodb.createVis('map', vizjson, {})
|
||||
.done(function (vis, layers) {
|
||||
cartoDBMap = vis.map;
|
||||
})
|
||||
.error(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,596 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Geometry Editor | CARTO</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" />
|
||||
<link rel="stylesheet" href="../../dist/internal/themes/css/cartodb.css" />
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
line-height: 2em;
|
||||
padding: 0 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebar-title-dark {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#controls {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls button {
|
||||
font-size: 14px;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#controls button.is-enabled {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#geojsonViewer {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#geojsonViewer textarea {
|
||||
background: black;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
color: #CDCDCD;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
line-height: 1em;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<h1>Geometry Editor</h1>
|
||||
<p class="sidebar-title">Tools</p>
|
||||
<div id="controls">
|
||||
<button class="js-drawing-control js-draw-point">Draw Point</button>
|
||||
<button class="js-drawing-control js-draw-line">Draw Polyline</button>
|
||||
<button class="js-drawing-control js-draw-polygon">Draw Polygon</button>
|
||||
<br/>
|
||||
<button class="js-drawing-control js-edit-geometry-point">Edit Point</button>
|
||||
<button class="js-drawing-control js-edit-geometry-polyline">Edit Polyline</button>
|
||||
<button class="js-drawing-control js-edit-geometry-polygon">Edit Polygon</button>
|
||||
<br/>
|
||||
<button class="js-drawing-control js-edit-geometry-multi-point">Edit MultiPoint</button>
|
||||
<button class="js-drawing-control js-edit-geometry-multi-polyline">Edit MultiPolyline</button>
|
||||
<button class="js-drawing-control js-edit-geometry-multi-polygon">Edit MultiPolygon</button>
|
||||
<br/>
|
||||
<button class="js-drawing-control js-edit-features">Click & Edit</button>
|
||||
</div>
|
||||
<p class="sidebar-title sidebar-title-dark">GeoJSON</p>
|
||||
<div id="geojsonViewer">
|
||||
<textarea class="js-geojson-textarea" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../../dist/internal/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
var vizjson = {
|
||||
"id": "2b13c956-e7c1-11e2-806b-5404a6a683d5",
|
||||
"version": "0.1.0",
|
||||
"title": "european_countries_e 0",
|
||||
"likes": 0,
|
||||
"description": null,
|
||||
"scrollwheel": true,
|
||||
"legends": true,
|
||||
"url": null,
|
||||
"map_provider": "leaflet",
|
||||
"center": "[52.5897007687178, 52.734375]",
|
||||
"zoom": 4,
|
||||
"updated_at": "2015-03-13T11:24:37+00:00",
|
||||
"datasource": {
|
||||
"user_name": "documentation",
|
||||
"maps_api_template": "http://{user}.cartodb.com:80",
|
||||
"force_cors": true, // This is sometimes set in the editor,
|
||||
"stat_tag": "84ec6844-4b4b-11e5-9c1d-080027880ca6"
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"options": {
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"name": "Positron",
|
||||
"className": "default positron_rainbow",
|
||||
"baseType": "positron_rainbow",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
|
||||
"read_only": true,
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"subdomains": "abcd",
|
||||
"category": "CartoDB"
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"type": "tiled"
|
||||
},
|
||||
{
|
||||
"id": "923b7812-2d56-41c6-ac15-3ce430db090f",
|
||||
"type": "CartoDB",
|
||||
"infowindow": {
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 4
|
||||
}
|
||||
],
|
||||
"template": '' +
|
||||
'<div class="CDB-infowindow CDB-infowindow--custom js-infowindow" style="max-width: 200px;">' +
|
||||
'<div class="CDB-infowindow-close js-close"></div>' +
|
||||
'<div class="CDB-infowindow-container">' +
|
||||
'<div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--dark">' +
|
||||
'<div class="CDB-infowindow-list">' +
|
||||
'<div class="CDB-infowindow-listItem">' +
|
||||
'<h4 class="CDB-infowindow-title">{{ name }}</h4>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="CDB-hook CDB-hook--white">' +
|
||||
'<div class="CDB-hook-inner">' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
"alternative_names": {},
|
||||
"width": 226,
|
||||
"maxHeight": 180
|
||||
},
|
||||
"tooltip": {
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 1
|
||||
}
|
||||
],
|
||||
"template_name": "tooltip_light",
|
||||
"template": ' ' +
|
||||
'<div class="CDB-Tooltip CDB-Tooltip--isDark js-content">' +
|
||||
'<ul class="CDB-Tooltip-list">' +
|
||||
'{{#fields}}' +
|
||||
'<li class="CDB-Tooltip-listItem">' +
|
||||
'<h3 class="CDB-Tooltip-listTitle">NAME</h3>' +
|
||||
'<h4 class="CDB-Tooltip-listText">{{value}}</h4>' +
|
||||
'</li>' +
|
||||
'{{/fields}}' +
|
||||
'</ul>' +
|
||||
'</div>',
|
||||
"alternative_names": {},
|
||||
"maxHeight": 180
|
||||
},
|
||||
"legend": {
|
||||
"type": "choropleth",
|
||||
"show_title": false,
|
||||
"title": "",
|
||||
"template": "",
|
||||
"items": [
|
||||
{
|
||||
"name": "Left label",
|
||||
"visible": true,
|
||||
"value": "5592.00",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "Right label",
|
||||
"visible": true,
|
||||
"value": "1638094.00",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FFFFB2",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FED976",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FEB24C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FD8D3C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FC4E2A",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#E31A1C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#B10026",
|
||||
"type": "color"
|
||||
}
|
||||
]
|
||||
},
|
||||
"order": 1,
|
||||
"visible": true,
|
||||
"options": {
|
||||
"sql": "select * from european_countries_e",
|
||||
"layer_name": "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",
|
||||
"table_name": "\"\"."
|
||||
}
|
||||
}
|
||||
],
|
||||
"overlays": [
|
||||
{
|
||||
"type": "loader",
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 150
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "fullscreen",
|
||||
"options": {
|
||||
"x": 20,
|
||||
"y": 140,
|
||||
"display": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "search",
|
||||
"options": {
|
||||
"display": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "zoom",
|
||||
"options": {
|
||||
"x": 20,
|
||||
"y": 20,
|
||||
"display": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"prev": null,
|
||||
"next": null,
|
||||
"transition_options": {}
|
||||
};
|
||||
|
||||
var point = {
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-3.779296875,
|
||||
40.245991504199026
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var polygon = {
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
-8.96484375,
|
||||
41.918628865183045
|
||||
],
|
||||
[
|
||||
-7.84423828125,
|
||||
43.74728909225908
|
||||
],
|
||||
[
|
||||
-1.69189453125,
|
||||
43.34914966389313
|
||||
],
|
||||
[
|
||||
3.1091308593749996,
|
||||
42.35042512243457
|
||||
],
|
||||
[
|
||||
3.1640625,
|
||||
41.828642001860544
|
||||
],
|
||||
[
|
||||
-1.9555664062500002,
|
||||
36.94111143010769
|
||||
],
|
||||
[
|
||||
-5.55908203125,
|
||||
36.00467348670187
|
||||
],
|
||||
[
|
||||
-7.31689453125,
|
||||
37.3002752813443
|
||||
],
|
||||
[
|
||||
-6.39404296875,
|
||||
41.74672584176937
|
||||
],
|
||||
[
|
||||
-8.96484375,
|
||||
41.918628865183045
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var polyline = {
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
-2.021484375,
|
||||
43.51668853502906
|
||||
],
|
||||
[
|
||||
3.6035156249999996,
|
||||
42.293564192170095
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var multiPoint = {
|
||||
"type": "MultiPoint",
|
||||
"coordinates": [[100.0, 0.0], [101.0, 1.0]]
|
||||
};
|
||||
var multiPolyline = {
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[[100.0, 0.0], [101.0, 1.0]],
|
||||
[[102.0, 2.0], [103.0, 3.0]]
|
||||
]
|
||||
};
|
||||
var multiPolygon = {
|
||||
"type": "MultiPolygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[[102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0], [102.0, 2.0]]
|
||||
],
|
||||
[
|
||||
[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]
|
||||
]
|
||||
]
|
||||
};
|
||||
function displayGeoJSON(geometry) {
|
||||
updateDisplayedGeoJSON(geometry);
|
||||
geometry.on('change', updateDisplayedGeoJSON);
|
||||
}
|
||||
|
||||
function updateDisplayedGeoJSON(geometry) {
|
||||
if (geometry.isComplete()) {
|
||||
$('.js-geojson-textarea').val(JSON.stringify(geometry.toGeoJSON(), null, 2));
|
||||
}
|
||||
}
|
||||
|
||||
function clearGeoJSON() {
|
||||
$('.js-geojson-textarea').val('');
|
||||
}
|
||||
|
||||
function drawPoint(vis) {
|
||||
return drawGeometry(vis, vis.map.drawPoint());
|
||||
}
|
||||
|
||||
function drawPolyline(vis) {
|
||||
return drawGeometry(vis, vis.map.drawPolyline());
|
||||
}
|
||||
|
||||
function drawPolygon(vis) {
|
||||
return drawGeometry(vis, vis.map.drawPolygon());
|
||||
}
|
||||
|
||||
function editGeometry(vis, geoJSON) {
|
||||
var geometry = window.geometry = vis.map.editGeometry(geoJSON);
|
||||
displayGeoJSON(geometry);
|
||||
}
|
||||
|
||||
function enableClickToEdit(vis) {
|
||||
vis.map.enableFeatureInteractivity();
|
||||
vis.map.on('featureClick', fetchFeatureAndEditGeometry, this);
|
||||
}
|
||||
|
||||
function disableClickToEdit(vis) {
|
||||
vis.map.disableFeatureInteractivity();
|
||||
vis.map.stopDrawingGeometry();
|
||||
vis.map.off('featureClick', fetchFeatureAndEditGeometry, this);
|
||||
}
|
||||
|
||||
function fetchFeatureAndEditGeometry(event) {
|
||||
var featureID = event.feature.cartodb_id;
|
||||
var tableName = 'european_countries_e';
|
||||
|
||||
var sql = new cartodb.SQL({
|
||||
protocol: 'https',
|
||||
user: 'documentation',
|
||||
host: 'cartodb.com'
|
||||
});
|
||||
sql.execute("SELECT ST_AsGeoJSON(the_geom) AS geojson FROM {{tableName }} WHERE cartodb_id = {{id}}", { tableName: tableName, id: featureID })
|
||||
.done(function (data) {
|
||||
var geoJSON = JSON.parse(data.rows[0].geojson);
|
||||
editGeometry(vis, geoJSON);
|
||||
})
|
||||
.error(function (errors) {
|
||||
// errors contains a list of errors
|
||||
console.log("errors:" + errors);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGeometry(vis, geometry) {
|
||||
window.geometry = geometry;
|
||||
clearGeoJSON();
|
||||
displayGeoJSON(geometry);
|
||||
|
||||
return geometry;
|
||||
}
|
||||
|
||||
function enableControls(vis) {
|
||||
$('.js-drawing-control').click(function () {
|
||||
var clickedControl = this;
|
||||
$('.js-drawing-control').each(function (index) {
|
||||
var isEnabled = false;
|
||||
if (clickedControl === this) {
|
||||
isEnabled = !($(this).hasClass('is-enabled'));
|
||||
}
|
||||
$(this).toggleClass('is-enabled', isEnabled);
|
||||
});
|
||||
vis.map.stopDrawingGeometry();
|
||||
vis.map.stopEditingGeometry();
|
||||
});
|
||||
|
||||
document.querySelector('.js-draw-point').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
drawPoint(vis);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-draw-line').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
drawPolyline(vis);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-draw-polygon').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
drawPolygon(vis);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-point').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, point);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-polyline').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, polyline);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-polygon').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, polygon);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-multi-point').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, multiPoint);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-multi-polyline').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, multiPolyline);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-multi-polygon').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, multiPolygon);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-features').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
enableClickToEdit(vis);
|
||||
} else {
|
||||
disableClickToEdit(vis);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function main() {
|
||||
cartodb.createVis('map', vizjson, {
|
||||
legends: false,
|
||||
gmaps_base_type: 'roadmap'
|
||||
})
|
||||
.done(function (vis, layers) {
|
||||
enableControls(vis);
|
||||
})
|
||||
.error(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,607 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Geometry Editor | CARTO</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" />
|
||||
<link rel="stylesheet" href="../../dist/internal/themes/css/cartodb.css" />
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
line-height: 2em;
|
||||
padding: 0 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sidebar-title-dark {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#map {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#controls {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls button {
|
||||
font-size: 14px;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#controls button.is-enabled {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#geojsonViewer {
|
||||
flex:1;
|
||||
padding: 10px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#geojsonViewer textarea {
|
||||
background: black;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
color: #CDCDCD;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
line-height: 1em;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<h1>Geometry Editor</h1>
|
||||
<p class="sidebar-title">Tools</p>
|
||||
<div id="controls">
|
||||
<button class="js-drawing-control js-draw-point">Draw Point</button>
|
||||
<button class="js-drawing-control js-draw-line">Draw Polyline</button>
|
||||
<button class="js-drawing-control js-draw-polygon">Draw Polygon</button>
|
||||
<br/>
|
||||
<button class="js-drawing-control js-edit-geometry-point">Edit Point</button>
|
||||
<button class="js-drawing-control js-edit-geometry-polyline">Edit Polyline</button>
|
||||
<button class="js-drawing-control js-edit-geometry-polygon">Edit Polygon</button>
|
||||
<br/>
|
||||
<button class="js-drawing-control js-edit-geometry-multi-point">Edit MultiPoint</button>
|
||||
<button class="js-drawing-control js-edit-geometry-multi-polyline">Edit MultiPolyline</button>
|
||||
<button class="js-drawing-control js-edit-geometry-multi-polygon">Edit MultiPolygon</button>
|
||||
<br/>
|
||||
<button class="js-drawing-control js-edit-features">Click & Edit</button>
|
||||
</div>
|
||||
<p class="sidebar-title sidebar-title-dark">GeoJSON</p>
|
||||
<div id="geojsonViewer">
|
||||
<textarea class="js-geojson-textarea" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../../dist/internal/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
var vizjson = {
|
||||
"id":"2b13c956-e7c1-11e2-806b-5404a6a683d5",
|
||||
"version":"0.1.0",
|
||||
"title":"european_countries_e 0",
|
||||
"likes":0,
|
||||
"description":null,
|
||||
"scrollwheel":true,
|
||||
"legends":true,
|
||||
"url":null,
|
||||
"map_provider":"leaflet",
|
||||
"center":"[52.5897007687178, 52.734375]",
|
||||
"zoom":4,
|
||||
"updated_at":"2015-03-13T11:24:37+00:00",
|
||||
"datasource": {
|
||||
"user_name": "documentation",
|
||||
"maps_api_template": "http://{user}.cartodb.com:80",
|
||||
"force_cors": true, // This is sometimes set in the editor,
|
||||
"stat_tag": "84ec6844-4b4b-11e5-9c1d-080027880ca6"
|
||||
},
|
||||
"layers":[
|
||||
{
|
||||
"options":{
|
||||
"id":"0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order":0,
|
||||
"visible":true,
|
||||
"type":"Tiled",
|
||||
"name":"Positron",
|
||||
"className":"default positron_rainbow",
|
||||
"baseType":"positron_rainbow",
|
||||
"urlTemplate":"http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
|
||||
"read_only":true,
|
||||
"minZoom":"0",
|
||||
"maxZoom":"18",
|
||||
"attribution":"© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"subdomains":"abcd",
|
||||
"category":"CartoDB"
|
||||
},
|
||||
"infowindow":null,
|
||||
"tooltip":null,
|
||||
"id":"0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order":0,
|
||||
"type":"tiled"
|
||||
},
|
||||
{
|
||||
"id":"923b7812-2d56-41c6-ac15-3ce430db090f",
|
||||
"type":"CartoDB",
|
||||
"infowindow":{
|
||||
"fields":[
|
||||
{
|
||||
"name":"name",
|
||||
"title":true,
|
||||
"position":4
|
||||
}
|
||||
],
|
||||
"template": '' +
|
||||
'<div class="CDB-infowindow CDB-infowindow--custom js-infowindow" style="max-width: 200px;">' +
|
||||
'<div class="CDB-infowindow-close js-close"></div>' +
|
||||
'<div class="CDB-infowindow-container">' +
|
||||
'<div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--dark">' +
|
||||
'<div class="CDB-infowindow-list">' +
|
||||
'<div class="CDB-infowindow-listItem">' +
|
||||
'<h4 class="CDB-infowindow-title">{{ name }}</h4>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="CDB-hook CDB-hook--white">' +
|
||||
'<div class="CDB-hook-inner">' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
"alternative_names":{},
|
||||
"width":226,
|
||||
"maxHeight":180
|
||||
},
|
||||
"tooltip":{
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 1
|
||||
}
|
||||
],
|
||||
"template_name":"tooltip_light",
|
||||
"template": ' '+
|
||||
'<div class="CDB-Tooltip CDB-Tooltip--isDark js-content">'+
|
||||
'<ul class="CDB-Tooltip-list">'+
|
||||
'{{#fields}}'+
|
||||
'<li class="CDB-Tooltip-listItem">'+
|
||||
'<h3 class="CDB-Tooltip-listTitle">NAME</h3>'+
|
||||
'<h4 class="CDB-Tooltip-listText">{{value}}</h4>'+
|
||||
'</li>'+
|
||||
'{{/fields}}'+
|
||||
'</ul>'+
|
||||
'</div>',
|
||||
"alternative_names":{},
|
||||
"maxHeight":180
|
||||
},
|
||||
"legend":{
|
||||
"type":"choropleth",
|
||||
"show_title":false,
|
||||
"title":"",
|
||||
"template":"",
|
||||
"items":[
|
||||
{
|
||||
"name":"Left label",
|
||||
"visible":true,
|
||||
"value":"5592.00",
|
||||
"type":"text"
|
||||
},
|
||||
{
|
||||
"name":"Right label",
|
||||
"visible":true,
|
||||
"value":"1638094.00",
|
||||
"type":"text"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FFFFB2",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FED976",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FEB24C",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FD8D3C",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FC4E2A",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#E31A1C",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#B10026",
|
||||
"type":"color"
|
||||
}
|
||||
]
|
||||
},
|
||||
"order":1,
|
||||
"visible":true,
|
||||
"options":{
|
||||
"sql":"select * from european_countries_e",
|
||||
"layer_name":"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",
|
||||
"table_name":"\"\"."
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"default": "true",
|
||||
"url": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
|
||||
"name": "Positron Labels",
|
||||
"id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
|
||||
"className": "httpsbasemapscartocdncomlight_only_labelszxypng",
|
||||
"order": 3
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
|
||||
"order": 3,
|
||||
"type": "tiled"
|
||||
}
|
||||
],
|
||||
"overlays":[
|
||||
{
|
||||
"type":"loader",
|
||||
"options":{
|
||||
"display":true,
|
||||
"x":20,
|
||||
"y":150
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"fullscreen",
|
||||
"options":{
|
||||
"x":20,
|
||||
"y":140,
|
||||
"display":true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"search",
|
||||
"options":{
|
||||
"display":true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"zoom",
|
||||
"options":{
|
||||
"x":20,
|
||||
"y":20,
|
||||
"display":true
|
||||
}
|
||||
}
|
||||
],
|
||||
"prev":null,
|
||||
"next":null,
|
||||
"transition_options":{}
|
||||
};
|
||||
|
||||
var point = {
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-3.779296875,
|
||||
40.245991504199026
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var polygon = {
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
-8.96484375,
|
||||
41.918628865183045
|
||||
],
|
||||
[
|
||||
-7.84423828125,
|
||||
43.74728909225908
|
||||
],
|
||||
[
|
||||
-1.69189453125,
|
||||
43.34914966389313
|
||||
],
|
||||
[
|
||||
3.1091308593749996,
|
||||
42.35042512243457
|
||||
],
|
||||
[
|
||||
3.1640625,
|
||||
41.828642001860544
|
||||
],
|
||||
[
|
||||
-1.9555664062500002,
|
||||
36.94111143010769
|
||||
],
|
||||
[
|
||||
-5.55908203125,
|
||||
36.00467348670187
|
||||
],
|
||||
[
|
||||
-7.31689453125,
|
||||
37.3002752813443
|
||||
],
|
||||
[
|
||||
-6.39404296875,
|
||||
41.74672584176937
|
||||
],
|
||||
[
|
||||
-8.96484375,
|
||||
41.918628865183045
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var polyline = {
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
-2.021484375,
|
||||
43.51668853502906
|
||||
],
|
||||
[
|
||||
3.6035156249999996,
|
||||
42.293564192170095
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var multiPoint = {
|
||||
"type": "MultiPoint",
|
||||
"coordinates": [ [100.0, 0.0], [101.0, 1.0] ]
|
||||
};
|
||||
var multiPolyline = {
|
||||
"type": "MultiLineString",
|
||||
"coordinates": [
|
||||
[ [100.0, 0.0], [101.0, 1.0] ],
|
||||
[ [102.0, 2.0], [103.0, 3.0] ]
|
||||
]
|
||||
};
|
||||
var multiPolygon = {
|
||||
"type": "MultiPolygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[ [102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0], [102.0, 2.0] ]
|
||||
],
|
||||
[
|
||||
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
|
||||
]
|
||||
]
|
||||
};
|
||||
function displayGeoJSON (geometry) {
|
||||
updateDisplayedGeoJSON(geometry);
|
||||
geometry.on('change', updateDisplayedGeoJSON);
|
||||
}
|
||||
|
||||
function updateDisplayedGeoJSON (geometry) {
|
||||
if (geometry.isComplete()) {
|
||||
$('.js-geojson-textarea').val(JSON.stringify(geometry.toGeoJSON(), null, 2));
|
||||
}
|
||||
}
|
||||
|
||||
function clearGeoJSON () {
|
||||
$('.js-geojson-textarea').val('');
|
||||
}
|
||||
|
||||
function drawPoint (vis) {
|
||||
return drawGeometry(vis, vis.map.drawPoint());
|
||||
}
|
||||
|
||||
function drawPolyline (vis) {
|
||||
return drawGeometry(vis, vis.map.drawPolyline());
|
||||
}
|
||||
|
||||
function drawPolygon (vis) {
|
||||
return drawGeometry(vis, vis.map.drawPolygon());
|
||||
}
|
||||
|
||||
function editGeometry (vis, geoJSON) {
|
||||
var geometry = window.geometry = vis.map.editGeometry(geoJSON);
|
||||
displayGeoJSON(geometry);
|
||||
}
|
||||
|
||||
function enableClickToEdit (vis) {
|
||||
vis.map.enableFeatureInteractivity();
|
||||
vis.map.on('featureClick', fetchFeatureAndEditGeometry, this);
|
||||
}
|
||||
|
||||
function disableClickToEdit (vis) {
|
||||
vis.map.disableFeatureInteractivity();
|
||||
vis.map.stopDrawingGeometry();
|
||||
vis.map.off('featureClick', fetchFeatureAndEditGeometry, this);
|
||||
}
|
||||
|
||||
function fetchFeatureAndEditGeometry (event) {
|
||||
var featureID = event.feature.cartodb_id;
|
||||
var tableName = 'european_countries_e';
|
||||
|
||||
var sql = new cartodb.SQL({
|
||||
protocol: 'https',
|
||||
user: 'documentation',
|
||||
host: 'cartodb.com'
|
||||
});
|
||||
sql.execute("SELECT ST_AsGeoJSON(the_geom) AS geojson FROM {{tableName }} WHERE cartodb_id = {{id}}", { tableName: tableName, id: featureID })
|
||||
.done(function(data) {
|
||||
var geoJSON = JSON.parse(data.rows[0].geojson);
|
||||
editGeometry(vis, geoJSON);
|
||||
})
|
||||
.error(function(errors) {
|
||||
// errors contains a list of errors
|
||||
console.log("errors:" + errors);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGeometry (vis, geometry) {
|
||||
window.geometry = geometry;
|
||||
clearGeoJSON();
|
||||
displayGeoJSON(geometry);
|
||||
|
||||
return geometry;
|
||||
}
|
||||
|
||||
function enableControls (vis) {
|
||||
$('.js-drawing-control').click(function () {
|
||||
var clickedControl = this;
|
||||
$('.js-drawing-control').each(function (index) {
|
||||
var isEnabled = false;
|
||||
if (clickedControl === this) {
|
||||
isEnabled = !($(this).hasClass('is-enabled'));
|
||||
}
|
||||
$(this).toggleClass('is-enabled', isEnabled);
|
||||
});
|
||||
vis.map.stopDrawingGeometry();
|
||||
vis.map.stopEditingGeometry();
|
||||
});
|
||||
|
||||
document.querySelector('.js-draw-point').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
drawPoint(vis);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-draw-line').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
drawPolyline(vis);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-draw-polygon').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
drawPolygon(vis);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-point').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, point);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-polyline').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, polyline);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-polygon').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, polygon);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-multi-point').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, multiPoint);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-multi-polyline').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, multiPolyline);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-geometry-multi-polygon').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
editGeometry(vis, multiPolygon);
|
||||
}
|
||||
});
|
||||
document.querySelector('.js-edit-features').addEventListener('click', function () {
|
||||
if ($(this).hasClass('is-enabled')) {
|
||||
enableClickToEdit(vis);
|
||||
} else {
|
||||
disableClickToEdit(vis);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function main () {
|
||||
cartodb.createVis('map', vizjson, {
|
||||
legends: false
|
||||
})
|
||||
.done(function (vis, layers) {
|
||||
enableControls(vis);
|
||||
})
|
||||
.error(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Easy example | CARTO</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" />
|
||||
<link rel="stylesheet" href="../../dist/internal/themes/css/cartodb.css" />
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../../dist/internal/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var vizjson = {
|
||||
"id":"2b13c956-e7c1-11e2-806b-5404a6a683d5",
|
||||
"version":"0.1.0",
|
||||
"title":"european_countries_e 0",
|
||||
"likes":0,
|
||||
"description":null,
|
||||
"scrollwheel":true,
|
||||
"legends":true,
|
||||
"url":null,
|
||||
"map_provider":"leaflet",
|
||||
"center":"[52.5897007687178, 52.734375]",
|
||||
"zoom":4,
|
||||
"updated_at":"2015-03-13T11:24:37+00:00",
|
||||
"datasource": {
|
||||
"user_name": "documentation",
|
||||
"maps_api_template": "http://{user}.cartodb.com:80",
|
||||
"force_cors": true, // This is sometimes set in the editor,
|
||||
"stat_tag": "84ec6844-4b4b-11e5-9c1d-080027880ca6"
|
||||
},
|
||||
"layers":[
|
||||
{
|
||||
"options":{
|
||||
"id":"0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order":0,
|
||||
"visible":true,
|
||||
"type":"Tiled",
|
||||
"name":"Positron",
|
||||
"className":"default positron_rainbow",
|
||||
"baseType":"positron_rainbow",
|
||||
"urlTemplate":"http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
|
||||
"read_only":true,
|
||||
"minZoom":"0",
|
||||
"maxZoom":"18",
|
||||
"attribution":"© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"subdomains":"abcd",
|
||||
"category":"CartoDB"
|
||||
},
|
||||
"infowindow":null,
|
||||
"tooltip":null,
|
||||
"id":"0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order":0,
|
||||
"type":"tiled"
|
||||
},
|
||||
{
|
||||
"id":"923b7812-2d56-41c6-ac15-3ce430db090f",
|
||||
"type":"CartoDB",
|
||||
"infowindow":{
|
||||
"fields":[
|
||||
{
|
||||
"name":"name",
|
||||
"title":true,
|
||||
"position":4
|
||||
}
|
||||
],
|
||||
"template": '' +
|
||||
'<div class="CDB-infowindow CDB-infowindow--custom js-infowindow" style="max-width: 200px;">' +
|
||||
'<div class="CDB-infowindow-close js-close"></div>' +
|
||||
'<div class="CDB-infowindow-container">' +
|
||||
'<div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--dark">' +
|
||||
'<div class="CDB-infowindow-list">' +
|
||||
'<div class="CDB-infowindow-listItem">' +
|
||||
'<h4 class="CDB-infowindow-title">{{ name }}</h4>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="CDB-hook CDB-hook--white">' +
|
||||
'<div class="CDB-hook-inner">' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
"alternative_names":{},
|
||||
"width":226,
|
||||
"maxHeight":180
|
||||
},
|
||||
"tooltip":{
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 1
|
||||
}
|
||||
],
|
||||
"template_name":"tooltip_light",
|
||||
"template": ' '+
|
||||
'<div class="CDB-Tooltip CDB-Tooltip--isDark js-content">'+
|
||||
'<ul class="CDB-Tooltip-list">'+
|
||||
'{{#fields}}'+
|
||||
'<li class="CDB-Tooltip-listItem">'+
|
||||
'<h3 class="CDB-Tooltip-listTitle">NAME</h3>'+
|
||||
'<h4 class="CDB-Tooltip-listText">{{value}}</h4>'+
|
||||
'</li>'+
|
||||
'{{/fields}}'+
|
||||
'</ul>'+
|
||||
'</div>',
|
||||
"alternative_names":{},
|
||||
"maxHeight":180
|
||||
},
|
||||
"legend":{
|
||||
"type":"choropleth",
|
||||
"show_title":false,
|
||||
"title":"",
|
||||
"template":"",
|
||||
"items":[
|
||||
{
|
||||
"name":"Left label",
|
||||
"visible":true,
|
||||
"value":"5592.00",
|
||||
"type":"text"
|
||||
},
|
||||
{
|
||||
"name":"Right label",
|
||||
"visible":true,
|
||||
"value":"1638094.00",
|
||||
"type":"text"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FFFFB2",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FED976",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FEB24C",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FD8D3C",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#FC4E2A",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#E31A1C",
|
||||
"type":"color"
|
||||
},
|
||||
{
|
||||
"name":"Color",
|
||||
"visible":true,
|
||||
"value":"#B10026",
|
||||
"type":"color"
|
||||
}
|
||||
]
|
||||
},
|
||||
"order":1,
|
||||
"visible":true,
|
||||
"options":{
|
||||
"sql":"select * from european_countries_e",
|
||||
"layer_name":"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",
|
||||
"table_name":"\"\"."
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"default": "true",
|
||||
"url": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
|
||||
"name": "Positron Labels",
|
||||
"id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
|
||||
"className": "httpsbasemapscartocdncomlight_only_labelszxypng",
|
||||
"order": 3
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
|
||||
"order": 3,
|
||||
"type": "tiled"
|
||||
}
|
||||
],
|
||||
"overlays":[
|
||||
{
|
||||
"type":"loader",
|
||||
"options":{
|
||||
"display":true,
|
||||
"x":20,
|
||||
"y":150
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"fullscreen",
|
||||
"options":{
|
||||
"x":20,
|
||||
"y":140,
|
||||
"display":true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"search",
|
||||
"options":{
|
||||
"display":true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"zoom",
|
||||
"options":{
|
||||
"x":20,
|
||||
"y":20,
|
||||
"display":true
|
||||
}
|
||||
}
|
||||
],
|
||||
"prev":null,
|
||||
"next":null,
|
||||
"transition_options":{}
|
||||
};
|
||||
cartodb.createVis('map', vizjson, {})
|
||||
.done(function(vis, layers) {
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Base example | CARTO</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<!--Include carto styles -->
|
||||
<link rel="stylesheet" href="../../dist/internal/themes/css/cartodb.css" />
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<!-- Include cartodb.js Library -->
|
||||
<script src="../../dist/internal/cartodb.uncompressed.js"></script>
|
||||
<!-- Custom Map styles -->
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#map {
|
||||
font-family: "Open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #162945;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
nav {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
color: #162945;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #FFF;
|
||||
padding: 5px 10px;
|
||||
background-color: #1785FB;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.CDB-OverlayContainer {
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.mapboxApiKey = 'pk.eyJ1IjoiY2FydG8tdGVhbSIsImEiOiJjamNseTl3ZzQwZnFkMndudnIydnJoMXZxIn0.HycQBkaaV7ZwLkHm5hEmfg';
|
||||
function loadVizJson(name) {
|
||||
let url = 'viz/' + name;
|
||||
fetch(url)
|
||||
.then(data => data.json())
|
||||
.then(vizjson => {
|
||||
cartodb.createVis('map', vizjson)
|
||||
.done(console.log)
|
||||
.error(console.error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="loadVizJson('003.json')">
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
{
|
||||
"id": "2b13c956-e7c1-11e2-806b-5404a6a683d5",
|
||||
"version": "0.1.0",
|
||||
"title": "european_countries_e 0",
|
||||
"likes": 0,
|
||||
"description": null,
|
||||
"scrollwheel": true,
|
||||
"legends": true,
|
||||
"url": null,
|
||||
"map_provider": "leaflet",
|
||||
"center": "[52.5897007687178, 52.734375]",
|
||||
"zoom": 4,
|
||||
"updated_at": "2015-03-13T11:24:37+00:00",
|
||||
"datasource": {
|
||||
"user_name": "documentation",
|
||||
"maps_api_template": "http://{user}.cartodb.com:80",
|
||||
"force_cors": true,
|
||||
"stat_tag": "84ec6844-4b4b-11e5-9c1d-080027880ca6"
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"options": {
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"name": "Positron",
|
||||
"className": "default positron_rainbow",
|
||||
"baseType": "positron_rainbow",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
|
||||
"read_only": true,
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"subdomains": "abcd",
|
||||
"category": "CartoDB"
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"type": "tiled"
|
||||
},
|
||||
{
|
||||
"id": "923b7812-2d56-41c6-ac15-3ce430db090f",
|
||||
"type": "CartoDB",
|
||||
"infowindow": {
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 4
|
||||
}
|
||||
],
|
||||
"template": "<div> {{ name }} </div>",
|
||||
"alternative_names": {},
|
||||
"width": 226,
|
||||
"maxHeight": 180
|
||||
},
|
||||
"tooltip": {
|
||||
"fields": [
|
||||
{
|
||||
"name": "name",
|
||||
"title": true,
|
||||
"position": 1
|
||||
}
|
||||
],
|
||||
"template_name": "tooltip_light",
|
||||
"template": "<div> TEMPLATE_1 </div>",
|
||||
"alternative_names": {},
|
||||
"maxHeight": 180
|
||||
},
|
||||
"legend": {
|
||||
"type": "choropleth",
|
||||
"show_title": false,
|
||||
"title": "",
|
||||
"template": "",
|
||||
"items": [
|
||||
{
|
||||
"name": "Left label",
|
||||
"visible": true,
|
||||
"value": "5592.00",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "Right label",
|
||||
"visible": true,
|
||||
"value": "1638094.00",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FFFFB2",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FED976",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FEB24C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FD8D3C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#FC4E2A",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#E31A1C",
|
||||
"type": "color"
|
||||
},
|
||||
{
|
||||
"name": "Color",
|
||||
"visible": true,
|
||||
"value": "#B10026",
|
||||
"type": "color"
|
||||
}
|
||||
]
|
||||
},
|
||||
"order": 1,
|
||||
"visible": true,
|
||||
"options": {
|
||||
"sql": "select * from european_countries_e",
|
||||
"layer_name": "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",
|
||||
"table_name": "\"\"."
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"default": "true",
|
||||
"url": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
|
||||
"name": "Positron Labels",
|
||||
"id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
|
||||
"className": "httpsbasemapscartocdncomlight_only_labelszxypng",
|
||||
"order": 3
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
|
||||
"order": 3,
|
||||
"type": "tiled"
|
||||
}
|
||||
],
|
||||
"overlays": [
|
||||
{
|
||||
"type": "loader",
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 150
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "fullscreen",
|
||||
"options": {
|
||||
"x": 20,
|
||||
"y": 140,
|
||||
"display": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "search",
|
||||
"options": {
|
||||
"display": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "zoom",
|
||||
"options": {
|
||||
"x": 20,
|
||||
"y": 20,
|
||||
"display": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"prev": null,
|
||||
"next": null,
|
||||
"transition_options": {}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
{
|
||||
"bounds": [
|
||||
[
|
||||
-73.8273,
|
||||
-179
|
||||
],
|
||||
[
|
||||
83.261,
|
||||
179
|
||||
]
|
||||
],
|
||||
"center": "[41, -3]",
|
||||
"datasource": {
|
||||
"user_name": "cartojs-test",
|
||||
"maps_api_template": "https://{user}.carto.com:443",
|
||||
"stat_tag": "3626e3ca-1e40-4e5c-95f8-f83b54131ddc"
|
||||
},
|
||||
"description": "<p>Basic test displaying points in red.</p>\n",
|
||||
"options": {
|
||||
"dashboard_menu": true,
|
||||
"layer_selector": false,
|
||||
"legends": true,
|
||||
"scrollwheel": true
|
||||
},
|
||||
"id": "3626e3ca-1e40-4e5c-95f8-f83b54131ddc",
|
||||
"layers": [
|
||||
{
|
||||
"id": "e7bbdf2c-8e66-49f3-b7b8-793e3a4fd6ea",
|
||||
"type": "tiled",
|
||||
"options": {
|
||||
"default": "true",
|
||||
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"name": "Voyager",
|
||||
"className": "voyager_labels",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"labels": {
|
||||
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png"
|
||||
},
|
||||
"urlTemplate": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "b39d9e30-1a03-48d2-8734-4e700632f800",
|
||||
"legends": [],
|
||||
"type": "CartoDB",
|
||||
"infowindow": {
|
||||
"template_name": "none",
|
||||
"fields": [],
|
||||
"maxHeight": 180,
|
||||
"template": "",
|
||||
"alternative_names": {},
|
||||
"width": 226,
|
||||
"headerColor": {
|
||||
"color": {
|
||||
"fixed": "#35AAE5",
|
||||
"opacity": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"fields": [],
|
||||
"template_name": "none",
|
||||
"template": "",
|
||||
"template_type": "mustache"
|
||||
},
|
||||
"visible": true,
|
||||
"options": {
|
||||
"layer_name": "ne_10m_populated_places_simple",
|
||||
"cartocss": "#layer {\n marker-width: 10;\n marker-fill: #ff0900;\n marker-fill-opacity: 1;\n marker-allow-overlap: true;\n marker-line-width: 1;\n marker-line-color: #FFFFFF;\n marker-line-opacity: 1;\n}",
|
||||
"cartocss_version": "2.1.1",
|
||||
"attribution": "",
|
||||
"source": "a0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7a5e026f-d014-43a7-b0c3-403eaabc889d",
|
||||
"type": "tiled",
|
||||
"options": {
|
||||
"default": "true",
|
||||
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"urlTemplate": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png",
|
||||
"type": "Tiled",
|
||||
"name": "Voyager Labels"
|
||||
}
|
||||
}
|
||||
],
|
||||
"likes": 0,
|
||||
"map_provider": "leaflet",
|
||||
"overlays": [
|
||||
{
|
||||
"type": "share",
|
||||
"order": 2,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 20
|
||||
},
|
||||
"template": ""
|
||||
},
|
||||
{
|
||||
"type": "search",
|
||||
"order": 3,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 60,
|
||||
"y": 20
|
||||
},
|
||||
"template": ""
|
||||
},
|
||||
{
|
||||
"type": "zoom",
|
||||
"order": 6,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 20
|
||||
},
|
||||
"template": "<a href=\"#zoom_in\" class=\"zoom_in\">+</a> <a href=\"#zoom_out\" class=\"zoom_out\">-</a>"
|
||||
},
|
||||
{
|
||||
"type": "loader",
|
||||
"order": 8,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 150
|
||||
},
|
||||
"template": "<div class=\"loader\" original-title=\"\"></div>"
|
||||
},
|
||||
{
|
||||
"type": "logo",
|
||||
"order": 9,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 10,
|
||||
"y": 40
|
||||
},
|
||||
"template": ""
|
||||
}
|
||||
],
|
||||
"title": "001-Test",
|
||||
"updated_at": "2017-10-24T11:29:21+00:00",
|
||||
"user": {
|
||||
"fullname": "cartojs-test",
|
||||
"avatar_url": "//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_planet_orange.png",
|
||||
"profile_url": "https://cartojs-test.carto.com"
|
||||
},
|
||||
"version": "3.0.0",
|
||||
"widgets": [],
|
||||
"zoom": 7,
|
||||
"analyses": [
|
||||
{
|
||||
"id": "a0",
|
||||
"type": "source",
|
||||
"params": {
|
||||
"query": "SELECT * FROM ne_10m_populated_places_simple"
|
||||
},
|
||||
"options": {
|
||||
"table_name": "ne_10m_populated_places_simple"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
{
|
||||
"bounds": [
|
||||
[
|
||||
-73.8273,
|
||||
-179
|
||||
],
|
||||
[
|
||||
83.261,
|
||||
179
|
||||
]
|
||||
],
|
||||
"center": "[41, -3]",
|
||||
"datasource": {
|
||||
"user_name": "cartojs-test",
|
||||
"maps_api_template": "https://{user}.carto.com:443",
|
||||
"stat_tag": "b8c116e4-37af-4eee-83d6-79d4c33201e4"
|
||||
},
|
||||
"description": "<p>Map to test the different generated legends.</p>\n\n<p>Points to test:</p>\n\n<ul>\n<li>Category legend</li>\n<li>Choropleth legend</li>\n<li>Bubble legend</li>\n</ul>\n\n<p>(Choropleth and bubble share the same layer)</p>\n",
|
||||
"options": {
|
||||
"dashboard_menu": true,
|
||||
"layer_selector": false,
|
||||
"legends": true,
|
||||
"scrollwheel": true
|
||||
},
|
||||
"id": "b8c116e4-37af-4eee-83d6-79d4c33201e4",
|
||||
"layers": [
|
||||
{
|
||||
"id": "0176d48c-09b1-4bf2-9493-546b93e4df88",
|
||||
"type": "tiled",
|
||||
"options": {
|
||||
"default": "true",
|
||||
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"name": "Voyager",
|
||||
"className": "voyager_labels",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"labels": {
|
||||
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png"
|
||||
},
|
||||
"urlTemplate": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png",
|
||||
"type": "Tiled"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7c115d5b-6c1e-4390-890f-52d9c12f6cb2",
|
||||
"legends": [
|
||||
{
|
||||
"conf": {
|
||||
"columns": []
|
||||
},
|
||||
"created_at": "2017-10-24T11:52:52+00:00",
|
||||
"definition": {},
|
||||
"id": "61c56598-c76e-4b11-952e-7412452e6e29",
|
||||
"layer_id": "7c115d5b-6c1e-4390-890f-52d9c12f6cb2",
|
||||
"post_html": "",
|
||||
"pre_html": "",
|
||||
"title": "pop_max",
|
||||
"type": "choropleth",
|
||||
"updated_at": "2017-10-24T12:02:06+00:00"
|
||||
},
|
||||
{
|
||||
"conf": {
|
||||
"columns": []
|
||||
},
|
||||
"created_at": "2017-10-24T12:01:27+00:00",
|
||||
"definition": {
|
||||
"color": "#fef6b5",
|
||||
"top_label": "",
|
||||
"bottom_label": ""
|
||||
},
|
||||
"id": "6210c946-9ee5-4d8a-ba99-25a8d7c5bc65",
|
||||
"layer_id": "7c115d5b-6c1e-4390-890f-52d9c12f6cb2",
|
||||
"post_html": "",
|
||||
"pre_html": "",
|
||||
"title": "pop_max",
|
||||
"type": "bubble",
|
||||
"updated_at": "2017-10-24T12:02:06+00:00"
|
||||
}
|
||||
],
|
||||
"type": "CartoDB",
|
||||
"infowindow": {
|
||||
"template_name": "none",
|
||||
"maxHeight": 180,
|
||||
"template": "",
|
||||
"alternative_names": {},
|
||||
"fields": null,
|
||||
"width": 226,
|
||||
"headerColor": {
|
||||
"color": {
|
||||
"fixed": "#35AAE5",
|
||||
"opacity": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"template_name": "none",
|
||||
"template": ""
|
||||
},
|
||||
"visible": true,
|
||||
"options": {
|
||||
"layer_name": "Layer1",
|
||||
"cartocss": "#layer {\n marker-width: ramp([pop_max], range(2, 11), quantiles(5));\n marker-fill: ramp([pop_max], (#fef6b5, #ffd08e, #ffa679, #f67b77, #e15383), quantiles);\n marker-fill-opacity: 1;\n marker-allow-overlap: true;\n marker-line-width: 1;\n marker-line-color: #FFFFFF;\n marker-line-opacity: 1;\n}",
|
||||
"cartocss_version": "2.1.1",
|
||||
"attribution": "",
|
||||
"source": "c0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "97bf19b9-fee0-49fd-ad44-8f4026da6888",
|
||||
"legends": [
|
||||
{
|
||||
"conf": {
|
||||
"columns": [
|
||||
"title"
|
||||
]
|
||||
},
|
||||
"created_at": "2017-10-24T11:52:00+00:00",
|
||||
"definition": {},
|
||||
"id": "07cc33c9-63c3-4bc6-9c9a-6b3c46ebbda1",
|
||||
"layer_id": "97bf19b9-fee0-49fd-ad44-8f4026da6888",
|
||||
"post_html": "",
|
||||
"pre_html": "",
|
||||
"title": "Category Legend",
|
||||
"type": "category",
|
||||
"updated_at": "2017-10-24T11:59:25+00:00"
|
||||
}
|
||||
],
|
||||
"type": "CartoDB",
|
||||
"infowindow": {
|
||||
"template_name": "none",
|
||||
"maxHeight": 180,
|
||||
"template": "",
|
||||
"alternative_names": {},
|
||||
"fields": null,
|
||||
"width": 226,
|
||||
"headerColor": {
|
||||
"color": {
|
||||
"fixed": "#35AAE5",
|
||||
"opacity": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"template_name": "none",
|
||||
"template": ""
|
||||
},
|
||||
"visible": true,
|
||||
"options": {
|
||||
"layer_name": "layer0",
|
||||
"cartocss": "#layer {\n marker-width: 7;\n marker-fill: ramp([featurecla], (#5F4690, #1D6996, #38A6A5, #0F8554, #73AF48, #EDAD08, #E17C05, #CC503E), (\"Populated place\", \"Admin-1 capital\", \"Admin-0 capital\", \"Admin-1 region capital\", \"Scientific station\", \"Admin-0 region capital\", \"Admin-0 capital alt\", \"Historic place\"), \"=\");\n marker-fill-opacity: 1;\n marker-allow-overlap: true;\n marker-line-width: 0;\n marker-line-color: #FFFFFF;\n marker-line-opacity: 1;\n}",
|
||||
"cartocss_version": "2.1.1",
|
||||
"attribution": "",
|
||||
"source": "b0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2669e10c-d1bf-4ed5-8f8e-6518a1afb234",
|
||||
"type": "tiled",
|
||||
"options": {
|
||||
"default": "true",
|
||||
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png",
|
||||
"subdomains": "abcd",
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"urlTemplate": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png",
|
||||
"type": "Tiled",
|
||||
"name": "Voyager Labels"
|
||||
}
|
||||
}
|
||||
],
|
||||
"likes": 0,
|
||||
"map_provider": "leaflet",
|
||||
"overlays": [
|
||||
{
|
||||
"type": "share",
|
||||
"order": 2,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 20
|
||||
},
|
||||
"template": ""
|
||||
},
|
||||
{
|
||||
"type": "search",
|
||||
"order": 3,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 60,
|
||||
"y": 20
|
||||
},
|
||||
"template": ""
|
||||
},
|
||||
{
|
||||
"type": "zoom",
|
||||
"order": 6,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 20
|
||||
},
|
||||
"template": "<a href=\"#zoom_in\" class=\"zoom_in\">+</a> <a href=\"#zoom_out\" class=\"zoom_out\">-</a>"
|
||||
},
|
||||
{
|
||||
"type": "loader",
|
||||
"order": 8,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 20,
|
||||
"y": 150
|
||||
},
|
||||
"template": "<div class=\"loader\" original-title=\"\"></div>"
|
||||
},
|
||||
{
|
||||
"type": "logo",
|
||||
"order": 9,
|
||||
"options": {
|
||||
"display": true,
|
||||
"x": 10,
|
||||
"y": 40
|
||||
},
|
||||
"template": ""
|
||||
}
|
||||
],
|
||||
"title": "002-Test",
|
||||
"updated_at": "2017-10-24T12:05:16+00:00",
|
||||
"user": {
|
||||
"fullname": "cartojs-test",
|
||||
"avatar_url": "//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_planet_orange.png",
|
||||
"profile_url": "https://cartojs-test.carto.com"
|
||||
},
|
||||
"version": "3.0.0",
|
||||
"widgets": [],
|
||||
"zoom": 7,
|
||||
"analyses": [
|
||||
{
|
||||
"id": "c0",
|
||||
"type": "source",
|
||||
"params": {
|
||||
"query": "SELECT * FROM ne_10m_populated_places_simple"
|
||||
},
|
||||
"options": {
|
||||
"table_name": "ne_10m_populated_places_simple",
|
||||
"simple_geom": "point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "b0",
|
||||
"type": "source",
|
||||
"params": {
|
||||
"query": "SELECT * FROM ne_10m_populated_places_simple"
|
||||
},
|
||||
"options": {
|
||||
"table_name": "ne_10m_populated_places_simple",
|
||||
"simple_geom": "point"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"id": "2b13c956-e7c1-11e2-806b-5404a6a683d5",
|
||||
"version": "0.1.0",
|
||||
"title": "european_countries_e 0",
|
||||
"likes": 0,
|
||||
"description": null,
|
||||
"scrollwheel": true,
|
||||
"legends": true,
|
||||
"url": null,
|
||||
"map_provider": "leaflet",
|
||||
"center": "[52.5897007687178, 52.734375]",
|
||||
"zoom": 4,
|
||||
"updated_at": "2015-03-13T11:24:37+00:00",
|
||||
"datasource": {
|
||||
"user_name": "documentation",
|
||||
"maps_api_template": "http://{user}.cartodb.com:80",
|
||||
"force_cors": true,
|
||||
"stat_tag": "84ec6844-4b4b-11e5-9c1d-080027880ca6"
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"options": {
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"visible": true,
|
||||
"type": "Tiled",
|
||||
"name": "Positron",
|
||||
"className": "default positron_rainbow",
|
||||
"baseType": "positron_rainbow",
|
||||
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
|
||||
"read_only": true,
|
||||
"minZoom": "0",
|
||||
"maxZoom": "18",
|
||||
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
|
||||
"subdomains": "abcd",
|
||||
"category": "CartoDB"
|
||||
},
|
||||
"infowindow": null,
|
||||
"tooltip": null,
|
||||
"id": "0a3d9104-99c6-482b-9f8c-7c6134bddcdc",
|
||||
"order": 0,
|
||||
"type": "tiled"
|
||||
}
|
||||
],
|
||||
"overlays": [
|
||||
{
|
||||
"type": "search",
|
||||
"options": {
|
||||
"display": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Base example | CARTO</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<!--Include carto styles -->
|
||||
<link rel="stylesheet" href="../../dist/internal/themes/css/cartodb.css" />
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<!-- Include cartodb.js Library -->
|
||||
<script src="../../dist/internal/cartodb.uncompressed.js"></script>
|
||||
<!-- Custom Map styles -->
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#map {
|
||||
font-family: "Open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #162945;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
#map {
|
||||
height: calc(100% - 55px);
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
color: #162945;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #FFF;
|
||||
padding: 5px 10px;
|
||||
background-color: #1785FB;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.CDB-OverlayContainer{
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function loadVizJson(name) {
|
||||
let url = 'viz/' + name;
|
||||
fetch(url)
|
||||
.then(data => data.json())
|
||||
.then(vizjson => {
|
||||
cartodb.createVis('map', vizjson)
|
||||
.done(console.log)
|
||||
.error(console.error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<input list="examples" type="text" name="url" onchange="loadVizJson(document.querySelector('input').value)">
|
||||
<datalist id="examples">
|
||||
<option value="000.json" />
|
||||
<option value="001.json" />
|
||||
<option value="002.json" />
|
||||
<option value="003.json" />
|
||||
</datalist>
|
||||
<button onclick="loadVizJson(document.querySelector('input').value)" type="button">LOAD VIZ</button>
|
||||
</nav>
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user