Skip to content

Instantly share code, notes, and snippets.

/index.html Secret

Created March 21, 2017 10:16
Show Gist options
  • Save anonymous/96f1cd4031539a67af29b1ee21dbb719 to your computer and use it in GitHub Desktop.
Save anonymous/96f1cd4031539a67af29b1ee21dbb719 to your computer and use it in GitHub Desktop.
Download ZIP
via:geojson.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker-properties {
border-collapse:collapse;
font-size:11px;
border:1px solid #eee;
margin:0;
}
.marker-properties th {
white-space:nowrap;
border:1px solid #eee;
padding:5px 10px;
}
.marker-properties td {
border:1px solid #eee;
padding:5px 10px;
}
.marker-properties tr:last-child td,
.marker-properties tr:last-child th {
border-bottom:none;
}
.marker-properties tr:nth-child(even) th,
.marker-properties tr:nth-child(even) td {
background-color:#f7f7f7;
}
</style>
<script src='//api.tiles.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' ></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<script type='text/javascript'>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXFhYTA2bTMyeW44ZG0ybXBkMHkifQ.gUGbDOPUN1v1fTs5SeOR4A';
var map = L.mapbox.map('map');
L.mapbox.tileLayer('mapbox.streets').addTo(map);
$.getJSON('map.geojson', function(geojson) {
var geojsonLayer = L.mapbox.featureLayer(geojson).addTo(map);
var bounds = geojsonLayer.getBounds();
if (bounds.isValid()) {
map.fitBounds(geojsonLayer.getBounds());
} else {
map.setView([0, 0], 2);
}
geojsonLayer.eachLayer(function(l) {
showProperties(l);
});
});
function showProperties(l) {
var properties = l.toGeoJSON().properties;
var table = document.createElement('table');
table.setAttribute('class', 'marker-properties display')
for (var key in properties) {
var tr = createTableRows(key, properties[key]);
table.appendChild(tr);
}
if (table) l.bindPopup(table);
}
function createTableRows(key, value) {
var tr = document.createElement('tr');
var th = document.createElement('th');
var td = document.createElement('td');
key = document.createTextNode(key);
value = document.createTextNode(value);
th.appendChild(key);
td.appendChild(value);
tr.appendChild(th);
tr.appendChild(td);
return tr
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
map.geojson
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"stroke":"#008000","stroke-width":2,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[4.853382110595703,52.360650079131766],[4.853403568267822,52.36008660493161],[4.852008819580077,52.36007350079496],[4.852030277252197,52.35881548558144],[4.8494768142700195,52.35878272429013],[4.8494768142700195,52.35970658339063],[4.848521947860718,52.35970658339063],[4.848157167434692,52.360414207085164],[4.848328828811645,52.3611218194477],[4.8480284214019775,52.361580451037504],[4.848103523254394,52.36198011182687],[4.8482537269592285,52.36259597547394],[4.848747253417969,52.362563216985464],[4.849036931991577,52.36309390150837],[4.848232269287109,52.36339527506629],[4.847567081451416,52.36344768764912],[4.847502708435059,52.3655244861997],[4.848307371139526,52.36631718166943],[4.848049879074097,52.366723350696425],[4.848124980926514,52.36699194429201],[4.848328828811645,52.36700504637685],[4.848275184631348,52.36814491288292],[4.847609996795653,52.368072853227595],[4.846547842025757,52.36770600225075],[4.846537113189697,52.36745706592429],[4.846354722976685,52.36710331188931],[4.845861196517944,52.36686747429223],[4.845024347305298,52.366932984862146],[4.845035076141357,52.36600272566446],[4.84471321105957,52.36597652089635],[4.844841957092285,52.364803841611725],[4.844563007354736,52.36424042038246],[4.844520092010498,52.36381457398805],[4.844788312911987,52.36339527506629],[4.845035076141357,52.36290390407837],[4.844745397567749,52.36252390676724],[4.8448097705841064,52.36194080108986],[4.845142364501953,52.36184907590079],[4.8447346687316895,52.36145596579098],[4.8451852798461905,52.36044041515252],[4.845839738845825,52.36032247872699],[4.845592975616455,52.359759000349214],[4.845668077468872,52.35926758892156],[4.846075773239136,52.35921517138004],[4.846676588058472,52.35943139333799],[4.847073554992676,52.35942484117299],[4.847534894943237,52.35956898857855],[4.848425388336182,52.35967382275996],[4.848951101303101,52.35970003126646]]}},{"type":"Feature","properties":{"stroke":"#ff0000","stroke-width":2,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[4.853296279907227,52.36079422254044],[4.853124618530273,52.36427972907346],[4.827117919921874,52.3639652585661],[4.8239850997924805,52.3639652585661],[4.823083877563477,52.36333631083628],[4.822397232055664,52.36365078582034],[4.820809364318847,52.36362457965716],[4.817161560058594,52.36061076721143],[4.817848205566406,52.359405184672156],[4.816088676452637,52.35825198798652],[4.809908866882324,52.357282231116066],[4.807591438293457,52.360139021439394],[4.8069047927856445,52.36134458395732],[4.805788993835449,52.36346734235167],[4.809479713439941,52.36414869996741],[4.811410903930664,52.3639652585661],[4.8143720626831055,52.3648300470754],[4.814715385437012,52.36674300394172],[4.815917015075683,52.36883929990108],[4.819307327270508,52.37182634976541],[4.821581840515137,52.37232417177085],[4.824628829956055,52.37203595971475],[4.826345443725586,52.372638582778045],[4.8302507400512695,52.370332850083045],[4.825615882873535,52.366114095755535],[4.827075004577637,52.365694818657445],[4.827418327331543,52.36401767047276],[4.853382110595703,52.36430593484807],[4.853553771972656,52.36068939101714]]}},{"type":"Feature","properties":{"stroke":"#0080ff","stroke-width":2,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[4.853500127792358,52.360591111238165],[4.853543043136597,52.36006039665439],[4.854326248168945,52.36011281319329],[4.854412078857421,52.35924793235075],[4.855313301086426,52.35893342602915],[4.854540824890137,52.358016103138866],[4.855592250823975,52.357675378358195],[4.858832359313964,52.35854028997932],[4.859647750854492,52.357360860844295],[4.865366220474243,52.35879582880957],[4.8657310009002686,52.35876961976677],[4.8674046993255615,52.357989893633615],[4.867737293243408,52.35789816024284],[4.868638515472412,52.35818646454403],[4.868670701980591,52.35854028997932],[4.869110584259033,52.35886135134852],[4.87019419670105,52.359051366162085],[4.871546030044556,52.35968692701513],[4.872082471847534,52.35981796935329],[4.8726725578308105,52.36003418836164],[4.8728978633880615,52.36046662320433],[4.874002933502197,52.360761462716106],[4.874711036682129,52.36082043038239],[4.8757946491241455,52.36024385426843],[4.874829053878784,52.359542779994314],[4.874582290649414,52.358959634974774],[4.873884916305542,52.35842234848236],[4.87169623374939,52.35797023649448],[4.870634078979492,52.357531224775535],[4.870119094848633,52.35744604289199],[4.869282245635986,52.35741983304867],[4.86768364906311,52.35673181910107],[4.866020679473877,52.356312452964495],[4.864271879196167,52.356174847583816],[4.862533807754517,52.35603724177465],[4.861568212509155,52.35587342477653],[4.859486818313599,52.35524436186084],[4.85819935798645,52.355119858764],[4.857029914855957,52.355152622770866],[4.855667352676391,52.35492327421277],[4.854605197906494,52.354693924464456],[4.853167533874512,52.35480532306229],[4.851568937301636,52.35485119299155],[4.850281476974486,52.3548577458347],[4.847749471664429,52.35482498160924],[4.847770929336548,52.35573581802885],[4.8481786251068115,52.356201058165546],[4.84845757484436,52.35723636370998],[4.848639965057373,52.3577933218488],[4.848575592041015,52.35873685844142],[4.848060607910156,52.35960830142572],[4.848564863204956,52.35970658339063],[4.84946608543396,52.35971968763611],[4.849487543106079,52.35878272429013],[4.852051734924316,52.35883514234458],[4.851976633071899,52.36005384458269],[4.853403568267822,52.36007350079496],[4.853467941284179,52.36070249497115]]}},{"type":"Feature","properties":{"stroke":"#ff8000","stroke-width":2,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[4.853510856628418,52.36066318309746],[4.853478670120239,52.36008660493161],[4.8519980907440186,52.36008660493161],[4.8520731925964355,52.358822037836795],[4.84946608543396,52.35877617202892],[4.84946608543396,52.35973934399705],[4.848511219024658,52.35970658339063],[4.847996234893799,52.359798313027355],[4.847620725631714,52.3604928312406],[4.847803115844727,52.361993215398094],[4.847567081451416,52.36342803293784],[4.847491979598999,52.3655310374602],[4.8484790325164795,52.36658577773453],[4.848285913467407,52.368151463754835],[4.846537113189697,52.367732205992986],[4.846354722976685,52.367122964965574],[4.845904111862182,52.36685437216658],[4.845035076141357,52.36691988275594],[4.845002889633179,52.36600272566446],[4.84469175338745,52.36597652089635],[4.844820499420166,52.364810392979095],[4.844498634338379,52.363808022473],[4.845024347305298,52.362897352428284],[4.8447346687316895,52.3625370101772],[4.844788312911987,52.36197356003979],[4.845904111862182,52.36146251765479],[4.846376180648803,52.36136423959541],[4.84622597694397,52.36061076721143],[4.847545623779297,52.3604928312406],[4.848543405532837,52.35871064936366],[4.848639965057373,52.357780217032044],[4.848189353942871,52.35619450552155],[4.847738742828369,52.35572271260196],[4.847749471664429,52.35483153445628],[4.851686954498291,52.35484464014741],[4.854508638381958,52.35470047733094],[4.8570191860198975,52.355152622770866],[4.858177900314331,52.35510675315447],[4.859218597412109,52.35523125628823],[4.861578941345215,52.35588653015874],[4.862630367279053,52.35606345243801],[4.8659563064575195,52.356299347708614],[4.867908954620361,52.35683010746365],[4.8693037033081055,52.357439490432625],[4.870569705963135,52.35752467232876],[4.871653318405151,52.35795713173022],[4.873906373977661,52.35843545310866],[4.874593019485474,52.35894653050391],[4.8748719692230225,52.35956898857855],[4.875783920288086,52.36025040631199],[4.874732494354248,52.36081387842336],[4.8740458488464355,52.360754910748355],[4.872854948043823,52.36047972722442],[4.872651100158691,52.36002108420944],[4.872082471847534,52.359804865136965],[4.871610403060913,52.35968692701513],[4.8706769943237305,52.359175858183114],[4.8702263832092285,52.359057918382454],[4.86970067024231,52.35901205281941],[4.869142770767212,52.35884169459703],[4.8687028884887695,52.358566499158115],[4.868606328964233,52.35818646454403],[4.867726564407349,52.35791126502461],[4.867039918899536,52.35812749336273],[4.865913391113281,52.35874996297447],[4.865387678146361,52.35879582880957],[4.8624372482299805,52.35805541736757],[4.85870361328125,52.357105313716],[4.856332540512085,52.356528689125604],[4.855645895004272,52.35633211084103],[4.854723215103149,52.35645005791671],[4.85470175743103,52.35680389725501],[4.854884147644043,52.357098761206096],[4.855613708496094,52.35763606379136],[4.855238199234009,52.35783918867679],[4.854637384414673,52.35802265551274],[4.855366945266724,52.358939978267024],[4.85443353652954,52.359261036732256],[4.854379892349243,52.3600997090644],[4.853585958480835,52.3601062611293],[4.853553771972656,52.36066973507883]]}}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment