455 lines
11 KiB
JavaScript
455 lines
11 KiB
JavaScript
(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;
|
|
|
|
});
|
|
|
|
})();
|