Skip to content

Instantly share code, notes, and snippets.

@samfader

samfader/index.html Secret

Last active November 13, 2018 19:26
Show Gist options
  • Save samfader/39bc8e61c4b63f7739e75277fc40c554 to your computer and use it in GitHub Desktop.
Save samfader/39bc8e61c4b63f7739e75277fc40c554 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add geojson directly to map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtZiIsImEiOiJjaWZ3bGhtdjgzMnN1dWdrcnEwZTVieG91In0.DkCY-91coDahKvpH7Z26dw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/samf/cjn4suelb0poe2so6l2ar84iw',
center: [-75.541,45.348],
zoom: 10,
minZoom: 9,
maxZoom: 18,
pitch: 0
});
var serviceTerritory = {
"type": "FeatureCollection",
"name": "Hydro Ottawa Service Territory",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Name": "Hydro Ottawa Service Territory1", "tessellate": -1, "extrude": 0, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -75.474950221735398, 45.402514372792197, 0.0 ], [ -75.488400574201606, 45.4268019072667, 0.0 ], [ -75.504474511840201, 45.455797877458899, 0.0 ], [ -75.510984329658399, 45.467465915128201, 0.0 ], [ -75.525560930409, 45.493574079613801, 0.0 ], [ -75.527487973109203, 45.496088321223702, 0.0 ], [ -75.535313336839295, 45.493213387065197, 0.0 ], [ -75.547172378151402, 45.486633028913602, 0.0 ], [ -75.550988389951598, 45.485495814852499, 0.0 ], [ -75.556177325430596, 45.484150587639498, 0.0 ], [ -75.557542542335398, 45.483796606418501, 0.0 ], [ -75.562449362463198, 45.481248523469603, 0.0 ], [ -75.569285294400501, 45.4767954870143, 0.0 ], [ -75.574538617088194, 45.474750698717699, 0.0 ], [ -75.578938179183695, 45.474118269211701, 0.0 ], [ -75.5879499933299, 45.4743575834609, 0.0 ], [ -75.599018234989202, 45.472107455702997, 0.0 ], [ -75.611371885622603, 45.471035248789903, 0.0 ], [ -75.615249635919596, 45.4710055416515, 0.0 ], [ -75.620777722422602, 45.470441579879299, 0.0 ], [ -75.625211049297903, 45.469520470003999, 0.0 ], [ -75.627927496351404, 45.468664029201101, 0.0 ], [ -75.628189780737301, 45.468592767421001, 0.0 ], [ -75.629934456534201, 45.468111338635701, 0.0 ], [ -75.631540937565305, 45.4676681352759, 0.0 ], [ -75.631552794163895, 45.4676648761574, 0.0 ], [ -75.632301638189205, 45.467462976524402, 0.0 ], [ -75.633054078321393, 45.467267810353697, 0.0 ], [ -75.634570268874796, 45.466897787246197, 0.0 ], [ -75.634587435808101, 45.466893779763403, 0.0 ], [ -75.634971266067595, 45.466808137426298, 0.0 ], [ -75.635358062454202, 45.466729383110597, 0.0 ], [ -75.635747575607596, 45.4666575671733, 0.0 ], [ -75.636139556855596, 45.466592734124902, 0.0 ], [ -75.638207999516098, 45.466330313570801, 0.0 ], [ -75.638539939678495, 45.466297962863699, 0.0 ], [ -75.639855909589201, 45.466174246392598, 0.0 ], [ -75.641777511879795, 45.466012589704597, 0.0 ], [ -75.644511253105804, 45.465809764774498, 0.0 ], [ -75.6452791875153, 45.465754197278002, 0.0 ], [ -75.646238588930103, 45.465687037744502, 0.0 ], [ -75.647123044887294, 45.465625048727901, 0.0 ], [ -75.6478646400207, 45.465571319844102, 0.0 ], [ -75.649271769326106, 45.4654638331467, 0.0 ], [ -75.650380813105699, 45.4653752453424, 0.0 ], [ -75.652485501267407, 45.465201567580699, 0.0 ], [ -75.654855189664801, 45.464996547155899, 0.0 ], [ -75.655046112539097, 45.464979429141302, 0.0 ], [ -75.655936441161899, 45.464895193620798, 0.0 ], [ -75.656556637205895, 45.464833357161702, 0.0 ], [ -75.659099797185704, 45.464576575160599, 0.0 ], [ -75.662918773006695, 45.464180757085202, 0.0 ], [ -75.6654670729869, 45.463826296526797, 0.0 ], [ -75.667401756001397, 45.463528334879399, 0.0 ], [ -75.668041989593803, 45.463411542657198, 0.0 ], [ -75.6689343725687, 45.463242368453699, 0.0 ], [ -75.669824035016703, 45.463066245854797, 0.0 ], [ -75.669999339152795, 45.463023366078097, 0.0 ], [ -75.670713042568394, 45.4628440456055, 0.0 ], [ -75.671423237216203, 45.462657957990402, 0.0 ], [ -75.672129792835193, 45.462465136644902, 0.0 ], [ -75.672832581213299, 45.462265617508102, 0.0 ], [ -75.673531473547499, 45.462059436726499, 0.0 ], [ -75.674226342502095, 45.461846632132897, 0.0 ], [ -75.674917059550296, 45.461627242181301, 0.0 ], [ -75.675603500889196, 45.461401307871498, 0.0 ], [ -75.676285540952094, 45.461168869357003, 0.0 ], [ -75.676963055628505, 45.460929969313, 0.0 ], [ -75.677635919010996, 45.460684651868199, 0.0 ], [ -75.678304011438698, 45.4604329611984, 0.0 ], [ -75.678306794043493, 45.460431894971599, 0.0 ], [ -75.678969970342706, 45.460173850800302, 0.0 ], [ -75.679628130963394, 45.4599095269513, 0.0 ], [ -75.680281155021305, 45.459638971570897, 0.0 ], [ -75.680928925184006, 45.459362234296798, 0.0 ], [ -75.681571321741103, 45.459079365378699, 0.0 ], [ -75.682208227049102, 45.458790416546798, 0.0 ], [ -75.682839525545802, 45.458495439966299, 0.0 ], [ -75.683465102526696, 45.458194490737299, 0.0 ], [ -75.684084844511005, 45.457887622088698, 0.0 ], [ -75.684698636771699, 45.457574891842199, 0.0 ], [ -75.685306369974001, 45.457256355349998, 0.0 ], [ -75.685907929972501, 45.456932072531899, 0.0 ], [ -75.686503209202002, 45.456602100846602, 0.0 ], [ -75.687092097675702, 45.456266501500401, 0.0 ], [ -75.687674489574505, 45.455925335730697, 0.0 ], [ -75.688250279067205, 45.455578666239397, 0.0 ], [ -75.688819359464603, 45.455226554050498, 0.0 ], [ -75.689381628452196, 45.454869066492897, 0.0 ], [ -75.689936981414306, 45.4545062662799, 0.0 ], [ -75.690371809681196, 45.454215230114599, 0.0 ], [ -75.691187899918305, 45.4536517554927, 0.0 ], [ -75.691719719059407, 45.453271898014798, 0.0 ], [ -75.692244199032501, 45.452887021603203, 0.0 ], [ -75.692761242624599, 45.452497194044803, 0.0 ], [ -75.693270755525006, 45.452102488583897, 0.0 ], [ -75.693772644658907, 45.451702975755403, 0.0 ], [ -75.694266820780399, 45.451298729048901, 0.0 ], [ -75.694753191085297, 45.450889822137597, 0.0 ], [ -75.6952316686925, 45.450476330618798, 0.0 ], [ -75.695702167053597, 45.4500583282096, 0.0 ], [ -75.696164598108098, 45.449635891125801, 0.0 ], [ -75.696618880292107, 45.449209098973803, 0.0 ], [ -75.697064929739099, 45.448778026743703, 0.0 ], [ -75.697502665790793, 45.448342754256601, 0.0 ], [ -75.697932006912097, 45.447903360908597, 0.0 ], [ -75.698352876611395, 45.447459927176403, 0.0 ], [ -75.698765198696705, 45.447012533955998, 0.0 ], [ -75.699168896699007, 45.446561261304403, 0.0 ], [ -75.699563899142106, 45.446106193912797, 0.0 ], [ -75.699950131935097, 45.445647412898403, 0.0 ], [ -75.700098009908501, 45.445466839747397, 0.0 ], [ -75.701016067735196, 45.442484616614998, 0.0 ], [ -75.701114440511702, 45.442103177059302, 0.0 ], [ -75.7013349179892, 45.4412079550752, 0.0 ], [ -75.701545306926505, 45.4403115308005, 0.0 ], [ -75.701745594524795, 45.439413960238198, 0.0 ], [ -75.701935767376298, 45.438515300639096, 0.0 ], [ -75.702115814160905, 45.437615608848198, 0.0 ], [ -75.702183197895295, 45.437264926712103, 0.0 ], [ -75.702360088778093, 45.4363025113609, 0.0 ], [ -75.702515208385506, 45.435400519902799, 0.0 ], [ -75.702660167243195, 45.4344976925033, 0.0 ], [ -75.702794957340899, 45.433594083718503, 0.0 ], [ -75.702919570923001, 45.432689751240403, 0.0 ], [ -75.703034001144005, 45.431784751509497, 0.0 ], [ -75.703138239949098, 45.430879142628598, 0.0 ], [ -75.703208224283799, 45.430214439418997, 0.0 ], [ -75.703235530621697, 45.429759258897803, 0.0 ], [ -75.703238579851501, 45.429358803771301, 0.0 ], [ -75.703239592210295, 45.429225921934801, 0.0 ], [ -75.703254177622895, 45.427310193368299, 0.0 ], [ -75.703279828484, 45.426555326259397, 0.0 ], [ -75.703302011554399, 45.426434544975102, 0.0 ], [ -75.703350694672807, 45.426212762193202, 0.0 ], [ -75.703409454314098, 45.425992193411901, 0.0 ], [ -75.703478227512406, 45.4257730637907, 0.0 ], [ -75.703556944144196, 45.425555600945899, 0.0 ], [ -75.703645524662704, 45.425340027198502, 0.0 ], [ -75.7037438776578, 45.425126564157097, 0.0 ], [ -75.704391029761297, 45.424423459004103, 0.0 ], [ -75.704547112966196, 45.424333168444299, 0.0 ], [ -75.704749077583799, 45.4242246942663, 0.0 ], [ -75.704957076996195, 45.4241220298467, 0.0 ], [ -75.705170771605395, 45.424025340066002, 0.0 ], [ -75.705389816862294, 45.423934783499099, 0.0 ], [ -75.705613859218602, 45.423850504650702, 0.0 ], [ -75.705842533933193, 45.423772642095102, 0.0 ], [ -75.706075471427795, 45.423701319947902, 0.0 ], [ -75.706312293913797, 45.423636655369499, 0.0 ], [ -75.706552619951907, 45.4235787510706, 0.0 ], [ -75.706796059294902, 45.423527703012098, 0.0 ], [ -75.707042216264995, 45.423483592483798, 0.0 ], [ -75.7072906950266, 45.423446491158899, 0.0 ], [ -75.707541092201197, 45.4234164583252, 0.0 ], [ -75.707793000973993, 45.4233935444678, 0.0 ], [ -75.708601660710499, 45.423345786304402, 0.0 ], [ -75.708662163509402, 45.423344307543502, 0.0 ], [ -75.708919231497106, 45.423333578536997, 0.0 ], [ -75.709175491872998, 45.423315673262898, 0.0 ], [ -75.709430539721396, 45.423290620497497, 0.0 ], [ -75.709683976808407, 45.423258459730597, 0.0 ], [ -75.709935399703696, 45.4232192412925, 0.0 ], [ -75.7101844152117, 45.423173027087898, 0.0 ], [ -75.710430629982994, 45.423119890315, 0.0 ], [ -75.7106736540904, 45.423059914653599, 0.0 ], [ -75.712301657516406, 45.422658680026998, 0.0 ], [ -75.713083239621696, 45.422466043296197, 0.0 ], [ -75.713258790847505, 45.422410327615097, 0.0 ], [ -75.713739369420594, 45.422263200724402, 0.0 ], [ -75.714223929412, 45.422122701184499, 0.0 ], [ -75.714712287011906, 45.4219888830917, 0.0 ], [ -75.715204255819899, 45.421861795090898, 0.0 ], [ -75.715699649124304, 45.4217414872912, 0.0 ], [ -75.716198278216396, 45.421628004354602, 0.0 ], [ -75.716699953801694, 45.4215213907327, 0.0 ], [ -75.7172044851675, 45.421421686479697, 0.0 ], [ -75.718412674857305, 45.4212831370562, 0.0 ], [ -75.719276951074207, 45.421184017576202, 0.0 ], [ -75.720595884345698, 45.421082193612698, 0.0 ], [ -75.721302869243203, 45.420763640543903, 0.0 ], [ -75.721348274507505, 45.420683980613099, 0.0 ], [ -75.721409690259307, 45.4205602487215, 0.0 ], [ -75.721461368517694, 45.420434329354499, 0.0 ], [ -75.721503154775107, 45.420306602235399, 0.0 ], [ -75.721534922969397, 45.42017745167, 0.0 ], [ -75.721556576347595, 45.420047268434203, 0.0 ], [ -75.721568050802304, 45.419916444569502, 0.0 ], [ -75.7215693115904, 45.419785374405798, 0.0 ], [ -75.721560354237496, 45.4196544535219, 0.0 ], [ -75.721541207248805, 45.419524075837003, 0.0 ], [ -75.721511927349098, 45.419394634205197, 0.0 ], [ -75.721383737970598, 45.418436656001802, 0.0 ], [ -75.721420223866204, 45.418088314261396, 0.0 ], [ -75.721526790682006, 45.417829575776999, 0.0 ], [ -75.721724008851098, 45.417536205546, 0.0 ], [ -75.721836760351493, 45.417414517451199, 0.0 ], [ -75.722141595439496, 45.4172156628563, 0.0 ], [ -75.722541624811498, 45.417078102438403, 0.0 ], [ -75.722993369328904, 45.416996049825002, 0.0 ], [ -75.723422631231301, 45.4169575147343, 0.0 ], [ -75.723835521064004, 45.416948932662102, 0.0 ], [ -75.725971064655496, 45.416962157667498, 0.0 ], [ -75.726774632907905, 45.416986483071, 0.0 ], [ -75.728183595085298, 45.417072849789797, 0.0 ], [ -75.730496316304496, 45.417061036735198, 0.0 ], [ -75.731697197291794, 45.416778757563598, 0.0 ], [ -75.731879980730795, 45.416323701377102, 0.0 ], [ -75.733356104388093, 45.416001774781002, 0.0 ], [ -75.735473282283607, 45.416037904499497, 0.0 ], [ -75.735730466965805, 45.416020595471501, 0.0 ], [ -75.736231595713605, 45.415981397014903, 0.0 ], [ -75.736731493551105, 45.415935051274197, 0.0 ], [ -75.737229953718497, 45.415881575703303, 0.0 ], [ -75.737726770566397, 45.415820993621701, 0.0 ], [ -75.738221742291003, 45.415753329632402, 0.0 ], [ -75.738589125378994, 45.415698339432403, 0.0 ], [ -75.739080387145606, 45.415618385607999, 0.0 ], [ -75.739569245221404, 45.415531433210298, 0.0 ], [ -75.740055497675399, 45.415437517309101, 0.0 ], [ -75.7402968114244, 45.415388918505798, 0.0 ], [ -75.741574079266499, 45.415127224767403, 0.0 ], [ -75.742848443175006, 45.414858611538499, 0.0 ], [ -75.742848445560995, 45.4148586107179, 0.0 ], [ -75.743318965197702, 45.414761832862098, 0.0 ], [ -75.744126160656094, 45.414589871405603, 0.0 ], [ -75.744930331911306, 45.414411026320103, 0.0 ], [ -75.745731360458507, 45.414225325950497, 0.0 ], [ -75.746244062072407, 45.414109018642002, 0.0 ], [ -75.747268344089207, 45.413870981459098, 0.0 ], [ -75.748289368568507, 45.4136261100791, 0.0 ], [ -75.749307042555401, 45.413374426978102, 0.0 ], [ -75.750321277273102, 45.413115953408202, 0.0 ], [ -75.751331979464496, 45.412850713104099, 0.0 ], [ -75.752339057054598, 45.412578730647397, 0.0 ], [ -75.7533424215423, 45.412300030227797, 0.0 ], [ -75.754341981747103, 45.412014637065901, 0.0 ], [ -75.755668467015099, 45.411556097882801, 0.0 ], [ -75.755750922834807, 45.411524751407001, 0.0 ], [ -75.756148975588701, 45.411368495270104, 0.0 ], [ -75.756541950102701, 45.4112059890994, 0.0 ], [ -75.756929649273005, 45.411037315720897, 0.0 ], [ -75.757311878655798, 45.410862559443899, 0.0 ], [ -75.757688445245293, 45.410681808770597, 0.0 ], [ -75.758059159883302, 45.410495153693503, 0.0 ], [ -75.758423836622597, 45.410302689036797, 0.0 ], [ -75.758782289494505, 45.4101045119261, 0.0 ], [ -75.759134342609698, 45.409900721226499, 0.0 ], [ -75.759479814403804, 45.409691419112796, 0.0 ], [ -75.762230442518302, 45.406403395916698, 0.0 ], [ -75.763233383339497, 45.405204395801398, 0.0 ], [ -75.767968063548594, 45.400410125547502, 0.0 ], [ -75.768594380554902, 45.3999323815599, 0.0 ], [ -75.778694457008299, 45.391817176047198, 0.0 ], [ -75.781499069865305, 45.389563156085899, 0.0 ], [ -75.7819551990397, 45.389196546775203, 0.0 ], [ -75.783536551528201, 45.387925500311901, 0.0 ], [ -75.789802720061601, 45.382888165636999, 0.0 ], [ -75.794399034426206, 45.379192425544403, 0.0 ], [ -75.7969056241229, 45.377919382992403, 0.0 ], [ -75.800060908636198, 45.3769002589816, 0.0 ], [ -75.803478099083094, 45.3760206662336, 0.0 ], [ -75.804032324283099, 45.375900816386299, 0.0 ], [ -75.804768321222994, 45.375695850853297, 0.0 ], [ -75.805577215159701, 45.375477985277399, 0.0 ], [ -75.806389692540193, 45.375266852349199, 0.0 ], [ -75.807205640803105, 45.375062482465502, 0.0 ], [ -75.809613911171297, 45.374528875906599, 0.0 ], [ -75.810022011524197, 45.374448476080197, 0.0 ], [ -75.811404390441396, 45.374180959927401, 0.0 ], [ -75.813217753860599, 45.373746627945899, 0.0 ], [ -75.813392973914006, 45.373708172890602, 0.0 ], [ -75.813935357144501, 45.373594124972698, 0.0 ], [ -75.816140612253406, 45.373219564410299, 0.0 ], [ -75.817037820384499, 45.373117342230799, 0.0 ], [ -75.8181210825515, 45.372989661856401, 0.0 ], [ -75.837807904571505, 45.374878749650001, 0.0 ], [ -75.845208371926603, 45.378160034828703, 0.0 ], [ -75.867991017303495, 45.384860859679897, 0.0 ], [ -75.8813671471856, 45.3943422327646, 0.0 ], [ -75.881367148658001, 45.394342233818101, 0.0 ], [ -75.897168046813704, 45.4036141001543, 0.0 ], [ -75.906639987785795, 45.409088043877397, 0.0 ], [ -75.913898363508906, 45.416099669829798, 0.0 ], [ -75.931340828080195, 45.4314276193412, 0.0 ], [ -75.9451047482398, 45.448801454631898, 0.0 ], [ -75.948368043640599, 45.452691763245497, 0.0 ], [ -75.957871517242793, 45.461760149437097, 0.0 ], [ -75.991350639338606, 45.439672053961701, 0.0 ], [ -76.038572367376801, 45.411047949175497, 0.0 ], [ -76.060277821908201, 45.396096926246599, 0.0 ], [ -75.993260495885394, 45.3470151264683, 0.0 ], [ -75.920428848233101, 45.288856449034199, 0.0 ], [ -75.997340005560204, 45.239328991792, 0.0 ], [ -76.0750341296187, 45.191385917530503, 0.0 ], [ -75.998164486399205, 45.128112137027202, 0.0 ], [ -75.941334775925299, 45.0799378267523, 0.0 ], [ -75.797849868501004, 45.170901431642001, 0.0 ], [ -75.809189901981, 45.1803819844015, 0.0 ], [ -75.688528445305195, 45.229073562961098, 0.0 ], [ -75.6883532247153, 45.229144117176702, 0.0 ], [ -75.678342748922603, 45.233315024626798, 0.0 ], [ -75.678342750094103, 45.233315025471597, 0.0 ], [ -75.678342747042294, 45.233315052423897, 0.0 ], [ -75.678342717955402, 45.233315037786497, 0.0 ], [ -75.648114320725398, 45.245760308503797, 0.0 ], [ -75.624587047429699, 45.256020430324298, 0.0 ], [ -75.610202991811505, 45.262465131364003, 0.0 ], [ -75.5938168207052, 45.269602500228402, 0.0 ], [ -75.569973289193499, 45.279669745772701, 0.0 ], [ -75.5696741094647, 45.279847696142198, 0.0 ], [ -75.540973679735103, 45.291884225110998, 0.0 ], [ -75.437313358570904, 45.334435140892097, 0.0 ], [ -75.474950221735398, 45.402514372792197, 0.0 ] ] ] } },
{ "type": "Feature", "properties": { "Name": "Hydro Ottawa Service Territory2", "tessellate": -1, "extrude": 0, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -75.120920919800497, 45.325709281496003, 0.0 ], [ -75.099164299264899, 45.287039400404097, 0.0 ], [ -75.055720984578102, 45.299229195990698, 0.0 ], [ -75.078389088619303, 45.3365394553771, 0.0 ], [ -75.120920919800497, 45.325709281496003, 0.0 ] ] ] } }
]
};
map.on('load', function() {
map.addSource('serv-boundary', {
type: 'geojson',
data: serviceTerritory,
buffer: 0,
maxzoom: 12
});
map.addLayer({
'id': 'Hydro Ottawa Service Territory',
'type': 'line',
'source': 'serv-boundary'
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment