cdb
This commit is contained in:
zhongjin
@@ -0,0 +1,454 @@
|
||||
(function() {
|
||||
|
||||
cdb.vis.Overlay.register('logo', function(data, vis) {
|
||||
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('slides_controller', function(data, vis) {
|
||||
|
||||
var slides_controller = new cdb.geo.ui.SlidesController({
|
||||
transitions: data.transitions,
|
||||
visualization: vis
|
||||
});
|
||||
|
||||
return slides_controller.render();
|
||||
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('mobile', function(data, vis) {
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<div class="backdrop"></div>\
|
||||
<div class="cartodb-header">\
|
||||
<div class="content">\
|
||||
<a href="#" class="fullscreen"></a>\
|
||||
<a href="#" class="toggle"></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="aside">\
|
||||
<div class="layer-container">\
|
||||
<div class="scrollpane"><ul class="layers"></ul></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="cartodb-attribution"></div>\
|
||||
<a href="#" class="cartodb-attribution-button"></a>\
|
||||
<div class="torque"></div>\
|
||||
',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: vis.mapView,
|
||||
overlays: data.overlays,
|
||||
transitions: data.transitions,
|
||||
slides_data: data.slides,
|
||||
visualization: vis,
|
||||
layerView: data.layerView,
|
||||
visibility_options: data.options,
|
||||
torqueLayer: data.torqueLayer,
|
||||
map: data.map
|
||||
});
|
||||
|
||||
return mobile.render();
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('image', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<div class="content">\
|
||||
<div class="text widget_text">{{{ content }}}</div>\
|
||||
</div>',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var widget = new cdb.geo.ui.Image({
|
||||
model: new cdb.core.Model(options),
|
||||
template: template
|
||||
});
|
||||
|
||||
return widget.render();
|
||||
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('text', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<div class="content">\
|
||||
<div class="text widget_text">{{{ text }}}</div>\
|
||||
</div>',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var widget = new cdb.geo.ui.Text({
|
||||
model: new cdb.core.Model(options),
|
||||
template: template,
|
||||
className: "cartodb-overlay overlay-text " + options.device
|
||||
});
|
||||
|
||||
return widget.render();
|
||||
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('annotation', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<div class="content">\
|
||||
<div class="text widget_text">{{{ text }}}</div>\
|
||||
<div class="stick"><div class="ball"></div></div>\
|
||||
</div>',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var options = data.options;
|
||||
|
||||
var widget = new cdb.geo.ui.Annotation({
|
||||
className: "cartodb-overlay overlay-annotation " + options.device,
|
||||
template: template,
|
||||
mapView: vis.mapView,
|
||||
device: options.device,
|
||||
text: options.extra.rendered_text,
|
||||
minZoom: options.style["min-zoom"],
|
||||
maxZoom: options.style["max-zoom"],
|
||||
latlng: options.extra.latlng,
|
||||
style: options.style
|
||||
});
|
||||
|
||||
return widget.render();
|
||||
|
||||
});
|
||||
|
||||
|
||||
cdb.vis.Overlay.register('zoom_info', function(data, vis) {
|
||||
//console.log("placeholder for the zoom_info overlay");
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('header', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<div class="content">\
|
||||
<div class="title">{{{ title }}}</div>\
|
||||
<div class="description">{{{ description }}}</div>\
|
||||
</div>',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var widget = new cdb.geo.ui.Header({
|
||||
model: new cdb.core.Model(options),
|
||||
transitions: data.transitions,
|
||||
slides: vis.slides,
|
||||
template: template
|
||||
});
|
||||
|
||||
return widget.render();
|
||||
|
||||
});
|
||||
|
||||
// map zoom control
|
||||
cdb.vis.Overlay.register('zoom', function(data, vis) {
|
||||
|
||||
if(!data.template) {
|
||||
vis.trigger('error', 'zoom template is empty')
|
||||
return;
|
||||
}
|
||||
|
||||
var zoom = new cdb.geo.ui.Zoom({
|
||||
model: data.map,
|
||||
template: cdb.core.Template.compile(data.template)
|
||||
});
|
||||
|
||||
return zoom.render();
|
||||
|
||||
});
|
||||
|
||||
// Tiles loader
|
||||
cdb.vis.Overlay.register('loader', function(data) {
|
||||
|
||||
var tilesLoader = new cdb.geo.ui.TilesLoader({
|
||||
template: cdb.core.Template.compile(data.template)
|
||||
});
|
||||
|
||||
return tilesLoader.render();
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('time_slider', function(data, viz) {
|
||||
var slider = new cdb.geo.ui.TimeSlider(data);
|
||||
return slider.render();
|
||||
});
|
||||
|
||||
|
||||
// Header to show informtion (title and description)
|
||||
cdb.vis.Overlay.register('_header', function(data, vis) {
|
||||
var MAX_SHORT_DESCRIPTION_LENGTH = 100;
|
||||
|
||||
// Add the complete url for facebook and twitter
|
||||
if (location.href) {
|
||||
data.share_url = encodeURIComponent(location.href);
|
||||
} else {
|
||||
data.share_url = data.url;
|
||||
}
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || "\
|
||||
{{#title}}\
|
||||
<h1>\
|
||||
{{#url}}\
|
||||
<a href='#' onmousedown=\"window.open('{{url}}')\">{{title}}</a>\
|
||||
{{/url}}\
|
||||
{{^url}}\
|
||||
{{title}}\
|
||||
{{/url}}\
|
||||
</h1>\
|
||||
{{/title}}\
|
||||
{{#description}}<p>{{{description}}}</p>{{/description}}\
|
||||
{{#mobile_shareable}}\
|
||||
<div class='social'>\
|
||||
<a class='facebook' target='_blank'\
|
||||
href='http://www.facebook.com/sharer.php?u={{share_url}}&text=Map of {{title}}: {{description}}'>F</a>\
|
||||
<a class='twitter' href='https://twitter.com/share?url={{share_url}}&text={{twitter_title}}'\
|
||||
target='_blank'>T</a>\
|
||||
</div>\
|
||||
{{/mobile_shareable}}\
|
||||
",
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
function truncate(s, length) {
|
||||
return s.substr(0, length-1) + (s.length > length ? '…' : '');
|
||||
}
|
||||
|
||||
var title = data.map.get('title');
|
||||
var description = data.map.get('description');
|
||||
|
||||
var facebook_title = title + ": " + description;
|
||||
var twitter_title;
|
||||
|
||||
if (title && description) {
|
||||
twitter_title = truncate(title + ": " + description, 112) + " %23map "
|
||||
} else if (title) {
|
||||
twitter_title = truncate(title, 112) + " %23map"
|
||||
} else if (description){
|
||||
twitter_title = truncate(description, 112) + " %23map"
|
||||
} else {
|
||||
twitter_title = "%23map"
|
||||
}
|
||||
|
||||
var shareable = (data.shareable == "false" || !data.shareable) ? null : data.shareable;
|
||||
var mobile_shareable = shareable;
|
||||
|
||||
mobile_shareable = mobile_shareable && (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
|
||||
|
||||
var header = new cdb.geo.ui.Header({
|
||||
title: title,
|
||||
description: description,
|
||||
facebook_title: facebook_title,
|
||||
twitter_title: twitter_title,
|
||||
url: data.url,
|
||||
share_url: data.share_url,
|
||||
mobile_shareable: mobile_shareable,
|
||||
shareable: shareable && !mobile_shareable,
|
||||
template: template
|
||||
});
|
||||
|
||||
return header.render();
|
||||
});
|
||||
|
||||
// infowindow
|
||||
cdb.vis.Overlay.register('infowindow', function(data, vis) {
|
||||
|
||||
if (_.size(data.fields) == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var infowindowModel = new cdb.geo.ui.InfowindowModel({
|
||||
template: data.template,
|
||||
template_type: data.templateType,
|
||||
alternative_names: data.alternative_names,
|
||||
fields: data.fields,
|
||||
template_name: data.template_name
|
||||
});
|
||||
|
||||
var infowindow = new cdb.geo.ui.Infowindow({
|
||||
model: infowindowModel,
|
||||
mapView: vis.mapView,
|
||||
template: data.template
|
||||
});
|
||||
|
||||
return infowindow;
|
||||
});
|
||||
|
||||
|
||||
// layer_selector
|
||||
cdb.vis.Overlay.register('layer_selector', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
//if (!options.display) return;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<a href="#/change-visibility" class="layers">Visible layers<div class="count"></div></a>\
|
||||
',
|
||||
data.templateType || 'underscore'
|
||||
);
|
||||
|
||||
var dropdown_template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<ul></ul><div class="tail"><span class="border"></span></div>\
|
||||
',
|
||||
data.templateType || 'underscore'
|
||||
);
|
||||
|
||||
var layerSelector = new cdb.geo.ui.LayerSelector({
|
||||
model: new cdb.core.Model(options),
|
||||
mapView: vis.mapView,
|
||||
template: template,
|
||||
dropdown_template: dropdown_template,
|
||||
layer_names: data.layer_names
|
||||
});
|
||||
|
||||
var timeSlider = vis.timeSlider;
|
||||
if (timeSlider) {
|
||||
layerSelector.bind('change:visible', function(visible, order, layer) {
|
||||
if (layer.get('type') === 'torque') {
|
||||
timeSlider[visible ? 'show': 'hide']();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (vis.legends) {
|
||||
|
||||
layerSelector.bind('change:visible', function(visible, order, layer) {
|
||||
|
||||
|
||||
if (layer.get('type') === 'layergroup' || layer.get('type') === 'torque') {
|
||||
|
||||
var legend = vis.legends && vis.legends.getLegendByIndex(order);
|
||||
|
||||
if (legend) {
|
||||
legend[visible ? 'show': 'hide']();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return layerSelector.render();
|
||||
|
||||
});
|
||||
|
||||
// fullscreen
|
||||
cdb.vis.Overlay.register('fullscreen', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
|
||||
options.allowWheelOnFullscreen = false;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '<a href="{{ mapUrl }}" target="_blank"></a>',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var fullscreen = new cdb.ui.common.FullScreen({
|
||||
doc: "#map > div",
|
||||
model: new cdb.core.Model(options),
|
||||
mapView: vis.mapView,
|
||||
template: template
|
||||
});
|
||||
|
||||
return fullscreen.render();
|
||||
|
||||
});
|
||||
|
||||
// share content
|
||||
cdb.vis.Overlay.register('share', function(data, vis) {
|
||||
|
||||
var options = data.options;
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '<a href="#"></a>',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var widget = new cdb.geo.ui.Share({
|
||||
model: new cdb.core.Model(options),
|
||||
vis: vis,
|
||||
map: vis.map,
|
||||
template: template
|
||||
});
|
||||
|
||||
widget.createDialog();
|
||||
|
||||
return widget.render();
|
||||
|
||||
});
|
||||
|
||||
// search content
|
||||
cdb.vis.Overlay.register('search', function(data, vis) {
|
||||
|
||||
var template = cdb.core.Template.compile(
|
||||
data.template || '\
|
||||
<form>\
|
||||
<span class="loader"></span>\
|
||||
<input type="text" class="text" value="" />\
|
||||
<input type="submit" class="submit" value="" />\
|
||||
</form>\
|
||||
',
|
||||
data.templateType || 'mustache'
|
||||
);
|
||||
|
||||
var search = new cdb.geo.ui.Search(
|
||||
_.extend(data, {
|
||||
template: template,
|
||||
mapView: vis.mapView,
|
||||
model: vis.map
|
||||
})
|
||||
);
|
||||
|
||||
return search.render();
|
||||
|
||||
});
|
||||
|
||||
// tooltip
|
||||
cdb.vis.Overlay.register('tooltip', function(data, vis) {
|
||||
if (!data.layer && vis.getLayers().length <= 1) {
|
||||
throw new Error("layer is null");
|
||||
}
|
||||
data.layer = data.layer || vis.getLayers()[1];
|
||||
data.layer.setInteraction(true);
|
||||
data.mapView = vis.mapView;
|
||||
return new cdb.geo.ui.Tooltip(data);
|
||||
});
|
||||
|
||||
cdb.vis.Overlay.register('infobox', function(data, vis) {
|
||||
var layer;
|
||||
var layers = vis.getLayers();
|
||||
if (!data.layer) {
|
||||
if(layers.length > 1) {
|
||||
layer = layers[1];
|
||||
}
|
||||
data.layer = layer;
|
||||
}
|
||||
if(!data.layer) {
|
||||
throw new Error("layer is null");
|
||||
}
|
||||
data.layer.setInteraction(true);
|
||||
var infobox = new cdb.geo.ui.InfoBox(data);
|
||||
return infobox;
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user