Leaflet load Layers dynamically from Google Docs config document
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://leafletjs.com/examples/sample-geojson.js"></script>
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<body onload="init()">Leaflet load Layers dynamically from Google Docs config document
<div id="ladedingens"></div>
<div id="map"></div>Content of Google Spreadsheet:
<br />
<iframe src="https://docs.google.com/spreadsheets/d/1HZUxlp3ZO-XL4vMvdlQDUoD2iRNR8otl9s0HrCRiBlM/pubhtml?gid=0&single=true&widget=true&headers=false"></iframe>
</body>
CSS
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#info {
margin:10px;
}
#map {
height: 85%;
margin-top:10px;
border: 1px solid grey;
}
#ladedingens {
width:10%;
margin:auto;
top:40%;
}
#layername {
color:orange;
font-weight:bold;
}
iframe {
width:100%;
overflow:auto;
}
JavaScript
var map, layerControl, all_layers = [],
spinner;
function init() {
loading_indicator();
map = L.map('map').setView([39.74739, -105], 11);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
attribution: osmAttrib
}).addTo(map);
map.on('overlayadd', function (eventLayer) {
map.fitBounds(eventLayer.layer);
});
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
});
}
}).addTo(map);
var baseLayers = {
"OpenStreetMap": osm
};
var overlays = {
};
layerControl = L.control.layers(baseLayers, overlays, {
collapsed: false
}).addTo(map);
var url = "https://spreadsheets.google.com/feeds/list/1HZUxlp3ZO-XL4vMvdlQDUoD2iRNR8otl9s0HrCRiBlM/od6/public/basic?alt=json";
$.ajax({
url: url,
dataType: "jsonp",
success: function (data) {
$.each(data.feed.entry, function (index, value) {
var myarray = value.content["$t"].split(',');
// console.log(myarray);
var layer_object = {};
$.each(myarray, function (index, value) {
//console.log( index + ": " + value.split(":"));
layer_object[value.substring(1, value.indexOf(':'))] = value.substring(value.indexOf(':') + 2, value.length);
});
all_layers.push(layer_object);
});
load_layer(all_layers);
}
});
} // end init
function clean_map() {
map.eachLayer(function (layer) {
if (layer instanceof L.GeoJSON)
{
layerControl.removeLayer(layer);
map.removeLayer(layer);
}
});
}
function load_layer(layer_array)...