nagix / mapbox-gl-animated-popup Goto Github PK
View Code? Open in Web Editor NEWAn animated popup component for Mapbox GL JS
Home Page: https://nagix.github.io/mapbox-gl-animated-popup
License: MIT License
An animated popup component for Mapbox GL JS
Home Page: https://nagix.github.io/mapbox-gl-animated-popup
License: MIT License
Issue
The popup animation loads from the central spot of the popup div, and not from the anchor position (i.e. the triangle along the bottom/top of the popup depending on the marker position on the map when clicked).
Working Example of Issue:
JSFiddle Demo
(If the JSfiddle doesn't load for you, check that a browser extension isn't preventing the canvas from loading)
Once in the Fiddle:
YOUR_MAPBOX_ACCESS_TOKEN
into the javascript section of the fiddleTo Reproduce Issue:
Click on the Marker, and notice the animation begins from the center of the div regardless.
And now switch:
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
to
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet" />
Then animation works with its correct expected behavior... The example on the popup animation website uses v2.3.1
, and as demoed it also clearly works with v2.4.1
. I have not tested other combinations mapbox-gl versions, but the latest of v2.6.1
(as of Dec 2021) clearly causes issue. Is this an issue with mapbox-gl javascript or the animated-popup javascript?
For completeness, I ever remove the JSFiddle the jsfiddle code was as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Attach a popup to a marker instance</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl-animated-popup.min.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#marker {
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
</style>
<div id="map"></div>
<script>
// put your personal mapbox access token here to load the map
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: monument,
zoom: 15
});
// create the popup
var popup = new AnimatedPopup({
offset: 25,
openingAnimation: {
duration: 1000,
easing: 'easeOutElastic'
},
closingAnimation: {
duration: 300,
easing: 'easeInBack'
}
}).setText(
'Construction on the Washington Monument began in 1848.'
);
// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';
// create the marker
new mapboxgl.Marker(el)
.setLngLat(monument)
.setPopup(popup) // sets a popup on this marker
.addTo(map);
</script>
</body>
</html>
Type error: Could not find a declaration file for module 'mapbox-gl-animated-popup'. /node_modules/mapbox-gl-animated-popup/dist/mapbox-gl-animated-popup.js' implicitly has an 'any' type.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.