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.addControl(new L.Control.Layers({}, {'Track':track}));

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

      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. Sep 15, 2012 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... Sep 17, 2012 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! Sep 17, 2012 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. Sep 17, 2012 at 16:25

2 Answers 2


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 Sep 17, 2012 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, 2012 at 4:48

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


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 and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.