0

I've used OpenLayers 4 to create a simple web map to load a KML file. I made a style for the KML file and also change "extraceStyle" of the layer to false, but it doesn't use my custom style.

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

// time zones layer style
var tzStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#40c8c8',
        opacity: 0.5
    }),
    text: new ol.style.Text({
        font: '20px Verdana',
        text: 'TZ',
        fill: new ol.style.Fill({
            color: '#404040',
            opacity: 0.75
        })
    })
});

// KML of time zones
var tzSource = new ol.source.Vector({
    extractStyles: false,
    format: new ol.format.KML(),
    url: 'http://localhost:8080/OpenLayersAssets/timezones.kml',
    projection: 'EPSG:3857'
});
var timezones = new ol.layer.Vector({
    source: tzSource,
    style: tzStyle
});

var map = new ol.Map({
    target: 'map',
    layers: [timezones],
    view: view
});
  • Did you try styling in kml file? – Ömür Bilgili Oct 17 '17 at 12:56
  • @ÖmürBilgili sorry! I didn't get what you said. – nasser tahani Oct 17 '17 at 13:26
  • OL's KML handling is not very perfect. – Chase Choi Oct 19 '17 at 3:01
1

You just need to change the position of the option extractStyles: false. It should be within the new ol.format.KML options instead of new ol.source.Vector options.

So the result would be

var tzSource = new ol.source.Vector({
    format: new ol.format.KML({
      extractStyles: false
    }),
    url: 'timezones.kml',
    projection: 'EPSG:3857'
});

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.