Leaflet Velocity CRS

by janzikmund

HTML

<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-velocity.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-velocity.min.css">
<div id="mapwindflow"></div>

SCSS

#mapwindflow {
  display: block;
  color: #333;
  height: 100vh;
  width: 100vw;
  
  #mapwindflow.leaflet-container {
    background-color: #000;
  }
}

JavaScript

/**
 * Custom parts for Windlow page using Leaflet and Leaflet Velocity
 */
	function initWindflowMap(){
		var basicZoom = 6;

	  var map = L.map('mapwindflow', {
	  	crs: L.CRS.Simple,
	      minZoom: basicZoom,
	      maxZoom: basicZoom + 18,
	  });

	  return {
	     map: map,
	  };
	}

	// windflow map
	var mapStuff = initWindflowMap();
	var map = mapStuff.map;

	// add raster image layer
	var imageUrl = 'https://placeimg.com/1000/1000/arch',
    imageBounds = [[0,0], [10,10]];
	L.imageOverlay(imageUrl, imageBounds).addTo(map);
	map.fitBounds(imageBounds);
  
  // add velocity layer
  var velocityData =...