Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
    
-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

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer
    
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

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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