1

I am trying to add my own logo to my CartDB map. I have already removed CartoDBs own logo. Can I use the editor to add my own logo or do I have to use cartodb.js?

<html>
<head>
<meta charset= "utf-8"> </meta>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#cartodb-map { width: 100%; height:100%; background: black; z-index:1;}
#logo {width: 7%; height: 4%; position: absolute; bottom: 1%; left: 1%; z-index:2147483647; opacity: 0.75;}
</style>

<!-- fullscreen button-->
<link rel="stylesheet" href="lib/fullscreen/Control.FullScreen.css" />
<script src="lib/fullscreen/Control.FullScreen.js"></script

<!-- logo-->
<img id="logo" src="img/imm_infinto.png" alt="Logo"/>

</head>

<body>

// initiate leaflet map
var map = new L.Map('cartodb-map', { 
    center: [51,9],
    zoom: 4,
    minZoom:3,
    maxZoom: 16,
});

//load basemap
var OSM= new L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', 
    {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);

//load data from CartoDB
var layerUrl= 'http://intermodalmap.cartodb.com/api/v2/viz/0931f4e4-76f8-11e4-b51ea90d/viz.json';

//load satellit map
var Esri_WorldImagery = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' });

  cartodb.createLayer(map, layerUrl)
    .addTo(map)
    .on('done', function() {
    }).on('error', function() {
    });
    };

L.control.fullscreen({
    position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
    title: 'Open fullscreen', // change the title of the button, default Full Screen
    titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
    content: null, // change the content of the button, can be HTML, default null
    forceSeparateButton: true
}).addTo(map);

// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function(){
    console.log('entered fullscreen');
});

map.on('exitFullscreen', function(){
    console.log('exited fullscreen');
});

|improve this question
1

You can add your logo as an overlay image element inside the CartoDB Editor, you can find more info here: http://docs.cartodb.com/cartodb-editor.html#add-element

You could also do it by using CartoDB.js and including an image on top of the map element by using HTML.

|improve this answer
  • I know its a while ago that I asked this question. I have added my logo to my map which worked quite well with css. But I just realised that it disapears when I open the fullscreen. Do I need to add it somehow to my fullscreen function? I will add a short version of my code to my question. – Sunny Sep 16 '15 at 14:50
0

I am pretty positive you can do it in the editor by adding an image, but i know for a fact it can be done in the css or in cartodb.js just google adding a custom image to cartodb and more than a few pages will pop up.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.