simple-ip-to-map/visualiser.html at master · oom-/simple-ip-to-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
	<title>Visualiser</title>
	 <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
	</style>
	<link rel="stylesheet" href="./css/ol.css">
</head>
<body>
<div id="map" class="map"></div>
</body>
<footer>

<script src="./js/ol.js"> </script>
	<script src="solved.js"></script>
	<script type="text/javascript">
		var average = {lat: 0, lng: 0};
		locs.map(loc => {average.lat += loc.lat; average.longitude += loc.lng;});
		if (locs.length > 0)
			{
				average.lat /= locs.length;
				average.lng /= locs.length;
			}

	var sameloc = (i) => {return locs.filter(x => x.lat == i.lat && x.lng == i.lng).length;};
    var vectorSource = new ol.source.Vector({});
    locs.map(item =>
    {
        var iconFeature = new ol.Feature({
          	geometry: new ol.geom.Point(ol.proj.transform([item.lng, item.lat], 'EPSG:4326',   'EPSG:3857')),
  			name: item.ip,
  			style: stylef
        });
        var stylef = new ol.style.Style({
  				text: new ol.style.Text({
			        	font: '14px Calibri,sans-serif',
			        	fill: new ol.style.Fill({ color: '#000' }),
			         	stroke: new ol.style.Stroke({color: '#fff', width: 2}),
			         	text: item.ip,//(item.ip + '(' + sameloc(item) + ')') //NOTE: uncomment to show how many occurences
				}),
				stroke: new ol.style.Stroke({color: '#000', width: 2}),
				fill: new ol.style.Fill({color: 'red'}),
				image: new ol.style.RegularShape({
		            fill: new ol.style.Fill({color: 'red'}),
		            stroke: new ol.style.Stroke({color: 'black', width: 2}),
		            points: 20,
		            radius: 8,
		            angle: Math.PI / 4
		          })
  			});
        iconFeature.setStyle(stylef);
        vectorSource.addFeature(iconFeature);
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource
    });

    var map = new ol.Map({
      layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
      target: document.getElementById('map'),
      view: new ol.View({
        center: [0, 0],
        zoom: 3
      })
    });


	</script>

</footer>
</html>