Example.html

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
    <script src="required/underscore.js"></script>
    <script src="required/graph.js"></script>
    <script src="OR-OL3.js"></script>
  </head>
  <body>
    <button id="getPath">Get Path</button>
    <div id="map" class="map" tabindex="0"></div>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
        	projection: 'EPSG:4326',
          center: [-5.811029 , 35.786934],
          zoom: 16
        })
      });
      
      var networkSource=new ol.source.Vector({
        projection : 'EPSG:4326',
        url: 'data-example/Tangier-Medina.geojson',
				format: new ol.format.GeoJSON()
    	});
    	var networkLayer=new ol.layer.Vector({
				title:'Tangier Old Medina roads', 
				source: networkSource,
        style: new ol.style.Style({
    			fill: new ol.style.Fill({
      			color: 'rgba(255, 255, 255, 0.2)'
    			}),
    			stroke: new ol.style.Stroke({
      			color: '#737373',
      			width: 2
    			}),
    			image: new ol.style.Circle({
      			radius: 7,
      			fill: new ol.style.Fill({
        			color: '#ffcc33'
      			})
    			})
  			})
			});
			
			map.addLayer(networkLayer);

			var sourceFeature = new ol.Feature({
        	geometry: new ol.geom.Point([ -5.808447003364563, 35.78528222343591]),
			});
			var sourceStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 0],
          anchorOrigin: 'bottom-left',
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'img/marker-source.png'
        }))
    	});

    	sourceFeature.setStyle(sourceStyle);

    	var destinationFeature = new ol.Feature({
        	geometry: new ol.geom.Point([ -5.812851190567017, 35.784746963605144]),
			});
			var destinationStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 0],
          anchorOrigin: 'bottom-left',
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'img/marker-destination.png'
        }))
    	});

    	destinationFeature.setStyle(destinationStyle);

    	var	startEndSource = new ol.source.Vector({
        	features: [sourceFeature, destinationFeature]
    	});

    	var startEndLayer = new ol.layer.Vector({
        	source: startEndSource
			});

			map.addLayer(startEndLayer);
      
      document.getElementById('getPath').onclick = function() {
        var network=createNetwork(networkLayer.getSource().getFeatures());
        var shortestPath=getShortestPath(network, [-5.808447003364563, 35.78528222343591], [-5.812851190567017, 35.784746963605144]);
        var shortestPathLayer=new ol.layer.Vector({
         	source: new ol.source.Vector({
         		features: [new ol.Feature({
           		geometry: shortestPath
           	})]
         	}),
         	style: networkLayer.getStyle()
       	});
       	map.addLayer(shortestPathLayer);
       	shortestPathLayer.setVisible(true);
       	networkLayer.setVisible(false);
      };
    </script>
  </body>
</html>