How to use the attribute 'url' of ol.source.OSM

Question

I've deployed a local openstreetmap tile server and tried many times to show the map using openlayers3, but failed unfortunately. Here's my experiment scene. I deploy the tile server on port 80, and get the image correctly via http://127.0.0.1:80/osm_tiles/{z}/{x}/{y}.png. Besides, I place a django web on port 8099, and i can access the web page via http://127.0.0.1:8099/my/page. In the template page, i wrote like this

var layer = new ol.layer.Tile({
        source: new ol.source.OSM({
            attributions: [
                ol.source.OSM.ATTRIBUTION
            ],
            url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png'            
        })
    });

var map= new ol.Map({
        target : 'map_canvas',
        loadTilesWhileAnimating: true,
        view: new ol.View({
            center:ol.proj.transform([116.391625,39.906813], 'EPSG:4326', 'EPSG:3857'),
            zoom : 12
        }),
        layers:[layer]
    });

The map_canvas shows nothing, but i can get the images from tile server in firebug.WHY? Help me, many thanks!

sifriday · Accepted Answer · 2016-04-19 09:27:24Z

1

Try adding crossOrigin: null to the source, like so:

var layer = new ol.layer.Tile({
    source: new ol.source.OSM({
        attributions: [
            ol.source.OSM.ATTRIBUTION
        ],
        url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png',
        crossOrigin: null            
    })
});

answered Apr 19, 2016 at 9:27

sifriday

4,5011 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sifriday Over a year ago

Great. You might enjoy reading about the general problem this relates to: developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Collectives™ on Stack Overflow

How to use the attribute 'url' of ol.source.OSM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related