Login/Register
How to use a different tile provider in openlayer3
Asked Answered
Solved openstreetmapopenlayers-3layer
P

1

1

I am looking for detailed steps to implement this tile provider https://leaflet-extras.github.io/leaflet-providers/preview/ or http://mapstyle.petschge.de/

I am newbie where i am not knowing how to go about in implementing to the existing code which is shown below

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Simple map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <style>

    </style>
</head>
<body>
<!--html element which contains the map-->
<div id="map" class="map"></div>

<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<!--our app code-->
<script>
    var map = new ol.Map({
        target: 'map',  // The DOM element that will contains the map
        renderer: 'canvas', // Force the renderer to be used
        layers: [
            // Add a new Tile layer getting tiles from OpenStreetMap source
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        // Create a view centered on the specified location and zoom level
        view: new ol.View({
            center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326', 'EPSG:3857'),
            zoom: 18,
            rotation: 68*Math.PI/180
        })
    });
</script>


</body>
</html>

the above code will just display a map using osm layer looking for a way to change it please help

Psychosomatics answered 4/1, 2016 at 16:20 Comment(0)
A
2

You can use any tile map server as your tile source. Just create a XYZ tile source instead of an OSM source with the url of the tile server.

var map = new ol.Map({
    target: 'map',  // The DOM element that will contains the map
    renderer: 'canvas', // Force the renderer to be used
    layers: [
        // Add a new Tile layer getting tiles from OpenStreetMap source
        new ol.layer.Tile({
            source: new ol.source.XYZ(
                    {
                        urls : ["http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://b.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://c.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"]
                    })
        })
    ],
    // Create a view centered on the specified location and zoom level
    view: new ol.View({
        center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10,
        rotation: 68*Math.PI/180
    })
});

If you don't like the tiles above, use one of the urls below.

["http://a.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png","http://b.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png","http://c.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"]
["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png","http://b.tile.openstreetmap.org/{z}/{x}/{y}.png","http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"]
["http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile2.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile3.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"]
["http://a.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://b.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://d.tile.stamen.com/watercolor/{z}/{x}/{y}.png"]
["http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://b.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://c.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"]

More urls like this can be found in the second link you have mentioned, look at the page source to view them.

Adhesion answered 5/1, 2016 at 3:57 Comment(5)
thank you so much u saved me can u please refer some source to learn openlayer3 – Psychosomatics
Glad I could help. Best places to learn ol is API Documentation and examples. If you want to understand how OpenLayers work, look at its source – Adhesion
can u please say how the name provided in the source ie XYZ is associated with the urls – Psychosomatics
this is the list of all the sources OpenLayers have, you can see both OSM and XYZ in the list. Each source provide different API, hence different set of functions. You have to choose them based on your requirements. – Adhesion
can u please have a look this question #34766732 – Psychosomatics

© 2022 - 2024 — McMap. All rights reserved.