Is it valid GeoJson
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
<div id="map" ></div>
<table id="properties"></table>
CSS
#map {
height: 400px;
}
JavaScript
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 18, attribution: osmAttrib});
map.addLayer(osm);
map.setView([50.7924094, -1.0934092], 15);
L.geoJson(getData(), {
onEachFeature: handleFeature
}
).addTo(map);
alert(getData())
;
function handleFeature(feature, layer) {
layer.on({
mouseover: mouseoverfunction,
mouseout: mouseoutfunction
});
}
function mouseoverfunction(e) {
var properties = e.target.feature.properties;
for (var prop in properties) {
if (properties.hasOwnProperty(prop)) {
// or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
console.log("prop: " + prop + " value: " + properties[prop]);
document.getElementById("properties").innerHTML = document.getElementById("properties").innerHTML + "<tr><td>" + prop + "</td><td>" + properties[prop] + "</td></tr>";
}
}
}
function mouseoutfunction(e) {
document.getElementById("properties").innerHTML = "";
}
function getData() {
return {
"type":"FeatureCollection",
"features":[
{
"properties":{
"gis_id":"4504127908821122_x3dBh3G6G7I2G1GJ794Hzx7dxqt547687I558A383uvwp53A6A558G75I4H0ocyuc43G4547044931243JJH0JIJGJc4"
},
"id":"0",
"type":"Feature",
"geometry":{
"coordinates":[
[
[
37.578665400000006,
55.68899679999999
],
[
37.5785092,
55.68905490000001
],
[
37.5792418,
55.689695799999996
],
[
37.5797358,
55.68953539999999
],
[
37.5802388,
55.6893011
],
[
37.5792995,
55.6890606
],
[
37.57888140000001,
55.6890005
],
[
37.578665400000006,
55.68899679999999
]
]
],
"type":"Polygon"
}
}
]
}
}