Plot Random Markers

Number of markers to plot:

A maximum of 999 markers can be plotted.

How it Works

var map;
var arrMarkers=new Array(0);
var bounds;
var map;
var messagediv=document.getElementById('messagediv');
var tileProviderURL="tile.openstreetmap.org";
var tileProviderAttribution='&copy; <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

var mapDivID = "map_canvas";
var latlng=[54.6228,-5.8955];
var zoom = 12;

var routePoints=new Array(0);

function initialize()
{
	document.getElementById(mapDivID).style.cursor = "crosshair";
	
	map = L.map(mapDivID,{
		fullscreenControl: true,
  		fullscreenControlOptions: {
    		position: 'topleft'
  			}
	}).setView(latlng, zoom);
	
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="//openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 
		id: 'mapbox.streets'
	}).addTo(map);
	
	var openstreetmap = L.tileLayer('https://{s}.'+tileProviderURL+'/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: tileProviderAttribution
	});
	
	openstreetmap.addTo(map);
} 

function ftn_button_clicked()
{
	clearmarkers();
    
	var num=document.getElementById("nm").value;
	if (num<1000)
	{
		plotrandom(num);
	}
}

function ftn_button_clearmap()
{
	clearmarkers();
}

function clearmarkers()
{
	if (arrMarkers) 
	{
		for (i in arrMarkers) 
		{
			arrMarkers[i].removeFrom(map);
		}
	}
	arrMarkers=new Array(0);
}

function plotrandom(number)
{
	bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var lngSpan = northEast.lng - southWest.lng;
	var latSpan = northEast.lat - southWest.lat;
	pointsrand=[];
	
	for(var i=0;i<number;++i)
	{
		var point = [southWest.lat + latSpan * Math.random(),southWest.lng + lngSpan * Math.random()];
		pointsrand.push(point);
	}
    
	for(var i=0;i<number;++i)
	{
		var str_text=i+" : "+pointsrand[i];
		var marker=placeMarker(pointsrand[i],str_text);
		marker.addTo(map);
        arrMarkers.push(marker);
	}
}

function placeMarker(location,text) 
{	
    var marker = L.marker(location,{title:text});
    return marker;
}

Relevant Links

Leaftlet Maps

Version History

• Version 4 - 5th December 2019 - Convert to Leaftlet Maps
• Version 3 - 14th March 2014 - When you hover over a marker it now displays the location latitude and longitude
• Version 2 - 9th November 2013 - Clean up code
• Version 1 - 20th November 2010 - Initial version