Search code examples
javascriptamazon-web-servicesopenlayersopenstreetmap

EC2 Open Street Map Server with Open Layers 3


Good Evening:

I would like to connect to my EC2 Open Street Map Server with Open Layers 3. So, I have a file example in my server:

http://ec2-34-240-39-198.eu-west-1.compute.amazonaws.com/openlayers-example.html

However, my code does not show the address, if you show the source (Ctrl-U):

var newL = new OpenLayers.Layer.OSM("Default", "/osm_tiles/${z}/${x}/${y}.png", {numZoomLevels: 19});

I don´t know what is 'Default', and I can´t connect my server with Open Layers 3. This is my code:

var map = new ol.Map({
          target: 'map', 
          renderer: 'canvas', 
          layers: [
             new ol.layer.Tile({
                 source: new ol.source.OSM({
                   crossOrigin: null,
                   url: 'http://ec2-34-240-39-198.eu-west-1.compute.amazonaws.com/osm_tiles/${z}/${x}/${y}.png',
                    }),
                 }),
                vectorLayer,
           ],
 // Create a view centered on the specified location and zoom level
 view: new ol.View({
         center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
         zoom: 3
         }),
       interactions: ol.interaction.defaults().extend([
         new ol.interaction.DragRotateAndZoom()
          ])
        });

Solution

  • It is connecting to your server. The source shows the generic location. Open Layer handles all the complexity to find the proper X/Y/Z values.

    You can right click on the map and show the picture information. You will see that they are indeed from your server, with varying X/Y/Z values.

    enter image description here