[GIS] OSM set up OpenLayers to connect to local TileServer

localhostopenlayersopenstreetmaptile-server

I just set up local tile server following these instructions
https://switch2osm.org/serving-tiles/building-a-tile-server-from-packages/ and I want to deploy OpenLayers on local too, such that it communicates with the local tile server.

So I got v3.5.0.zip from here: http://openlayers.org/download

I am looking where to modify the code in OpenLayers libraries to make them contact the local tile server. I am testing on example below. Can anyone help me to figure out how to make this set up?

I've tried to modify it by myself in a couple of places, but it didn't work

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://127.0.0.1/osm/v3.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://127.0.0.1/osm/v3.5.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

Best Answer

You just need to follow the official sample Localized OpenStreetMap.

You will just have to copy/paste the referenced sample in a new html file.

Then, if your tiles "root" is located at http://localhost/osm/, replace http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png with http://localhost/osm/{z}/{x}/{y}.png

Save and it should work by opening the file in your browser.

Introduction

This will likely require significant amount of manually work to detect and remove the duplicated data. When you're detecting and resolving the duplicate data; you'll want both sources to be in the same geo format: shapefile, PostGIS DBs, or as OSM data.

Workflow

The following workflow is based on having both sources of data as OSM before merging and resolving duplicate data.

There's a couple options to convert the data into OSM:

Convert the shapefile data into OSM however you'd like. Versions of ogr2ogr released in 2013 or later (version 1.10 or later, IIRC) can also convert SHP to OSM. There's also ogr2osm as you had noted: there's a couple different versions of ogr2osm, no matter which one you use - I prefer pnorman's, it's the most up-to-date. No matter what, make sure the translation files are compatible with the version of ogr2osm that you're using (for the sake of simplicity, the ones that I've linked to should be compatible with the version of ogr2osm). See here as examples for translation files that are compatible with pnorman's ogr2osm.

Ensure the translation file is complete with of all the information that you want in your shapefile. The translation file will convert your Types and attributes of the shapefile into what OSM calls Tags, which consist of Keys and Values.

1a. run ogr2osm.

Open josm, download the conflation plugin
Your gov data is now a osm file. Open josm, File > open Your data is there as a layer.
If you already have the OSM data locally stored on your computer, open it in josm, it will also open as a new layer.
Merging these two sources of data together and resolving the duplicate data is known as conflation. Run the conflation plugin and resolve all of the conflicts.

If JOSM runs out of memory (e.g., when using large files), separate the types of attributes and complete this workflow multiple times, each with a different kind of data (e.g. boundaries and land uses; highways; buildings), and then finally merge the osm files together using osmium or another tool.

B. JOSM can also read shapefiles although SHP support isn't perfect and this method assumes the shapefile can be loaded entirely into memory...

Start JOSM.
Open the shapefile (e.g., filename.shp).
Select all.
In JOSM, Edit the attributes and properties that were imported from the SHP, and change them so each attribute corresponding an OSM tag.
Save as OSM format.
Continue from A4 and conflate

Import as OSM

Import the OpenStreetMap data into the system as follows:

Change to the directory containing OpenStreetMap (OSM) files converted using JOSM.
Execute the following commands in the database:

    CREATE EXTENSION hstore;
    osm2pgsql -j -W \
              -d osm filename.osm

The -j option is key as it instructions osm2pgsql to import the tags into an hstore column, this preserving the underlying data structure and will import all tags into the database.

Create Mapnik Layer

To have the data appear on the map, add a layer and a style for that layer. This can be as simple as the following:

Edit mapnik-stylesheets/osm.xml.
Insert the following XML code before the closing </Map> tag...

...

<Layer name="prefix_zone" status="on" srs="&osm2pgsql_projection;">
  <StyleName>zones</StyleName>
  <Datasource>
    <Parameter name="table">
    (select way from prefix_line order by tags desc, z_order) as zones
    </Parameter>
    &datasource-settings;
  </Datasource>
</Layer>

Create Mapnik Style

Continuing from the previous section:

Find the last </Style> tag (around line 3350).
Insert the following XML code before the &layer-shapefiles; directive:

...

<Style name="zones">
  <Rule>
    &maxscale_zoom1;
    &minscale_zoom19;
    <LineSymbolizer stroke="#0065BD" stroke-width="2.5" />
  </Rule>
</Style>

Roadmatcher

roadmatcher is another tool that might be helpful

OpenStreetMap Offline – Using Local OpenStreetMap (*.OSM) Map with OpenLayers 3

With OpenLayers 2 you can load .osm files using OpenLayers.Format.OSM, see the OpenLayers osm file example in the OSM wiki. Keep in mind that this approach will be rather limited compared to a tile server and will work only for small files.

With OpenLayers 3 you can achieve something similar according to this similar question on StackOverflow by using ol.source.OSMXML. There is also an example of loading OSM XML vector data dynamically from a server (in this case using Overpass API).