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?

  • The file you got from the OSM map site does not contain the nodes of the lines. You need them for rendering though. In the second try downloads everything inside the current view, which will be too much when zooming out. – AndreJ Jul 10 '18 at 9:24
  • Is there a way I can get those nodes without drawing them manually? About the second try, sorry but I don't understand the zoom question. I believe the nature of an example is to work properly to let you understand the problem it faces, so I supposed it would have worked without touching anything. Do you think I need to increase the starting zoom livel? – Stefania Jul 10 '18 at 10:15
  • 1
    For the first part, you might use the JOSM editor to load the relation complete, with ways and nodes. Then save to a local file. For the OL example, you better open a new topic. I think the link to ol.js is missing, and maybe more. – AndreJ Jul 10 '18 at 12:10

When the OpenLayers 5 example code is directly copied and opened in a browser, it will not work because it assumes that you use an development environment that utilizes ES modules. To make it run you can can either modify the example or follow the instructions at the: https://openlayers.org/en/latest/doc/tutorials/bundle.html.

Also, the OpenStreetMap data has to include the nodes (point coordinates) that a highway or in this case the route relation geometry consists of to be able to draw it in OpenLayers or any other software properly. Although the OSM XML format that you have used is good option, depending on the situation easier could be to export the data as GeoJSON from the Overpass Turbo site. Here is a query that works in this case: http://overpass-turbo.eu/s/AbT.

The exported data would be typically stored to a database or at least to a web server but here is an example code that includes the data of your case and visualizes it on a map using the OpenLayers 5: https://codepen.io/ernoma/pen/YjzrqE.

  • Is it possible to include the geojson as an external file, for example as a static resource? – Stefania Jul 10 '18 at 13:47
  • 1
    Yes, here is an example that still works in the OpenLayers 5: gis.stackexchange.com/a/203357/52577. Just replace the url parameter with the external location where the static GeoJSON file resides. – Orienteerix Jul 10 '18 at 16:24
  • 1
    If you decide to develop with the ES modules then there is an OpenLayers workshop with example of including an external static GeoJSON file: openlayers.org/workshop/en/vector/geojson.html – Orienteerix Jul 10 '18 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.