Leaflet KML

Multiple Map Layers

by spydmobile

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.2/leaflet-omnivore.js"></script>
<div id="container"></div>

CSS

#container {
    height: 400px;
    width: 400px;
}

JavaScript

var mapCenter = [1.355, 103.840],
    mapCurZoom = 14,
    mapMinZoom = 12,
    mapMaxZoom = 16;

var oneMap = L.tileLayer('http://e1.onemap.sg/arcgis/rest/services/SM256WGS84/MapServer/tile/{z}/{y}/{x}', {minZoom:mapMinZoom, maxZoom:mapMaxZoom, attribution:'&copy; <a href="http://www.onemap.sg">OneMap</a>'});

var osMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom:mapMinZoom, maxZoom:mapMaxZoom, attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'});

var map = L.map('container', {
    center: mapCenter,
    zoom: mapCurZoom
});

var baseMaps = {

    "Open Street Map": osMap
};

L.control.layers(baseMaps).setPosition("topleft").addTo(map);
map.addLayer(oneMap);

var customLayer = L.geoJson(null, {
    style: function(feature) {
        return { color: '#f00' };
    }
});

var runLayer = omnivore.kml("https://share.garmin.com/Feed/Share/FrancoNogarin", null, customLayer).addTo(map);

runLayer.onEachFeature();