jgcasta/LICENSE.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Script to test loading time for large amount of points using OpenLayers 3. Open the map in a new window and select the number of icons to test

  
## index.html
<!--
    OpenLayer 3 icon loading test

    José Gómez Castaño
    jgomez03@pdi.ucm.es

    Script to test loading time for large amount of points using OpenLayers 3


-->
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>

<style>
    body { font-family: arial; }
    .map {
      height: 550px; width: 100%;
    }

    h3 {
      border-bottom: 1px solid #000000;
    }

</style>
</head>
<body>
<h3>Open Layer 3 icon loading test</h3>

<div id="data" ><h5 ></h5></div>
<div id="map" class="map"></div>

<script src='http://openlayers.org/en/v3.16.0/build/ol.js'></script>

<script>
var numPoints = prompt("How many points do you want to test?");

var data = document.getElementById('data');

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    src: 'http://openlayers.org/api/img/marker.png'
  }))
});

 var  minLong = -10000;
 var  maxLong = -1400000;
 var  maxLat = 5500000;
 var  minLat = 4410000;

 var icons = [];
  var startTime = new Date();

  for (var i = 0; i < numPoints; i++) {

    var lon = Math.floor(Math.random() * (maxLong - minLong + 1) + minLong);
    var lat = Math.floor(Math.random() * (maxLat - minLat + 1)+ minLat);
    var iconFeature = new ol.Feature({ geometry: new ol.geom.Point([lon, lat])});
    iconFeature.setStyle(iconStyle);
    icons.push(iconFeature);
  }

// creating the map
map = new ol.Map({
  controls: ol.control.defaults(),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({ features: icons })
    })
  ],
  renderer: "canvas",
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([-3.5, 40], 'EPSG:4326', 'EPSG:3857'),
    zoom: 6
  })
});

var totalTime = ((new Date().getTime() - startTime.getTime()) * .001) ;
data.innerHTML +=  'Time to create ' + numPoints + ' points: ' + totalTime + ' seconds';
</script>
</body>
</html>

## LICENSE.md

      
    Raw
  

              LICENSE.md
            
          
    http://creativecommons.org/licenses/by/4.0/
	<!--
	OpenLayer 3 icon loading test

	José Gómez Castaño
	jgomez03@pdi.ucm.es

	Script to test loading time for large amount of points using OpenLayers 3


	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='UTF-8'>

	<style>
	body { font-family: arial; }
	.map {
	height: 550px; width: 100%;
	}

	h3 {
	border-bottom: 1px solid #000000;
	}

	</style>
	</head>
	<body>
	<h3>Open Layer 3 icon loading test</h3>

	<div id="data" ><h5 ></h5></div>
	<div id="map" class="map"></div>

	<script src='http://openlayers.org/en/v3.16.0/build/ol.js'></script>

	<script>
	var numPoints = prompt("How many points do you want to test?");

	var data = document.getElementById('data');

	var iconStyle = new ol.style.Style({
	image: new ol.style.Icon(({
	anchor: [0.5, 0.5],
	anchorXUnits: 'fraction',
	anchorYUnits: 'fraction',
	src: 'http://openlayers.org/api/img/marker.png'
	}))
	});

	var minLong = -10000;
	var maxLong = -1400000;
	var maxLat = 5500000;
	var minLat = 4410000;

	var icons = [];
	var startTime = new Date();

	for (var i = 0; i < numPoints; i++) {

	var lon = Math.floor(Math.random() * (maxLong - minLong + 1) + minLong);
	var lat = Math.floor(Math.random() * (maxLat - minLat + 1)+ minLat);
	var iconFeature = new ol.Feature({ geometry: new ol.geom.Point([lon, lat])});
	iconFeature.setStyle(iconStyle);
	icons.push(iconFeature);
	}

	// creating the map
	map = new ol.Map({
	controls: ol.control.defaults(),
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM()
	}),
	new ol.layer.Vector({
	source: new ol.source.Vector({ features: icons })
	})
	],
	renderer: "canvas",
	target: 'map',
	view: new ol.View({
	center: ol.proj.transform([-3.5, 40], 'EPSG:4326', 'EPSG:3857'),
	zoom: 6
	})
	});

	var totalTime = ((new Date().getTime() - startTime.getTime()) * .001) ;
	data.innerHTML += 'Time to create ' + numPoints + ' points: ' + totalTime + ' seconds';
	</script>
	</body>
	</html>