Skip to content

Instantly share code, notes, and snippets.

@jamierob

jamierob/bldgs.geojson

Created January 7, 2015 21:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamierob/a21843bf2b7f3eb54456 to your computer and use it in GitHub Desktop.
Save jamierob/a21843bf2b7f3eb54456 to your computer and use it in GitHub Desktop.
Download ZIP
D3 leaflet apply class value from geojson data
Display the source blob
Display the rendered blob
Raw
bldgs.geojson
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "pkuid": "1255", "id": null, "objectid": null, "handle": "bldg", "layer": null, "name": "Ecology Laboratory", "bldgcode": "", "namecode": "Ecology Laboratory ()", "extrude": "low", "wireless": null, "network": "", "x": -113.982870, "y": 46.857705 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -113.982990266455758, 46.857750857186886 ], [ -113.982750158853591, 46.857750697098169 ], [ -113.982750289581716, 46.857658274107003 ], [ -113.982990396695797, 46.857658433296784 ], [ -113.982990266455758, 46.857750857186886 ] ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "1261", "id": null, "objectid": null, "handle": "bldg", "layer": null, "name": "Interdisciplinary Science Building", "bldgcode": "ISB", "namecode": "Interdisciplinary Science Building (ISB)", "extrude": "medium", "wireless": "F", "network": "", "x": -113.986499, "y": 46.858048 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -113.986634123540568, 46.85826263853464 ], [ -113.986322102539319, 46.858262421258516 ], [ -113.986322557139658, 46.858031873168819 ], [ -113.98632268745402, 46.857965784575569 ], [ -113.986322928841361, 46.857843365246175 ], [ -113.986414979261497, 46.857843422660892 ], [ -113.986415022526046, 46.857821462035254 ], [ -113.986479316127742, 46.857821502093252 ], [ -113.986519103345842, 46.85782152686442 ], [ -113.986583114529409, 46.857821566688216 ], [ -113.986583071333897, 46.857843527313975 ], [ -113.986675121754601, 46.857843584519102 ], [ -113.986675031847625, 46.85788933291839 ], [ -113.986674869839675, 46.857971769128177 ], [ -113.986678875827025, 46.857971662060692 ], [ -113.986678767935331, 46.858026563623788 ], [ -113.986674761778815, 46.858026754683245 ], [ -113.986674298148714, 46.858262666448248 ], [ -113.986634123540568, 46.85826263853464 ] ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "1832", "id": null, "objectid": null, "handle": "bldg", "layer": null, "name": "International Residence", "bldgcode": "", "namecode": "International Residence ()", "extrude": null, "wireless": null, "network": "", "x": -113.988984, "y": 46.863329 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -113.988921703839893, 46.863463119002361 ], [ -113.988914093574522, 46.86346311436408 ], [ -113.988914182533705, 46.863394486681401 ], [ -113.988906177219661, 46.863394481653053 ], [ -113.988906409334305, 46.863216640618461 ], [ -113.988906442320072, 46.863191344362285 ], [ -113.988977600065908, 46.863191388057999 ], [ -113.988986486017154, 46.863191393644264 ], [ -113.988986475612265, 46.863199628920121 ], [ -113.989001602596673, 46.863199638010904 ], [ -113.989058515166363, 46.86319967261629 ], [ -113.989058326080865, 46.863345311107054 ], [ -113.989058260325251, 46.86339577777693 ], [ -113.989066265639494, 46.863395782794619 ], [ -113.989066190947995, 46.863452898023155 ], [ -113.989066177478932, 46.863463207770039 ], [ -113.988921703839893, 46.863463119002361 ] ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "1262", "id": null, "objectid": null, "handle": "bldg", "layer": "1", "name": "Chemistry Building", "bldgcode": "CHEM", "namecode": "Chemistry Building (CHEM)", "extrude": "low", "wireless": "F", "network": "1", "x": -113.985120, "y": 46.858383 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -113.985223120383253, 46.858497076074393 ], [ -113.985207148521582, 46.858497065890468 ], [ -113.98520715002185, 46.858496093048309 ], [ -113.985201398294606, 46.858496089326685 ], [ -113.98520140134363, 46.858493059063761 ], [ -113.985175723571302, 46.858493041915068 ], [ -113.985175719285863, 46.858496073128165 ], [ -113.985169966248634, 46.858496069456464 ], [ -113.985169964672608, 46.858497041400099 ], [ -113.985153094245163, 46.858497030667053 ], [ -113.985116774350772, 46.858497007105768 ], [ -113.985116776194801, 46.858495063270141 ], [ -113.985101186270427, 46.858495052423002 ], [ -113.98510118784769, 46.858494080479375 ], [ -113.985005142165576, 46.858494018331598 ], [ -113.985005141971641, 46.858494991122249 ], [ -113.984937276569511, 46.858494946873222 ], [ -113.984937330209021, 46.858455828789687 ], [ -113.984759580971215, 46.858455707302511 ], [ -113.984759602935313, 46.858439923234471 ], [ -113.984759791524368, 46.858303125493592 ], [ -113.984853026263053, 46.858303185837208 ], [ -113.984878444211347, 46.858303203842269 ], [ -113.984887850803602, 46.858303208241253 ], [ -113.984887797128096, 46.858342326325456 ], [ -113.984937486341607, 46.858342364956556 ], [ -113.984937539980919, 46.858303246872325 ], [ -113.984986896076364, 46.8583032787446 ], [ -113.984987031208192, 46.858204773510273 ], [ -113.984986030921235, 46.858204772272927 ], [ -113.984986044374679, 46.858195164756538 ], [ -113.984998113871086, 46.858195172566056 ], [ -113.985000051505764, 46.858195173808717 ], [ -113.985000049125787, 46.858196088985537 ], [ -113.985031956635126, 46.858196109792168 ], [ -113.985039900921024, 46.858196114998371 ], [ -113.985040233717413, 46.858197030518838 ], [ -113.985054907333449, 46.858197039536513 ], [ -113.985055242268103, 46.858196124806327 ], [ -113.98509442633231, 46.858196150009874 ], [ -113.985094427400696, 46.858195234884498 ], [ -113.985104331313821, 46.858195241333334 ], [ -113.985105120824173, 46.858195241802321 ], [ -113.985108433360168, 46.858195244004008 ], [ -113.985108421376992, 46.858204851497803 ], [ -113.985107753720797, 46.858204851606473 ], [ -113.985107658988397, 46.858273965716471 ], [ -113.985107618810304, 46.858303356840942 ], [ -113.985169314257362, 46.858303396573177 ], [ -113.985169312756426, 46.858304369415428 ], [ -113.985175981846524, 46.858304373126671 ], [ -113.985175978769774, 46.858306317912522 ], [ -113.985201657687838, 46.858306334110971 ], [ -113.98520166083874, 46.858304390223715 ], [ -113.985208329928838, 46.858304393933146 ], [ -113.985208331504182, 46.858303421989618 ], [ -113.985211332979645, 46.85830342398436 ], [ -113.985276196664714, 46.858303466077544 ], [ -113.98527619509062, 46.858304438021193 ], [ -113.985372239124175, 46.858304499992421 ], [ -113.985372240696435, 46.858303528048921 ], [ -113.985440104472175, 46.858303571192344 ], [ -113.985440051198751, 46.85834268927686 ], [ -113.985473733543529, 46.858342710748467 ], [ -113.985473578597194, 46.858456175243624 ], [ -113.985439896127488, 46.858456153110694 ], [ -113.985439842853779, 46.858495271194386 ], [ -113.985371978760924, 46.858495227152211 ], [ -113.985371979023313, 46.858494255260076 ], [ -113.985275934650559, 46.858494193288578 ], [ -113.985275933076437, 46.858495165232135 ], [ -113.985260343227196, 46.858495155305313 ], [ -113.985260340153516, 46.858497100091121 ], [ -113.985223120383253, 46.858497076074393 ] ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "1252", "id": null, "objectid": null, "handle": "bldg", "layer": null, "name": "Veterans Education and Transition Services", "bldgcode": "VET", "namecode": "Veterans Education and Transition Services (VET)", "extrude": "low", "wireless": null, "network": "", "x": -113.982621, "y": 46.857067 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -113.982692353006968, 46.857138993267036 ], [ -113.982549342902743, 46.857138897895169 ], [ -113.982549548060675, 46.856994724337582 ], [ -113.982692557781164, 46.856994819709058 ], [ -113.982692353006968, 46.857138993267036 ] ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "1253", "id": null, "objectid": null, "handle": "bldg", "layer": null, "name": "Leopold Institute", "bldgcode": "LEOI", "namecode": "Leopold Institute (LEOI)", "extrude": "low", "wireless": null, "network": "", "x": -113.985075, "y": 46.857427 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -113.985211075241722, 46.857423378927457 ], [ -113.985211031220999, 46.857455463924019 ], [ -113.985210979240378, 46.857493197663914 ], [ -113.984938859050686, 46.857493021766757 ], [ -113.984939039367646, 46.857361257105211 ], [ -113.985211160199952, 46.857361432950498 ], [ -113.985211075241722, 46.857423378927457 ] ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "9998", "id": "0", "objectid": "0", "handle": "bldg", "layer": "", "name": "Grizzly Pool", "bldgcode": "POOL", "namecode": "Grizzly Pool (POOL)", "extrude": "low", "wireless": " ", "network": "", "x": -113.982917, "y": 46.863146 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -113.982814323670965, 46.863338905270723 ], [ -113.982807813006971, 46.863338901212593 ], [ -113.982807816704494, 46.863336160331436 ], [ -113.982819845661155, 46.863336168140663 ], [ -113.982819874345992, 46.863315961299449 ], [ -113.982727775863978, 46.86331589646543 ], [ -113.982688050840338, 46.863315868500848 ], [ -113.982688218199911, 46.863198076109867 ], [ -113.982657012881944, 46.863197943592873 ], [ -113.982656191460677, 46.863197939969517 ], [ -113.982656195643344, 46.863194984498911 ], [ -113.982648187739343, 46.863194979134839 ], [ -113.982648288851351, 46.863123584411198 ], [ -113.982656296744395, 46.86312358977527 ], [ -113.982656356776175, 46.863080779537235 ], [ -113.982688384025025, 46.863080800369382 ], [ -113.982688429622428, 46.86304895501523 ], [ -113.982688446961461, 46.863036764025615 ], [ -113.982688526481994, 46.862980853574179 ], [ -113.982688553229735, 46.862962211826478 ], [ -113.982723652263914, 46.862962235488766 ], [ -113.982762733844027, 46.862962261892257 ], [ -113.982762733235091, 46.862963403288262 ], [ -113.982794810717081, 46.862963424704141 ], [ -113.982794812635319, 46.862962283256657 ], [ -113.983003490379687, 46.862962421708424 ], [ -113.983003507713875, 46.862949632426982 ], [ -113.983143851719888, 46.862949725334886 ], [ -113.983143844739715, 46.862953921460566 ], [ -113.983153330424301, 46.863339130364189 ], [ -113.982814323670965, 46.863338905270723 ] ] ] } },
{ "type": "Feature", "properties": { "pkuid": "9999", "id": "0", "objectid": "0", "handle": "bldg", "layer": "", "name": "McGill Hall", "bldgcode": "MCG", "namecode": "McGill Hall (MCG)", "extrude": "low", "wireless": "F", "network": "1", "x": -113.983629, "y": 46.862422 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -113.983769278821498, 46.862758370285682 ], [ -113.98376810935379, 46.862758369295065 ], [ -113.98376822867985, 46.862673271905422 ], [ -113.983749386918205, 46.862673259181015 ], [ -113.983736210475769, 46.862673250242821 ], [ -113.983736235942388, 46.862655407377382 ], [ -113.983736261284392, 46.862637564560011 ], [ -113.983320729305888, 46.862637290124482 ], [ -113.983318061196002, 46.862637288358549 ], [ -113.98327801340487, 46.862637261835125 ], [ -113.983278022862649, 46.862630420205711 ], [ -113.983278536475282, 46.862265404773787 ], [ -113.983273022895347, 46.862265267835269 ], [ -113.983272993195769, 46.862260828934843 ], [ -113.983272696108415, 46.862216426158639 ], [ -113.983539492117316, 46.862216525248819 ], [ -113.98353959085587, 46.86208267738202 ], [ -113.983740964275043, 46.862082769564296 ], [ -113.98374095637773, 46.862095539578732 ], [ -113.983740899870057, 46.862186913054963 ], [ -113.983842226053071, 46.862186979271314 ], [ -113.983916986859754, 46.862187028069648 ], [ -113.983916984682708, 46.862188858319286 ], [ -113.983908979548801, 46.862188852940641 ], [ -113.983908731621696, 46.862367284752061 ], [ -113.983952754726346, 46.862367314084381 ], [ -113.983952752475517, 46.862369143435458 ], [ -113.983944747389856, 46.862369138957973 ], [ -113.983944743387298, 46.862372025042198 ], [ -113.983944641832224, 46.862445265270544 ], [ -113.983944602724776, 46.86247345227806 ], [ -113.983952606590904, 46.862473457705718 ], [ -113.983952604415137, 46.862475287955213 ], [ -113.983944600548654, 46.862475282527704 ], [ -113.983944328924267, 46.862669726950116 ], [ -113.983952332819754, 46.862669732377775 ], [ -113.983952209433667, 46.862758490266749 ], [ -113.983769278821498, 46.862758370285682 ] ] ] } }
]
}
Raw
index.html
<!-- based off the code @ http://bost.ocks.org/mike/leaflet/ -->
<!DOCTYPE html>
<html class="">
<meta charset="utf-8">
<title>D3test</title>
<style>
@import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css);
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map{ height: 100% }
svg {
position: relative;
}
path {
fill: #000;
fill-opacity: .2;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: brown;
fill-opacity: .7;
}
</style>
<header></header>
<div id="map"></div>
<footer></footer>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
<script>
var map = new L.Map("map", {center: [46.861967, -113.982825], zoom: 17})
.addLayer(new L.TileLayer("http://tile1.map.umt.edu/tiles/tiles.py/composite/{z}/{x}/{y}.png"));
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("bldgs.geojson", function (collection) {
var transform = d3.geo.transform({point: projectPoint}),
path = d3.geo.path().projection(transform);
var feature = g.selectAll("path")
.data(collection.features)
.enter()
.append("path");
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
var bounds = path.bounds(collection),
topLeft = bounds[0],
bottomRight = bounds[1];
svg.attr("width", bottomRight[0] - topLeft[0])
.attr("height", bottomRight[1] - topLeft[1])
.style("left", topLeft[0] + "px")
.style("top", topLeft[1] + "px");
g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
//apply a class with the 'handle' value from the geojson file
feature.attr("class", function (d) {
return "code " + d.handle;
});
feature.attr("d", path);
}
// Use Leaflet to implement a D3 geometric transformation.
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
});
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment