Paulkkkkkkkk
Reputation: 31
How to make my button appear over my map?
I'm a new developper and i try to train myself with some quick challenges. I'm currently developping a map of datacenter. I face a problem on my leaflet map. I just find some html and css lines to add a button on my map. I have add the code on my previous html, but as you can see, the button is only show when i open the map in my browser. The button is under the map and i don't have find a solution on that :/ I will give you my code under. Thank's you very much for your help.
PS: Sorry for my bad english i'm a 16yo french :(
my html is
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" /> <title>Retina Basemap</title> <meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Load Leaflet from CDN --> <link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/> <link href="main.css" rel="stylesheet"> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN --> <script
src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-ucw7Grpc+iEQZa711gcjgMBnmd9qju1CICsRaryvX7HJklK0pGl/prxKvtHwpgm5ZHdvAil7YPxI1oWPOWK3UQ=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; } </style>
</head> <body>
<div id="map"></div> <button id="availability">Availability
Zones</button> <button id="regions">Regions</button> <!-- designed by
me... enjoy! --> <div class="wrapper"> <a class="cta" href="#">
<span>NEXT</span>
<span>
<svg width="66px" height="43px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path class="one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739
44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893
C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492
L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358
43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035
C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767
L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839
40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739
24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893
C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492
L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358
23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035
C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767
L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839
20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739
4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893
C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492
L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358
3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729
0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839
0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
</g>
</svg>
</span> </a> </div>
<script> var map = L.map('map').setView([48.866667, 2.33333], 6);
// Creer un marqueur pour le DataCenter de Marcoussis var
myDataPoint = L.marker([48.6333, 2.2333]).addTo(map);
// Creer un marqueur pour le DataCenter de Seclin var myDataPoint1 = L.marker([50.55, 3.0333]).addTo(map);
// Creer un marqueur pour le DataCenter de Tigery var myDataPoint5 = L.marker([48.639413, 2.5070883]).addTo(map);
// Assigner un pop up a un objet de Data
myDataPoint.bindPopup("<h3>Datacenter de Marcoussis</h3><p>Marcoussis, France<br>Click here for more
informations</p>");
myDataPoint1.bindPopup("<h3>Datacenter de Seclin</h3><p>Seclin, France<br>Click here for more informations</p>");
myDataPoint5.bindPopup("<h3>Datacenter de Tigery</h3><p>Tigery, France<br>Click here for more informations</p>"); // Create une ligne
var myDataLine = L.polyline([[48.6333, 2.2333],[48.639413,
2.5070883]], {color: 'white', weight: 7}).addTo(map);
var myDataLine = L.polyline([[48.6333, 2.2333],[50.55, 3.0333]], {color: 'white', weight: 7}).addTo(map);
var myDataLine = L.polyline([[48.639413, 2.5070883],[50.55, 3.0333]], {color: 'white', weight: 7}).addTo(map);
// Assigner un Pop up a un objet de ligne
myDataLine.bindPopup("The data travel between these 2 data center"); // use the detect retina option to load retina tiles for
this layer. L.esri.basemapLayer('DarkGray', {
detectRetina: true }).addTo(map);
// include the labels at normal resolution
L.esri.basemapLayer('DarkGrayLabels').addTo(map); </script>
</body> </html>
and my css is
#availability { position: absolute; top: 725px; right: 20px; padding: 10px; z-index: 400; font-size: 22px; color: #000000;
text-align: justify; border: 7px solid #000000; background-color:
#FFA500; webkit-border-radius: 50px; moz-border-radius: 50px; border-radius: 50px; webkit-transform: scale(0.); moz-transform:
scale(0.6); o-transform: scale(0.6); }
#regions { position: absolute; top: 800px; right: 20px; padding: 20px; z-index: 400; font-size: 22px; color: #000000;
text-align: justify; border: 7px solid #000000; background-color:
#4169E1; webkit-border-radius: 50px; moz-border-radius: 50px; border-radius: 50px; webkit-transform: scale(0.); moz-transform:
scale(0.6); o-transform: scale(0.6); }
@import url('https://fonts.googleapis.com/css?family=Poppins:900i');
* { box-sizing: border-box; }
body { height: 100vh; display: flex; justify-content: center;
align-items: center; }
.wrapper { display: flex; justify-content: center; }
.cta {
display: flex;
padding: 10px 45px;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 40px;
color: white;
background: #6225E6;
transition: 1s;
box-shadow: 6px 6px 0 black;
transform: skewX(-15deg); }
.cta:focus { outline: none; }
.cta:hover {
transition: 0.5s;
box-shadow: 10px 10px 0 #FBC638; }
.cta span:nth-child(2) {
transition: 0.5s;
margin-right: 0px; }
.cta:hover span:nth-child(2) {
transition: 0.5s;
margin-right: 45px; }
span {
transform: skewX(15deg) }
span:nth-child(2) {
width: 20px;
margin-left: 30px;
position: relative;
top: 12%; } /**************SVG****************/
path.one {
transition: 0.4s;
transform: translateX(-60%); }
path.two {
transition: 0.5s;
transform: translateX(-30%); }
.cta:hover path.three {
animation: color_anim 1s infinite 0.2s; }
.cta:hover path.one {
transform: translateX(0%);
animation: color_anim 1s infinite 0.6s; }
.cta:hover path.two {
transform: translateX(0%);
animation: color_anim 1s infinite 0.4s; }
/* SVG animations */
@keyframes color_anim {
0% {
fill: white;
}
50% {
fill: #FBC638;
}
100% {
fill: white;
}
}
Thank's everybody have a good day!
Upvotes: 1
Views: 554
Answers (3)
user2314737
Reputation: 29317
You could create a new control by extending L.Control (an example here: https://leafletjs.com/examples/extending/extending-3-controls.html. The variable wrapper is an HTMLElement and you can manipulate it as you like, I changed inner HTML by copying the HTML code inside ``
L.Control.myButton = L.Control.extend({
onAdd: function(map) {
var wrapper = L.DomUtil.create('div', 'wrapper');
// HTML for div wrapper
wrapper.innerHTML = `...`
Controls can be positioned left/right, top/bottom but this can be adapted with css:
/* style the wrapper */
.wrapper {
position: absolute;
left: 50%;
}
var map = L.map('map').setView([48.866667, 2.33333], 6);
// Creer un marqueur pour le DataCenter de Marcoussis
var myDataPoint = L.marker([48.6333, 2.2333]).addTo(map);
// Creer un marqueur pour le DataCenter de Seclin
var myDataPoint1 = L.marker([50.55, 3.0333]).addTo(map);
// Creer un marqueur pour le DataCenter de Tigery
var myDataPoint5 = L.marker([48.639413, 2.5070883]).addTo(map);
// Assigner un pop up a un objet de Data
myDataPoint.bindPopup("<h3>Datacenter de Marcoussis</h3><p>Marcoussis, France<br>Click here for more informations < /p>");
myDataPoint1.bindPopup("<h3>Datacenter de Seclin</h3><p>Seclin, France<br>Click here for more informations</p>");
myDataPoint5.bindPopup("<h3>Datacenter de Tigery</h3><p>Tigery, France<br>Click here for more informations</p>");
// Create une ligne
var myDataLine = L.polyline([
[48.6333, 2.2333],
[48.639413,
2.5070883
]
], {
color: 'white',
weight: 7
}).addTo(map);
var myDataLine = L.polyline([
[48.6333, 2.2333],
[50.55, 3.0333]
], {
color: 'white',
weight: 7
}).addTo(map);
var myDataLine = L.polyline([
[48.639413, 2.5070883],
[50.55, 3.0333]
], {
color: 'white',
weight: 7
}).addTo(map);
// Assigner un Pop up a un objet de ligne
myDataLine.bindPopup("The data travel between these 2 data center");
// use the detect retina option to load retina tiles for this layer.
L.esri.basemapLayer('DarkGray', {
detectRetina: true
}).addTo(map);
// include the labels at normal resolution
L.esri.basemapLayer('DarkGrayLabels').addTo(map);
L.Control.myButton = L.Control.extend({
onAdd: function(map) {
var wrapper = L.DomUtil.create('div', 'wrapper');
// HTML for div wrapper
wrapper.innerHTML = `
<a class="cta" href="#">
<span>NEXT</span>
<span>
<svg width="66px" height="43px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path class="one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739
44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893
C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492
L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358
43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035
C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767
L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839
40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739
24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893
C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492
L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358
23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035
C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767
L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839
20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739
4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893
C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492
L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358
3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729
0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839
0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
</g>
</svg>
</span> </a>
`;
return wrapper;
},
onRemove: function(map) {
console.log('removed');
}
});
L.control.myButton = function(opts) {
return new L.Control.myButton(opts);
}
L.control.myButton({
position: 'bottomleft'
}).addTo(map);#availability {
position: absolute;
top: 725px;
right: 20px;
padding: 10px;
z-index: 400;
font-size: 22px;
color: #000000;
text-align: justify;
border: 7px solid #000000;
background-color: #FFA500;
webkit-border-radius: 50px;
moz-border-radius: 50px;
border-radius: 50px;
webkit-transform: scale(0.);
moz-transform: scale(0.6);
o-transform: scale(0.6);
}
#regions {
position: absolute;
top: 800px;
right: 20px;
padding: 20px;
z-index: 400;
font-size: 22px;
color: #000000;
text-align: justify;
border: 7px solid #000000;
background-color: #4169E1;
webkit-border-radius: 50px;
moz-border-radius: 50px;
border-radius: 50px;
webkit-transform: scale(0.);
moz-transform: scale(0.6);
o-transform: scale(0.6);
}
@import url('https://fonts.googleapis.com/css?family=Poppins:900i');
* {
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
justify-content: center;
}
.cta {
display: flex;
padding: 10px 45px;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 40px;
color: white;
background: #6225E6;
transition: 1s;
box-shadow: 6px 6px 0 black;
transform: skewX(-15deg);
}
.cta:focus {
outline: none;
}
.cta:hover {
transition: 0.5s;
box-shadow: 10px 10px 0 #FBC638;
}
.cta span:nth-child(2) {
transition: 0.5s;
margin-right: 0px;
}
.cta:hover span:nth-child(2) {
transition: 0.5s;
margin-right: 45px;
}
span {
transform: skewX(15deg)
}
span:nth-child(2) {
width: 20px;
margin-left: 30px;
position: relative;
top: 12%;
}
/**************SVG****************/
path.one {
transition: 0.4s;
transform: translateX(-60%);
}
path.two {
transition: 0.5s;
transform: translateX(-30%);
}
.cta:hover path.three {
animation: color_anim 1s infinite 0.2s;
}
.cta:hover path.one {
transform: translateX(0%);
animation: color_anim 1s infinite 0.6s;
}
.cta:hover path.two {
transform: translateX(0%);
animation: color_anim 1s infinite 0.4s;
}
/* SVG animations */
@keyframes color_anim {
0% {
fill: white;
}
50% {
fill: #FBC638;
}
100% {
fill: white;
}
}
/* style the wrapper */
.wrapper {
position: absolute;
left: 50%;
}<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<div id="map"></div> <button id="availability">Availability
Zones</button> <button id="regions">Regions</button>
<!-- designed by me... enjoy! -->Upvotes: 1
92yo
Reputation: 568
I'm not sure i understood what you're exactly doing - But if you're pushing your map code into this div
<div id="map"></div>
then I would suggest to give your map id a
z-index = -1
Upvotes: 0
Falke Design
Reputation: 11338
add following to your css code from .wrapper:
.wrapper {
display: flex;
justify-content: center;
z-index: 10000;
}
Upvotes: 0
Related Questions
- Overlaying a text box on a leaflet.js map
- How to put buttons on the leaflet map
- Adding clickable button to Leaflet map
- Visualize Leaflet map only when a button is clicked
- How to add an overlay to an leaflet map?
- Button not appear after map display
- Adding custom buttons to Leaflet Map
- Leaflet put image overlay below the map
- Put a button on top of a google map
- How to add a button under an image with google maps?