CODEWITHSUNDEEP
kmlopenlayers-3
Marcos Rodrigo Jung Alves
Marcos Rodrigo Jung Alves

Reputation: 47

Show a KML layer

I have the example to save the content of a div to a PNG file (got it from here: http://openlayers.org/en/master/examples/export-map.html)

Besides that, I also need to show several kml layers. I got one of the examples and I'm trying to merge them with my own script.

This is what I got by now:

<!DOCTYPE html>
<html>
<head>

    <title>Export map example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>

</head>
<body>
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
                <div id="no-download" class="alert alert-error" style="display: none">
                    This example requires a browser that supports the
                    <a href="http://caniuse.com/#feat=download">link download</a> attribute.
                </div>
                <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
            </div>
        </div>

    </div>
    <script>
        var projection = ol.proj.get('EPSG:3857');

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

        var map = new ol.Map({
            /**                layers: [
             new ol.layer.Tile({
             source: new ol.source.OSM()
             }),
             new ol.layer.Vector({
             source: new ol.source.Vector({
             projection: projection,
             url: 'http://www.jourdan.org.br/wp-content/uploads/2015/01/VILA-NOVA.kml',
             format: new ol.format.KML()
             })
             })
             ], */
            target: 'map',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [-5462834.47, -3058929.70],
                projection: projection,
                zoom: 10
            })
        });

        map.addLayer(mapafundo);


        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'http://www.jourdan.org.br/wp-content/uploads/2015/01/VILA-NOVA.kml',
                format: new ol.format.KML()
            }),
            visible: true
        });


        map.addLayer(vector);



        var exportPNGElement = document.getElementById('export-png');

        if ('download' in exportPNGElement) {
            exportPNGElement.addEventListener('click', function (e) {
                map.once('postcompose', function (event) {
                    var canvas = event.context.canvas;
                    exportPNGElement.href = canvas.toDataURL('image/png');
                });
                map.renderSync();
            }, false);
        } else {
            var info = document.getElementById('no-download');
            /**
             * display error message
             */
            info.style.display = '';
        }

    </script>
</body>
</html>

But the kml layer doesn't appear. here's the link to my website, where I want to show this map: http://www.jourdan.org.br/geojourdan-teste/

can anyone help me? thanks!

Upvotes: 0

Views: 2100

Answers (1)

oterral
oterral

Reputation: 471

You need to use the version 3.5.0 instead of 3.4.0 to have the new vector api see release notes

Upvotes: 1

Related Questions