I'm trying to implement Mapbox in an Ionic 5 application.
I initialize my map with
ngOnInit() {
this.map = new mapboxgl.Map({
container: 'map',
style: this.style,
zoom: 13,
center: [this.lng, this.lat]
});
this.initPosition();
}
and then i set a marker with
setMarker() {
const el = document.createElement('div');
el.className = 'marker';
this.marker = new mapboxgl.Marker(el)
.setLngLat([this.lng, this.lat])
.addTo(this.map);
}
my styles.scss:
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.marker { //this is just for testing, i know it looks horrible
background-color: red;
background-size: cover;
width: 61px;
height: 35px;
border-radius: 50%;
cursor: pointer;
}
and my html:
<div id='map'></div>
The map shows up correctly, and I can see the marker in the developer console. However, my styles are not applied. If I apply styles manually to .mapboxgl-marker { in developer console, it still doesnt show up, but once I remove the transform property, the marker is in the top left corner of the map, but not where it is supposed to be.
This is driving me crazy
Related
I am building an animated hamburger menu with html css js. I now know how to start a css transition with javascript. See https://jsfiddle.net/ralphsmit/byaLfox5/. My problem now is that I need to run more than one transition with a click on my button. I've put my code here https://jsfiddle.net/ralphsmit/v980ouwj/16/.
A short explanation of my code. I have made a button (for the sake of clarity I made it green with a low opacity) and when that button is clicked, the background .dsgn-header-background will appear. Now I also want the two rectangle for the menu to animate into a cross and that the the .dsgn-header-menu-opened-menuitems also fade in.
My question is, how do I modify this js code, so that more than one transition will be started? So all transitions are a different element. You'll find the full code in the JS fiddle above (feel free to edit this).
Javascript:
const background = document.querySelector('.dsgn-header-background');
const button = document.querySelector('.dsgn-header-button');
let open = false;
button.addEventListener('click', onClickPlay);
function onClickPlay(){
if(background.classList.contains('on')){
background.classList.remove('on');
}else{
background.classList.add('on');
}
}
Check this out.
function onClickPlay(){
if(background.classList.contains('on')){
background.classList.remove('on');
element.classList.remove('anotherClassWithDifferentTransitions');
}else{
background.classList.add('on');
element.classList.add('anotherClassWithDifferentTransitions');
}
}
Cheers!
You can try this , The changes is i have added 2 more constant variable which adding on class when menu open and remove on class when menu closes.
const background = document.querySelector('.dsgn-header-background');
const button = document.querySelector('.dsgn-header-button');
const menu_up = document.querySelector('.dsgn-header-rectangle-up');
const menu_down = document.querySelector('.dsgn-header-rectangle-down');
let open = false;
button.addEventListener('click', onClickPlay);
function onClickPlay(){
if(background.classList.contains('on')){
background.classList.remove('on');
menu_up.classList.remove('on');
menu_down.classList.remove('on');
}else{
background.classList.add('on');
menu_up.classList.add('on');
menu_down.classList.add('on');
}
}
hope this will help you .
const content = document.querySelector('.content');
const button = document.querySelector('.dsgn-header-button');
function onClickPlay() {content.classList.toggle('on');}
button.addEventListener('click', onClickPlay);
fiddle: https://jsfiddle.net/s24mbakf/
Add the other elements to your onClickPlay function as you did with demo.
const demo = document.querySelector('.demo');
const demo2 = document.querySelector('.demo2');
const buttondemo = document.querySelector('.buttondemo');
let open = false;
buttondemo.addEventListener('click', onClickPlay);
function onClickPlay(){
if(demo.classList.contains('on')){
demo.classList.remove('on');
demo2.classList.remove('on');
} else {
demo.classList.add('on');
demo2.classList.add('on');
}
}
.demo {
width: 0;
height: 100vh;
background-color: black;
position: absolute;
right: 0;
transition: width 4s;
}
.demo.on {
width: 100vw;
}
.demo2 {
width: 0;
height: 50vh;
background-color: red;
position: absolute;
right: 0;
transition: width 8s;
}
.demo2.on {
width: 100vw;
background-color: yellow;
}
.buttondemo {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: green;
}
<div class="demo"><div>
<div class="demo2"><div>
<div class="buttondemo"><div>
I am rendering a map using Mapboxgl, Bootstrap 4 and React.
I need the map to take 100% of the height of the page and to display in the first column of a two column grid.
However, when using React, the width of the map extends over to 100% of the width of the row - overlapping underneath the 2nd column.
The best thing would be to check my examples on jsfidle to understand what I mean.
Map correctly showing (when using pure HTML and no React)
https://jsfiddle.net/apphancer/jhxy5c63/
Map showing width issue (when using React)
https://jsfiddle.net/apphancer/9g71ovn6/
In order to have the 100% height working I am using this CSS:
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
I suspect this might have something to do with how the map gets rendered with React as the problem does not happen when using the pure HTML solution.
Is anyone able to point in the right direction?
HTML
<div id="app"></div>
CSS
body, html {
height: 100%;
}
#app, .row, .col-9 {
height: 100%;
}
.col-3 {
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid red;
}
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
JS
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
class Application extends React.Component {
componentDidMount() {
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [13.392, 52.523], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl());
map.resize(); // tried with this to see if it would help
}
render() {
return (
<div className="row no-gutters">
<div className="col-9">
<div className="map-wrapper">
<div ref={el => this.mapContainer = el} id="map"/>
</div>
</div>
<div className="col-3">
2 of 2
</div>
</div>
)
}
}
ReactDOM.render(<Application/>, document.getElementById('app'));
If you use position fixed with 100% width in wrapper, it will cover all width. But if you set position to relative, it will cover just remaining width.
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
This worked in your react-jsfiddle. Please try.
If you are using position fixed in your project you can cover whole area so for that you have 2 solution
1st solution
give 75% width to the #map so it will behave like col-9 and no need to give position: absolute;
#map {
width: 75%;
height: 100%;
}
2nd Solution
give it relative position to the parent of your element so it cant leave it area, for that you can change position: fixed to position: relative
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
both solution is good solution but i prefer 2nd solution, from my side.
const [viewport, setViewport] = useState({
width: '100%',
height: 'calc(100vh - 162px)', // 162px is size height of all elements on top of map
latitude: 0,
longitude: 0,
zoom: 12,
bearing: 0,
pitch: 0,
transitionDuration: 2000,
transitionInterpolator: new FlyToInterpolator(),
});
I migrated to React 18, and updated a bunch of dependencies, included the map library.
The only thing that resolved my problem was this. It has a tic, when the map resizes, but it's a start.
useEffect(() => {
map.on("load", () => map.resize());
}, [])
I used custom image for map marker but scss settings is not effective. I don't understand what is wrong with that.
CurrentMarker(location) {
let content: any;
let image = 'assets/img/start.svg';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
}
scss
page-mapmodal {
background: rgb(229, 227, 223);
#map {
width: 100%;
height: 100%;
}
#map .gmnoprint img {
width: 60px;
height: 80px;
}
the output
As you can see marker as same size as is.
I used fallowing code:
var icon = {
url: 'assets/img/target.svg',
scaledSize: new google.maps.Size(50, 50),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
};
I have some code which generates a dialog box. It can be a confirmation, acknowledgement, etc.
The code is called on clicking some element. For example, if I click the trash icon, I cause a "delete" confirmation dialog to be created and rendered.
Notice that I insert the dialog as the first element in the <body>. This works well, except for forms where there has been some Y-scrolling. When the page has been scrolled, if I display the dialog, the page always auto-scrolls back to the top before displaying the dialog.
I thought position: fixed should prevent changes to the scroll position by always making the element relative to the viewport, but it doesn't.
Here is where the dynamic dialog <div> is created:
function CustomDialog(title, body, buttons){
let bodyElement = document.querySelector("body");
let dynamicShadowElement = document.createElement("div");
dynamicShadowElement.id = "dialog-shadow";
bodyElement.insertBefore(dynamicShadowElement, bodyElement.childNodes[0]);
let dynamicOverlayElement = document.createElement("div");
dynamicOverlayElement.id = "dialog-overlay";
bodyElement.insertBefore(dynamicOverlayElement, dynamicShadowElement);
let dynamicInnerHTML = "<div id='dialog-box'><div id='dialog-box-header'></div>";
dynamicInnerHTML += "<div id='dialog-box-body'></div><div id='dialog-box-footer'></div></div>";
dynamicShadowElement.innerHTML = dynamicInnerHTML;
let dialogOverlay = document.getElementById("dialog-overlay");
let dialogShadow = document.getElementById("dialog-shadow");
let dialogBox = document.getElementById('dialog-box');
let dialogBoxHeader = document.getElementById('dialog-box-header');
let dialogBoxBody = document.getElementById('dialog-box-body');
let dialogBoxFooter = document.getElementById('dialog-box-footer');
dialogOverlay.style.display = "block";
dialogShadow.style.display = "block";
dialogBox.style.display = "block";
dialogBoxHeader.innerHTML = title;
dialogBoxBody.innerHTML = body;
if (!buttons) {
// Create a default button to close the dialog.
buttons = [{
onclick: () => { closeDialog(); },
text: "Got it!",
class: "btn-primary"
}];
}
buttons.forEach( (button) => {
let dynamicButtonElement = document.createElement("button");
and so on...
Here is the CSS:
#dialog-overlay{
background: #FFF;
display: none;
height: 100%;
left: 0px;
opacity: .6;
position: fixed;
top: 0px;
width: 100%;
z-index: 10;
}
#dialog-shadow{
display: none;
background: LightGray;
border-radius: 7px;
left: 10%;
position: fixed;
top: 150px;
width: 80%;
z-index: 10;
}
How can I make my dialog appear without disturbing the current scroll position of the page?
I am trying to implement correctly scaling and zooming in css way. I created an example with scaled view. When click, the view should be zoomed and then to be able to scroll.
https://jsfiddle.net/opb5tcy8/4/
I have several issues with it:
Can I somehow get rid of the margin-left and margin-top on the .zoomed class? I did not manage to scale it without necessity to shift it with these margins.
When clicked, I can get the click position by clientX. I would like to use it to fluently scroll to the clicked position during zooming. However I can't manage the scroll to be fluent and when removing the margin-left it is kind of jumpy and not nice.
When you zoom in and move the scroll to the center and then zoom out, you can see the zoom is not nice as it first scrolls to the right. Is there a way to prevent it?
When you scroll to corners in Chrome on OSX it tends do navigate back/forward in browser. Is there a way to prevent this behaviour?
UPDATE:
The first part can be solved with transform-origin: 0 0. The other issues stays mostly the same as it is demonstrated.
Hm... I could say it is impossible to satisfy point 2 your condition with current browsers' support. The other are possible, as in this demo:
$(document).ready(function() {
var windowHalfWidth = $("#window").width() / 2;
var scalingFactor = 0.55;
var throtte = false;
$("#slider").click(function(event) {
//Simple event throtte to prevent click spamming breaking stuff up
if (throtte) return false;
throtte = true;
setTimeout(function() {
throtte = false;
}, 1000);
var xSelf = event.pageX - $("#window").offset().left + $("#window").scrollLeft();
if ($(this).hasClass("zoomed")) {
$("#window").animate({
scrollLeft: (xSelf / scalingFactor - windowHalfWidth)
}, 1000, "linear");
} else {
$("#window").animate({
scrollLeft: (xSelf * scalingFactor - windowHalfWidth)
}, 1000, "linear");
}
$("#slider").toggleClass("zoomed");
});
});
body {
background-color: #eee;
margin-top: 10px; /*reduced margin for easier view in SO */
}
#window {
width: 500px;
height: 200px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #999;
position: relative;
background-color: white;
}
#slider {
width: 900px;
height: 600px;
background-color: #fff;
position: absolute;
transition: 1s linear;
top: 0;
left: 0;
transform-origin: 0 0;
}
#slider.zoomed {
transform: scale(0.55);
}
#slider div {
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: 75px;
background-color: #eee;
text-align: center;
}
#obj1 {
left: 10px;
}
#obj2 {
left: 210px;
}
#obj3 {
left: 410px;
}
#obj4 {
left: 610px;
}
#obj5 {
left: 810px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<div id="slider" class="zoomed">
<div id="obj1">1</div>
<div id="obj2">2</div>
<div id="obj3">3</div>
<div id="obj4">4</div>
<div id="obj5">5</div>
</div>
</div>
As you can see, the zooming & scrolling is quite laggy, especially when the far right size is zoomed in.
The reason is simple, because jQuery and css both have their own animation loop, and they are not in sync. In order to solve this we'll need to somehow manage to do both scrolling & scaling animations with only one system, either jQuery or CSS.
Problem is: jQuery don't have a scaling feature, and css can't scroll elements. Wonderful.
If your scaling can be done with width/height though, it would be possible, using jquery width&height animate(). But if the #slider consists of many components I guess it can't be done.
So um writing an answer just to say it's impossible is kind of a let down, so I think maybe I can suggest an alternative, using dragging to scroll content (similar to the way Google map work):
var windowHalfWidth, startX, startLeft, minLeft, dragging = false,
zooming = false;
var zoomElement = function(event) {
var xSelf = event.pageX - $("#window").offset().left - parseFloat($("#slider").css("left"));
if ($("#slider").hasClass("zoomed")) {
minLeft = windowHalfWidth * 2 - 900;
var newLeft = Math.min(Math.max((-(xSelf / 0.55 - windowHalfWidth)), minLeft), 0);
$("#slider").css("left", newLeft + "px");
} else {
minLeft = windowHalfWidth * 2 - 900 * 0.55;
var newLeft = Math.min(Math.max((-(xSelf * 0.55 - windowHalfWidth)), minLeft), 0);
$("#slider").css("left", newLeft + "px");
}
$("#slider").toggleClass("zoomed");
}
$(document).ready(function() {
windowHalfWidth = $("#window").width() / 2;
minLeft = windowHalfWidth * 2 - 900 * 0.55;
$("#slider").on({
mousedown: function(event) {
dragging = true;
startX = event.pageX;
startLeft = parseFloat($(this).css("left"));
},
mousemove: function(event) {
if (dragging && !zooming) {
var newLeft = Math.min(Math.max((startLeft + event.pageX - startX), minLeft), 0);
$("#slider").css("left", newLeft + "px");
}
},
mouseup: function(event) {
dragging = false;
if (Math.abs(startX - event.pageX) < 30 && !zooming) {
// Simple event throtte to prevent click spamming
zooming = true;
$("#slider").css("transition", "1s");
setTimeout(function() {
zooming = false;
$("#slider").css("transition", "initial");
}, 1000);
zoomElement(event);
}
},
mouseleave: function() {
dragging = false;
}
});
});
body {
background-color: #eee;
margin-top: 10px; /*reduced margin for easier view in SO */
}
#window {
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #999;
position: relative;
background-color: white;
}
#slider {
width: 900px;
height: 600px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
}
#slider.zoomed {
transform: scale(0.55);
}
#slider div {
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: 75px;
background-color: #eee;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#obj1 {
left: 10px;
}
#obj2 {
left: 210px;
}
#obj3 {
left: 410px;
}
#obj4 {
left: 610px;
}
#obj5 {
left: 810px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<div id="slider" class="zoomed">
<div id="obj1">1</div>
<div id="obj2">2</div>
<div id="obj3">3</div>
<div id="obj4">4</div>
<div id="obj5">5</div>
</div>
</div>
This variation manages to get CSS to do both animation, by sacrificing the scrollbar (which is pretty ugly imo, who needs it?) and use css left instead.
So I hope if in the end you can't find a good solution, at least you have this to consider as fall back version.
I'll address the points individually and then give an example at the end.
When clicked, I can get the click position by clientX. I would like to
use it to fluently scroll to the clicked position during zooming.
In my opinion scroll animations during transitions can be a bit choppy in webkit browsers. Try balancing the animation time of the jQuery effect with the animation time of the css transition.
When you zoom in and move the scroll to the centre and then zoom out, you can see the zoom is not nice as it first scrolls to the right. Is there a way to prevent it?
Bring the scrollLeft property of the div#window back to 0px. Again, tweaking the animation times will make this less jerky.
When you scroll to corners in Chrome on OSX it tends do navigate back/forward in browser. Is there a way to prevent this behaviour?
You could use the mouseover and mouseout events to toggle a overflow:hidden css on the body.
Here's an example change to your code:
var slider = $("#slider").on('click', function(event) {
if (!slider.hasClass('zoomed')) {
// zoom back to left position
$('#window').animate({scrollLeft:'0px'});
}else{
// zoom to click position within slider
$('#window').animate({scrollLeft:event.clientX + 'px'}, 2000);
}
slider.toggleClass("zoomed");
});
/* stop window scrolling when using slider */
slider
.on('mouseover', function () {
$(document.body).css({overflow:'hidden'});
})
.on('mouseout', function () {
$(document.body).css({overflow:'auto'});
});
And an updated fiddle.