2

I am using Leaflet 0.4.4,

I have a KML I would like to overlay on the map, how do I go about doing this?

Edit: I am already aware of https://github.com/CloudMade/Leaflet/issues/14, which directs you to download a plugin from http://psha.org.ru/b/leaflet-plugins.html.

I was hoping to have a demonstration of the implementation of how to add a KML overlay.

Edit [Solved]: I found the demo, here it is:

<script type='text/javascript'>
    var map = new L.Map('map', {center: new L.LatLng(58.4, 43.0), zoom: 11});
    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    var track = new L.KML("KML_Samples.kml", {async: true});

    track.on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });

    map.addLayer(track);
    map.addLayer(osm);

    map.addControl(new L.Control.Layers({}, {'Track':track}));
</script> 

You also need to make sure that you need to enable cross-origin resource sharing, I did this in PHP with:

  <?php
      header("Access-Control-Allow-Origin: *");
  ?>

The problem I was having was the Access-Control-Allow-Origin. Thanks all

  • -1 - You are asking for a "Demonstration of the implementation of how to add a KML overlay". You then link to a demo, and then you include javascript code showing how to add a kml layer to a web map. So how is what you are asking, different from what you are showing? The more detailed and clear your question is, the more likely you are to get a satisfactory answer. – Get Spatial Sep 15 '12 at 0:13
  • obviously I found my answer after I posted the question, and then updated the question with my solution I found. My problem was I did not add the "header("Access-Control-Allow-Origin: *");" which fixed it. I originally was interested if my implementation was wrong; but i was just trying to to make a call to a different domain without allowing it through accesscontrol. In the end all I got was down-votes tho... – Beau Bouchard Sep 17 '12 at 15:32
  • First of all, I'm really glad that you figured out the answer to your problem. If you had been more clear about that, as well as posting a more detailed question, you would likely have received less down votes. I think the best way to avoid the confusion may have been to post the solution to your problem, as an answer, as opposed to editing your question to include the solution. In fact, this is encouraged, as it helps other people searching for a solution to the same issue! – Get Spatial Sep 17 '12 at 16:14
  • Thanks for the advice, I will do that next time. I posted my question to regular stackexchange, so I spent more time responding to the answer there. – Beau Bouchard Sep 17 '12 at 16:25
3

Saw this on Uservoice:

KML support (as well as GPX) is implemented as a part of plugins by Pavel Shramov, see https://github.com/shramov/leaflet-plugins

  • Thanks for your answer, I found my solution shortly after my post, I did not include 'header("Access-Control-Allow-Origin: *");'. I will mark the question as answered anyways, and thanks for responding – Beau Bouchard Sep 17 '12 at 15:37
  • 1
    Please do post your own answer and accept it. That way others would learn from your problem, too. You're welcome. Just trying to help. – R.K. Sep 18 '12 at 4:48
2

psha.org seems cool, this one worked for me:

http://harrywood.co.uk/maps/examples/leaflet/kml.view.html

It gets the job done adding a KML layer to leatflet map.

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.