OpenStreetMap with OpenLayers

http://openlayers.org

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/css/ol.css">
<script src="https://www.ockert-cnc.de/wp-content/uploads/2016/12/map-marker-icon-300x300.png"></script>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

   
   <div id="map" class="map">
    <div id="popup"></div>
    </div>
    
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="openlayers/ol.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

CSS

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([199, 154]),
        name: 'A point',
        population: 4000,
        rainfall: 500
    });

    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            src: 'https://i.imgur.com/q7B2B8p.png'
        })
    })

    var vectorSource = new ol.source.Vector({
        features: []
    });

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

    var roadLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    })

    var rasterLayer = new ol.layer.Tile({
        source: new ol.source.TileJSON({
            url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
            crossOrigin: ''
        })
    });
    var lel=[
        {
        name: "Parking0001",
        lat: "33.1495",
        lon: "33.39243"
        },
        {
        name: "RecycleBin0001",
        lat: "34.1495",
        lon: "33.39243"
        },
        {
        name: "WaterA27",
        lat: "35.1495",
        lon: "33.39243"
        },
        {
        name: "WaterA12",
        lat: "36.1495",
        lon: "32.39243"
        }
        ]
    lel.forEach( (feature,index) => {
        let iconFeature = new ol.Feature({
            geometry: new ol.geom.Point([Number(feature.lon), Number(feature.lat)]).transform('EPSG:4326', 'EPSG:3857'),
            name: feature.name
        })
        iconFeature.setStyle(iconStyle)
        vectorSource.addFeature(iconFeature)
    })
   
    var map = new ol.Map({
        target: 'map',
        layers: [roadLayer, vectorLayer],
        view: new ol.View({
            center: ol.proj.fromLonLat([35.1495, 33.39243]),
            zoom: 7
        })
    });

    var element = document.getElementById('popup');

    var popup = new ol.Overlay({
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, -50]
    });
    map.addOverlay(popup);

    // display popup on click
   ...