[GIS] Error in OpenLayers: c.de is not a function

openlayersvector-tiles

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
});

Best Answer

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'
Related Question