I'm trying to use OSM maps in a simple html page, just to learn the bases and evaluate if it will allow us to represent specific data on a map. Our needs are to have a web map of a specific highway and a vector representation of the two directions, bifurcations, exits and so on. The top would be to get a representation of the different lanes to mark work in progress along the road, but I don't understand if I can get to a so deep level.
As a simulation, I downloaded the highway osm file map from OSM map site and edited it, using osmosis, removing all the data I don't need.
I copied the example at https://wiki.openstreetmap.org/wiki/OpenLayers_osm_file_example in a local file and updated the lat and lon coordinates and the osm file name. What I obtained was the normal map of open street map without any of the content of my osm file. Is there something more I need to do to get it works?
The example above uses Openlayer 2, so I thought probably it is too obsolete to properly work, then I took a look at Openlayer 5 vector example. I simply copied and pasted the code on a local html file, without changing a word, and what I obtained was a perfectly blank page and the browser console was full of complains due to a not correct syntax. So or the example on line was really full of errors or I'm missing something...
I really don't understand where I'm wrong in both cases.
Can anyone give me a suggestion?