CODEWITHSUNDEEP
overlaymapboxgeospatialmapbox-gl-js
David
David

Reputation: 815

Mapbox GL JS image overlay with multiple maps on page

I now understand how image overlays work (I am a newbie) and have no issue inserting them into a map now, however I have 4 maps on one page (image attached of how it looks) and I am wanting to overlay an image on one of them (top left). Below is my code that works - and below that code that doesn't work. Where do I need to insert the addsource() and addlayer() for this to work? Working code would be very helpful as I cannot seem to find this out myself. I spent the last 2 hours trying to figure this out.

Code that works : (nothing is added below map named "topleftmapbox" so the code works)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>

</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}


body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.topleftmapclass {height : 50%; width : 50%;  bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%;  nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%;   top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%;  top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>


<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>


<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963]
});




var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




</script>
</body>
</html>

And this code (with code added below "topleftmapbox" does NOT work) :

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>

</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}


body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.topleftmapclass {height : 50%; width : 50%;  bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%;  nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%;   top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%;  top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>


<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>


<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963]
});






topleftmapbox.addSource("dopplerimage", {"type": "image",
"url": "KEWX_L2_Z.gif",
"coordinates": [
[-98.0387, 29.7125], 
[-98.0182, 29.7125],  
[-98.0387, 29.6927], 
[-98.0387, 29.6920]  
]})



topleftmapbox.addLayer({
"id": "overlay",
"source": "dopplerimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})



var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




</script>
</body>
</html>

Screenshot of how it this currently looks without overlay on top-left map :

Upvotes: 1

Views: 2429

Answers (1)

pathmapper
pathmapper

Reputation: 1937

You need to wait until the style for topleftmapbox is loaded before adding the source and layer.

topleftmapbox.on('load', function() {
...
});

Full code:

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Quad Pane Display</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 100%;
      bottom: 100%;
      left: 100%, right:100%, width:100%;
      padding: 0;
    }
  </style>

</head>

<body background="bg.jpg">
  <style>
    html,
    body,
    #page,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      cursor: url(cursor.gif), pointer;
      overflow: hidden;
    }


    body * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }


    .topleftmapclass {
      height: 50%;
      width: 50%;
      bottom: 50%;
      right: 50%;
      position: absolute;
      z-index: 200;
    }

    .toprightmapclass {
      height: 50%;
      width: 50%;
      nottom: 50%;
      left: 50%;
      position: absolute;
      z-index: 200;
    }

    .bottomleftmapclass {
      height: 50%;
      width: 50%;
      top: 50%;
      right: 50%;
      position: absolute;
      z-index: 200;
    }

    .bottomrightmapclass {
      height: 50%;
      width: 50%;
      top: 50%;
      left: 50%;
      position: absolute;
      z-index: 200;
    }
  </style>


  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


  <div id='topleftmap' class='topleftmapclass'></div>
  <div id='toprightmap' class='toprightmapclass'></div>
  <div id='bottomleftmap' class='bottomleftmapclass'></div>
  <div id='bottomrightmap' class='bottomrightmapclass'></div>


  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


    var topleftmapbox = new mapboxgl.Map({
      container: 'topleftmap',
      zoom: 14,
      pitch: 53,
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963]
    });





    topleftmapbox.on('load', function() {
      topleftmapbox.addSource("dopplerimage", {
        "type": "image",
        "url": "KEWX_L2_Z.gif",
        "coordinates": [
          [-98.0387, 29.7125],
          [-98.0182, 29.7125],
          [-98.0387, 29.6927],
          [-98.0387, 29.6920]
        ]
      })



      topleftmapbox.addLayer({
        "id": "overlay",
        "source": "dopplerimage",
        "type": "raster",
        "paint": {
          "raster-opacity": 0.85
        }
      })
    });


    var toprightmapbox = new mapboxgl.Map({
      container: 'toprightmap',
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });




    var bottomleftmapbox = new mapboxgl.Map({
      container: 'bottomleftmap',
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });




    var bottomrightmapbox = new mapboxgl.Map({
      container: 'bottomrightmap',
      style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });
  </script>
</body>

</html>

Upvotes: 2

Related Questions