CODEWITHSUNDEEP
htmlcssbackgroundbackground-imagemapbox
Eric Park
Eric Park

Reputation: 502

MapBox Background Image

Good morning everyone, I have a quick question about some background images in MapBox. For those who don't know MapBox, it is a online provider of custom maps that quickly create beautiful interactive maps and data visualizations. I created a map project, and wanted to put that map as a background image. I am given an embed option and here is my code so far: 

<!DOCTYPE html> 
<html>
<head></head> 
<body>
    <iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>

However, I want the Mapbox html to take the entire background.I have tried placing the url provided into a background-image: url() in css, but it does not function. 

body {
  background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}

Does anyone know how I might do this?

Thanks, Eric

Upvotes: 0

Views: 3725

Answers (3)

Jon Chan
Jon Chan

Reputation: 979

Jon here from Stack - I actually do most of the geo stuff here.

If you want to do this the proper way, you're going to have to embed it in a div and put the content that you want over it in its own container div. You can see a pretty straightforward implementation of what you want in the API docs on Mapbox. You can adjust the settings of the map using the JavaScript API (hiding the controls, setting the center, etc.).

L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
  width: 100%;
  min-height: 100%;
  position: absolute;
}
#map-background {
  z-index: -1;
}
#map-container {
  z-index: 0;
}
#map-overlay {
  z-index: 1;
  background: none;
}
#content {
  z-index: 0;
}
<html>

<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>

<body>
  <div id="map-background">
    <div id="map-container">
    </div>
    <div id="map-overlay">
    </div>
  </div>
  <div id="content">
    <!-- This is where your regular content should be -->
    <p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
  </div>
</body>

</html>

Good luck Eric :)

EDIT: Restoring interactivity

I've changed the code to get rid of the overlay and some of the blocking styles. Try that.

L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
}
#content {
  position: absolute;
}
<html>

<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>

<body>
  <div id="map-container">
  </div>
  <div id="content">
    <!-- This is where your regular content should be -->
    <p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
  </div>
</body>

</html>

Upvotes: 1

Bhaskar Dabhi
Bhaskar Dabhi

Reputation: 909

I dont think just putting link as background image will work. Mapbox might be rendering map in canvas.

I just found this. Try this. I am not much familiar with mapbox

Upvotes: 0

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

To mimic a "background-image" effect with mapbox you could do something like the following:

<!DOCTYPE html> 
<html>
<head>
    #map_bg {
        position:relative;
        width:100%;
        height:800px;
    }
    #map_bg iframe {
        position:absolute;
        top:0px;
        left:0px;
        height:100%;
        width:100%;
    }

    .content {
        z-index:1;
        position:relative;
    }

</head> 
<body>
    <div id="map_bg">
        <iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
         <div class="content">
             This is other content on the page.
         </div>
    </div>
</body>
</html>

You position the map absolutely relative to it's parent which allows content to overlap it (much like a background image). By adding a z-index:1 to the other content you can ensure it appears on top of the map;

Upvotes: 0

Related Questions