I'm needing to add a collapsible sidebar to a mapbox map.
I'm using this example:
https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp
Here is my html file. It shows it load briefly, but then the map renders on top of it.
Ultimately I want to develop a sidebar like what pops up when you click on a feature in Google Maps. I've not quite found something like this, so if anyone knows of a solution, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Castello Plan: Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<!-- For Interactive sidebar Head-->
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
<!--End Interactive Sidebar Head-->
</head>
<body>
<div id='map'></div>
<!--For Interactive Sidebar Body-->
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!--End Interactive Sidebar Body-->
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
Firstly, add your map to the main div, and set the map css to "position:relative;"
Your open button needed to also be "position:absolute;" and iven a z-depth of 1 tobe above the map.
I added 100% height to the html, body & map css to ensure the content stretches to full height.
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Castello Plan: Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width:100%;
height:100%;
}
html, body, #map{
height:100%;
margin: 0px;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
position:absolute;
top:10px;
left:10px;
z-index:1;
border-radius: 3px;
}
.openbtn:hover {
background-color: #444;
}
#main {
position:relative;
transition: margin-left .5s;
padding: 16px;
height:100%;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<!--For Interactive Sidebar Body-->
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
<div id='map'></div>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!--End Interactive Sidebar Body-->
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
Related
I am new to Leaflet and JavaScript. I am trying to create a web map that will have 3-4 buttons that when clicked will zoom the user to the given location. Ex: Disney World (28.385384005128767, -81.56313371302178), Black Pool Pleasure Beach (53.937909193096296, -3.0415772052368952).
So far, I have been trying code from a tutorial, but cannot get the buttons to show on my map. What am I doing wrong?
.full {
padding: 0;
margin: 0;
}
.full html, body, #map {
height: 100%;
width: 100vw;
}
.center {
text-align: center;
}
html, body, #map {
height: 100%;
width: 100vw;
}
#map{ width: 100%; height: 100%; }
iframe{
align-content: center;
width: 98%; height: 97%;
}
.leaflet-bar button,
.leaflet-bar button:hover {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar button {
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
display: block;
}
.leaflet-bar button:hover {
background-color: #f4f4f4;
}
.leaflet-bar button:first-of-type {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar button:last-of-type {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar.disabled,
.leaflet-bar button.disabled {
cursor: default;
pointer-events: none;
opacity: .4;
}
.easy-button-button .button-state{
display: block;
width: 100%;
height: 100%;
position: relative;
}
.leaflet-touch .leaflet-bar button {
width: 30px;
height: 30px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="Leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body id ="full" class= "full">
<div id = "text">
</div>
<div id="map"></div>
<script>
var map = L.map('map',{ center: [42.353770, -71.10360608], zoom: 16, keyboard: true});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
var OSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);
var mapChoices = {
"Satellite": Esri_WorldImagery,
"OSM": OSM
}
L.control.layers(mapChoices).addTo(map);
</script>
<script>
var map = L.map('map', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(zoomTo);
L.easyButton( 'fa-gbp', function(){
map.setView([55, -2], 4);
}).addTo(map);
L.easyButton( 'fa-jpy', function(){
map.setView([38, 139], 4);
}).addTo(map);
L.easyButton( 'fa-usd', function(){
map.setView([37.8, -96], 3);
}).addTo(map);
</script>
</body>
</html>
Simply do not re-instantiate your map and do not re-assign your map variable.
You can merge your 2 <script> tags together, it should become more obvious to you what the issue is.
Your 2nd map instantiation should throw an error in your browser Devtools console (if you are not using it, make sure to learn how to open it)
After that the rest of your script is ignored.
do you know how to change background color. i tried using
body.darkmode{
background-color:black;
color: white;
still not working. my code is also very messy because i just started coding in html yesterday. so this is my first time. i'm tring to make a darkmode version. so please dont worry about the content because it just for demonstration. i also make the simmilar post yesterday, but in this case i put some scroll bar and navbar.
<!DOCTYPE html>
<html>
<head>
<title>UwU</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div style="padding:15px 15px 2500px;font-size:15px">
<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}
</script>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
Settings
</div>
<style>
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
<p></p>
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
<br>use light mode<a>•••</a>Page 2 UwU
</div>
</body>
You have not added class = "darkmode" to the body tag.
Add this and it should work.
<body class = "darkmode">
I have created Multifield dialog i AEM 5.6.1 and wold like to know How do I make an AEM CQ5 component responsive? fit to different devices/screens based on users viewpoint??
Better way for responsive design is CSS3 #media Rule.
In the following snippet menu for devices with width < 500 will be 100% width of screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}
.main img {
width: 100%;
}
h1{
font-size: 1.625em;
}
h2{
font-size: 1.375em;
}
.header {
padding: 1.0121457489878542510121457489879%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4.310344827586206896551724137931%;
margin-left: 0;
margin-top: 0;
padding: 4.310344827586206896551724137931%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2.0661157024793388429752066115702%;
}
.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}
.footer {
padding: 1.0121457489878542510121457489879%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float: left;
}
.gridheader {
width: 100%;
}
.gridmenu {
width: 23.481781376518218623481781376518%;
}
.gridmain {
width: 48.987854251012145748987854251012%;
}
.gridright {
width: 23.481781376518218623481781376518%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
#media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1.0121457489878542510121457489879%;
padding: 1.0121457489878542510121457489879%;
}
.gridmain {
width: 100%;
}
.main {
padding: 1.0121457489878542510121457489879%;
}
.gridright {
width: 100%;
}
.right {
padding: 1.0121457489878542510121457489879%;
}
.gridbox {
margin-right: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>The Pulpit Rock</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">The Drive</div>
<div class="menuitem">The Walk</div>
<div class="menuitem">The Return</div>
<div class="menuitem">The End</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="http://www.w3schools.com/cssref/pulpitrock.jpg" alt="Pulpit rock" width="" height="">
</div>
</div>
<div class="gridbox gridright">
<div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
See more in fo in the following page
I want to display a simple form inside fancybox overlay, which also works nice on smaller screen. i've set up an example on here http://design.imago.ee/test/fancybox-form/index1.html
Initially i set the form width to be 450px, at 620px screen size im setting the form width to 100% and after i have done it, fancybox window collapses width wise and the form is not displayed properly. Interestingly that doesnt happen with regular text content (second button in the example). I know that i could just change the width manually with media queries, but it isnt really a good solution. Can anyone help? Thank you.
It's not very elegant solution but will give you an idea and porbably put you closer to your goal
Change in fancybox css
.fancybox-inner {
overflow: hidden !important;
}
Script
Calculate width of window and adjust the width of content, use setInterval so any change in width will be adjusted dynamically.
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
Demo
$(document).ready(function () {
$('.fancybox').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside'
}
}
});
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
});
.fancybox-inner {
overflow: hidden !important;
}
* {
margin: 0;
padding: 0;
}
/* =========================== Layout styles =================== */
body, html {
height: 100%;
}
body {
font: 14px/1.4'Open sans', sans-serif;
overflow: hidden;
background-color: #fff;
padding: 20px 4%;
}
.centered-wrap {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
a.fancybox {
display: inline-block;
vertical-align: top;
background-color: #59a3d3;
color: #fff;
padding: 4px 7px;
border-radius: 2px;
text-decoration: none;
}
h1 {
font-size: 23px;
font-weight: 600;
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
.content {
padding: 20px 30px;
}
input[type="text"] {
border: 1px solid #ccc;
height: 30px;
font: 13px/30px'Open sans', sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0 7px;
}
#form {
width: 450px;
padding: 30px;
}
#form .row {
margin-bottom: 10px;
}
#form .col {
float: left;
}
#form .col1 {
width: 25%;
}
#form .col2 {
width: 75%;
}
#form label {
display: inline-block;
vertical-align: top;
padding: 6px 10px 0 0;
}
/* ======================= media queries ======================= */
#media screen and (max-width: 620px) {
#form {
width: 100%;
text-align: center;
padding: 5px;
}
#form .col {
float: none;
width: auto;
text-align: center;
margin-right: 10px
}
#form label {
}
}
/* ======================== clearfix =========================== */
/* Force Element To Self-Clear its Children */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<div class="centered-wrap">
<p><a class="fancybox" href="#form">Fancybox with form</a></p>
<div style="display: none;">
<div id="form" class="content">
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
</div>
</div>
</div>
Fiddle Example
Note: Adjust the fiddle view screen to see how form width adjust itself with the change of screen size.
I am using a very cool jquery drop down menu by Zach at One Mighty Roar. I cannot get this to link to let's say, a Facebook page in a new window. The js file is below:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
The html is below:
<div id="nav">
<ul class="tabNav">
<li><img src="../images/facebook.png" alt="Check out our Facebook page!" width="36" height="36" border="0" /></li>
<li>FTP Site</li>
<li>Contact</li>
<li>Services</li>
<li class="current">Projects</li>
</ul>
<div class="tabContainer">
<div class="tab"><p>Click here to be taken to our Facebook page.</p></div>
<div class="tab"><p>Click here to be taken to our ftp site to download your documents.</p></div>
<div class="tab">Contact Info</div>
<div class="tab">Services Info</div>
<div class="tab current">Projects Info</div>
</div>
The css:
/* MENU */
ul.tabNav {
list-style: none;
width: 100%;
float: left;
}
ul.tabNav li {
float: right;
margin: 0;
}
.tab.current ul li {
list-style-type: none;
margin-left: 15px;
line-height: 1.5em;
}
.tabNav li a img {
margin-top: 15px;
}
ul.tabNav li.current {
}
ul.tabNav a {
color: #FFF;
display: block;
height: 66px;
padding: 10px;
text-decoration: none;
width: 66px;
margin-left: 4px;
font-size: 16px;
border: 1px solid #FF9933;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-family: "Century Gothic";
letter-spacing: 1px;
line-height: 60px;
}
ul.tabNav li.current a {
padding: 10px;
}
div.tabContainer {
clear: both;
float: right;
width: 500px;
z-index: 9999;
}
div.tabContainer div.tab {
border: 1px solid #FF9933;
color: #FFF;
display: none;
padding: 10px;
background-image: url(images/slideshow_bg.png);
background-repeat: repeat;
margin-top: 14px;
height: 500px;
}
div.tab p:last-child { margin-bottom: 0; }
.tabContainer .tab { display: none; }
I have tried adding my http:// up in the tabNav AND/OR the tabContainer sections and I cannot link out. Frustrating.
Have you tried:
Click here to be taken to our Facebook page.
You can also set other attributes. Check out the documentation and examples here: http://www.w3schools.com/jsref/met_win_open.asp