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 ">
	<img class="m-map__visual" src="/assets/images/article/map.png" width="1180" height="1134" alt="map" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
	<img class="m-map__pin" src="/assets/images/mock/pin.svg" width="26" height="34" alt="pin" loading="lazy" />
</div>

Documentation

JavaScript

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