Generate random lon/lat coordinate anywhere on the map

Question

I want to generate a random coordinate that would display anywhere on the map. I've seen these two posts:

Generating random lat/long coordinates

And using this post for the JavaScript code: https://stackoverflow.com/questions/69221354/how-to-generate-random-longitude-and-latitude

And came up with the following:

function generateRandomLonLat() {
  return [Math.floor(Math.random() * 360) - 180, Math.round(Math.acos(2 * Math.random() - 1) * 180 / Math.PI) - 90];
}

But it also generates non-valid coordinates that are outside of the map.

Why?

Answer 1

• Your code is returning integers because you explicitly ask for them with Math.floor and Math.round.
• Your code produces points in the bounds [-180, -90, 180, 90] which are valid lon, lat coordinates. However, the valid geodetic bounds for EPSG:3857 are [-180, -85.06, 180, 85.06], so you need to restrict the latitudes you generate.
• You're generating lon, lat (X,Y). Make sure you are using them in the correct order expected by OpenLayers (i.e lon, lat not lat, lon)
• You haven't shown your code that adds a marker to the map, but don't forget to project the point into EPSG 3857 .

These points are addressed by the code below:

function generateRandomLonLat() {
  return [
    (Math.random() * 360) - 180, 
    (Math.acos(2 * Math.random() - 1) * 170.12 / Math.PI) - 85.06
  ];
}

const LonLat = generateRandomLonLat();
const XY = ol.proj.fromLonLat(LonLat);

Runnable example (modified from https://jsfiddle.net/geocodezip/pzmh64jk/4/):

function generateRandomLonLat() {
  return [
    (Math.random() * 360) - 180, 
    (Math.acos(2 * Math.random() - 1) * 170.12 / Math.PI) - 85.06
  ];
}
const LonLat = generateRandomLonLat();
const XY = ol.proj.fromLonLat(LonLat);
console.log(LonLat);

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(XY), 
  name: 'Random Point',
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.OSM() // OSM()
    }),
    new ol.layer.Vector({ // VectorLayer({
      source: new ol.source.Vector({// VectorSource({
        features: [iconFeature]
      }),
      style: new ol.style.Style({ // Style({
        image: new ol.style.Icon({ // Icon({
          anchor: [0.5, 30],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/v5.3.0/examples/data/icon.png' 
        })
      })
    })
  ],
  view: new ol.View({
    center: XY,
    zoom: 2
  })
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 90%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/build/ol.js"></script>
<title>OpenLayers example</title>
<div id="map" class="map"></div>

Although if you don't want the areal weighting of latitudes, your code would become:

function generateRandomLonLat() {
  return [
    (Math.random() * 360) - 180, 
    (Math.random() * 170.12) - 85.06
  ];
}

const LonLat = generateRandomLonLat();
const XY = ol.proj.fromLonLat(LonLat);

function generateRandomLonLat() {
  return [
    (Math.random() * 360) - 180, 
    (Math.random() * 170.12) - 85.06
  ];
}

const LonLat = generateRandomLonLat();
const XY = ol.proj.fromLonLat(LonLat);
console.log(LonLat);

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(XY), 
  name: 'Random Point',
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.OSM() // OSM()
    }),
    new ol.layer.Vector({ // VectorLayer({
      source: new ol.source.Vector({// VectorSource({
        features: [iconFeature]
      }),
      style: new ol.style.Style({ // Style({
        image: new ol.style.Icon({ // Icon({
          anchor: [0.5, 30],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/v5.3.0/examples/data/icon.png' 
        })
      })
    })
  ],
  view: new ol.View({
    center: XY,
    zoom: 2
  })
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 90%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/build/ol.js"></script>
<title>OpenLayers example</title>
<div id="map" class="map"></div>