1

I've used vector tile in OpenLayers 4.1 to show vectors on top of OSM base map. The problem is, it shows a white screen and throws the "c.de is not a function" in the console. I debugged the code and found out it's related to vectorTileSource part but I can't get any detail. What's the problem with my code? The script part of the code attached here:

<script>

var baseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var fill = new ol.style.Fill({
    color: 'rgba(0,0,0,2)'
});
var stroke = new ol.style.Stroke({
    color: 'rgba(0,0,0,4)'
});
var circle = new ol.style.Circle({
    radius: 6,
    fill: fill,
    stroke: stroke
});
var vectorStyle = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: circle
});
var vectorTileSource = new ol.source.VectorTile({
    format: new ol.format.TopoJSON({
        defaultProjection: 'EPSG:4326'
    }),
    projection: 'EPSG:3857',
    tileGrid: new ol.tilegrid.createXYZ({
        maxZoom: 19
    }),
    url: 'http://{a-c}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.topojson'
});
var vectorTileLayer = new ol.layer.Vector({
    source: vectorTileSource,
    style: vectorStyle
});

var lookAt = ol.proj.transform([51.34, 35.65], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
    center: lookAt,
    zoom: 12
});

var map = new ol.Map({
    target: 'map',
    layers: [baseLayer, vectorTileLayer],
    view: view
});

  • 1
    You need to change the library from ol.js to ol-debug.js to catch the error. – jgrocha Oct 15 '17 at 9:09
2

You need to change the vectorTileLayer layer to ol.layer.VectorTile. It would be:

        var vectorTileLayer = new ol.layer.VectorTile({
            source: vectorTileSource,
            style: vectorStyle
        });

Your fill property needs some transparency to see something. Try:

        var fill = new ol.style.Fill({
            color: '#666',
            opacity: 0.4
        });

The tile sources you are using are not working. You can try to use Mapzen to test your application. Request a key and change the source to:

url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
// url: 'http://{a-c}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.topojson'
  • Thanks, jgrocha. Both of your hints make my way clear. I wondered if the VectorTile is the subclass of Vector class, it would be possible to use that but I was wrong. Also, the OSM source isn't valid as you mentioned. – nasser tahani Oct 15 '17 at 13:46

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.