OL3 Test

by tr00st

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/ol.css">
<script src="https://unpkg.com/[email protected]/dist/ol.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<div id="map" class="map"><div id="popup"></div></div>

JavaScript

var someFeatures = [];
var numDCs = 1000;
var numProbesPerDC = 4;

var q = 0;
for (var i = 0; i < numDCs; i++) {

  var baseLat = -104.99404 + (Math.random()*2-1);
  var baseLon = 39.75621 + (Math.random()*2-1);
  var concentratorAddress = ("0".repeat(10) + i).slice(-8)
  var dcStatus = Math.floor(Math.random()*3);
  someFeatures.push({
      "type": "Feature",
      "id": concentratorAddress,
      "properties": {
          "type": "concentrator",
          "show_on_map": true,
          "status": dcStatus,
          "address": concentratorAddress
      },
      "geometry": {
          "type": "Point",
          "coordinates": [
          	baseLat,
            baseLon
          ]
      }
  });
  
  for (var j = 0; j < numProbesPerDC; j++) {
  	var probeAddress = "f"+("0".repeat(10) + q).slice(-7);
  	q++;
    var probeLat = baseLat + (Math.random()*0.05-0.025);
    var probeLon = baseLon + (Math.random()*0.05-0.025);
    var probeStatus = dcStatus > 0 ? dcStatus : Math.floor(Math.random()*3);
    someFeatures.push({
      "type": "Feature",
      "id": probeAddress,
      "properties": {
        "type": "probe",
        "show_on_map": true,
        "status": probeStatus,
        "address": probeAddress
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          probeLat,
          probeLon
        ]
      }
    });
    someFeatures.push({
      "type": "Feature",
      "id": "link."+probeAddress,
      "properties": {
        "type": "connection",
        "show_on_map": true,
        "status": probeStatus
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [probeLat,
          probeLon],
          [baseLat,
          baseLon]
        ]
      }
    });
  }
}

var generatedGeoJson = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:4326'
    },
  },
  'features': someFeatures
}

console.log(generatedGeoJson)


      var vectorSource = new...