Map

This map is show on the recycle process page. It has an animation when it's in the view.

Default

px

			
				<div class="m-map js-m-map " style="background-image: url(/assets/images/article/map.png);">
	<img class="m-map__visual" src="/assets/images/article/map.png" alt="map" title="map" />
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
	<span class="m-map__pin" style="background-image: url(/assets/images/mock/pin.svg);"></span>
</div>
			

		

Documentation

JavaScript

  • js-m-map Will put a class on the pin to trigger the animation