openlayers

Sample Code for OpenLayers

<!doctype html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">
    <style>
    .map {
        height: 400px;
        width: 100%;
    }

.ol-popup {
        position: absolute;
        min-width: 180px;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #ccc;
        bottom: 12px;
        left: -50px;
    }

.ol-popup:after,
    .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

.ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

.ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

.ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

.ol-popup-closer:after {
        content: "✖";
    }
    </style>
    <script src="https://openlayers.org/en/v6.1.1/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
</head>

<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    <script type="text/javascript">
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

var overlay = new ol.Overlay(({
        element: container,
        autoPan: true,
        offset: [0, -10]
    }));

closer.onclick = function() {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
    };

var url = "https://profsmythe.blogspot.com/2015/06/how-to-track-peoples-location-in-omegle.html"

var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: url,
            format: new ol.format.GeoJSON()
        }),
        style: function(feature) {

return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgb(3,91,178)',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(3,91,178,0.5)'
                }),
                image: new ol.style.Circle({
                    fill: new ol.style.Fill({ color: 'rgba(3,91,178,0.5)' }),
                    radius: 5,
                    stroke: new ol.style.Stroke({ color: 'rgb(3,91,178)', width: 1 })
                })
            })
        }
    });

var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vectorLayer
        ],
        overlays: [overlay],
        view: new ol.View({
            center: ol.proj.fromLonLat([121.41, 23.82]),
            zoom: 7
        })
    });

map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature, layer) {
                return feature;
            });
        if (feature) {
            var geometry = feature.getGeometry();
            HTML = '';
            var pro = feature.getProperties();
            delete pro.geometry
            for (var q in pro) {

HTML += q + ":" + pro[q] + '\n';
            }

content.innerText = HTML;
            overlay.setPosition(evt.coordinate);
        };
    })
    </script>
</body>

</html>

​x
    var url = "https://profsmythe.blogspot.com/2015/06/how-to-track-peoples-location-in-omegle.html"
 
<!doctype html>
<html lang="en">
​
<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">
    <style>
    .map {
        height: 400px;
        width: 100%;
    }
​
    .ol-popup {
        position: absolute;
        min-width: 180px;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #ccc;
        bottom: 12px;
        left: -50px;
    }
​
    .ol-popup:after,
    .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
​
    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }
​
    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }
​
    .ol-popup-closer {
        text-decoration: none;