Created
November 4, 2017 17:02
-
-
Save feomike/08236884bbf93fa667c3bad876a7f617 to your computer and use it in GitHub Desktop.
oec_swn_f3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title></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.34.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.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.eyJ1IjoiZmVvbWlrZSIsImEiOiJNRjJrRmRnIn0.Sc8mxXKYTRfgegc_3vjZiw'; | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
style: 'mapbox://styles/feomike/cj0zcunxh000m2sqb2epkabb4', | |
zoom: 13, | |
center: [-97.5,35.22] //-97.5,35.2,-97.5,35.2 | |
}); | |
var span_url = 'mapbox://feomike.d9q24oyp' //'mapbox://feomike.dw5it584' | |
var span_source_layer = 'mb_swn_f3_cable-dwacb8' //'mb_sark_f3_span-acta66' | |
var tap_url = 'mapbox://feomike.34dz5lyl' //'mapbox://feomike.0j57iccy' | |
var tap_source_layer = 'mb_swn_f3_tap_geo-08w09t' //'mb_sark_f3_tap_geo-6jfq3p' | |
var substat_url = 'mapbox://feomike.dqoeq5dp' | |
var substat_source_layer = 'mb_swn_f3_substations-dllysk' | |
var consumers_url = 'mapbox://feomike.0lfprynb' | |
var consumers_source_layer = 'mb_swn_f3_consumers-cin15b' | |
var splice_can_url = 'mapbox://feomike.3c19m83x' | |
var splice_can_source_layer = 'mb_swn_f3_splice_can-3z5nsv' | |
var myBlue = '#0000FF' | |
var myOrange = '#FFA500' | |
var myGreen = '#008000' | |
var myBrown = '#894444' | |
var mySlate = '#808080' | |
var myWhite = '#FFFFFF' | |
var myRed = '#FF0000' | |
var myBlack = '#000000' | |
var myYellow = '#FFFF00' | |
var myViolet = '#EE82EE' | |
var myRose = '#FFC0CB' | |
var myAqua = '#00FFFF' | |
var spanColor = '#800080' | |
var tapColor = '#bababa'//'#c4c4c4' | |
//remember shapefile fields need to be upper case for mapbox to recognize them | |
//SPAN - these are lines | |
map.on('load', function () { | |
map.addLayer({ | |
//SPAN | |
'id': 'span', | |
'type': 'line', | |
'source': { | |
type: 'vector', | |
url: span_url | |
}, | |
'source-layer': span_source_layer, | |
'paint': { | |
'line-width': 1, | |
'line-color': spanColor} | |
}); | |
}); | |
//consumers - these are circles (ring) - this symbol is two circles on top of each other | |
//a base orange circle, with a ring orange cirle, so i am just drawing this twice | |
map.on('load', function () { | |
map.addLayer( | |
{//CONSUMERS | |
'id': 'consumers-ring', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: consumers_url | |
}, | |
'source-layer': consumers_source_layer, | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': 'orange-circle-11', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .25], [13,.5], [14,.7], [15,.8], [16,1.25] ] } | |
} | |
} | |
); | |
}); | |
//consumers - these are circles (inside) | |
map.on('load', function () { | |
map.addLayer( | |
{//CONSUMERS | |
'id': 'consumers-inside', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: consumers_url | |
}, | |
'source-layer': consumers_source_layer, | |
'paint': {'text-color': myOrange | |
}, | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': 'white-circle-11', | |
'icon-size':{ | |
'base': .15, | |
'stops': [[12, .15], [13,.4], [14,.6], [15,.7], [16,1.15] ]}, | |
'text-field':'M', | |
'text-font': ["Open Sans Semibold", "Arial Unicode MS Bold"], | |
'text-size': { | |
'base': 1, | |
'stops': [[12, 2], [13,3], [14,4], [15,5], [16,7] ]} | |
} | |
} | |
); | |
}); | |
//splice-cans - these are bow-ties | |
map.on('load', function () { | |
map.addLayer( | |
{//SPLICE-CAN | |
'id': 'splice-can', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: splice_can_url | |
}, | |
'source-layer': splice_can_source_layer , | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': 'blue-bowtie-15', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .25], [13,.45], [14,.55], [15,.65], [16,.75] ] } | |
} | |
} | |
); | |
}); | |
//STRAND-2 - these are circles | |
map.on('load', function () { | |
map.addLayer( | |
{ | |
//TAP | |
'id': 'strand-2', | |
'type': 'circle', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'filter': ['==', 'PORT', 2], | |
'layout': {'visibility': 'visible'}, | |
'paint': { | |
'circle-radius': { | |
'base': 1.75, | |
'stops': [[12, 2], [13,6], [14,8], [15,10], [16,12]] }, //, [22, 180]] }, | |
// color circles by strand, using data-driven styles | |
'circle-color': | |
{ | |
property: 'STRAND', | |
type: 'categorical', | |
stops: [ ['blue',myBlue], | |
['orange', myOrange], | |
['green', myGreen], | |
['brown', myBrown], | |
['slate', mySlate], | |
['white', myWhite], | |
['red', myRed], | |
['black', myBlack], | |
['yellow', myYellow], | |
['violet', myViolet], | |
['rose', myRose], | |
['aqua', myAqua]] } | |
} | |
} | |
); | |
}); | |
//TUBE-2 - these are circles | |
map.on('load', function () { | |
map.addLayer( | |
{ | |
//TAP | |
'id': 'tube-2', | |
'type': 'circle', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'filter': ['==', 'PORT', 2], | |
'layout': {'visibility': 'visible'}, | |
'paint': { | |
'circle-radius': { | |
'base': 1, | |
'stops': [[12, 1], [13,4], [14,6], [15,8], [16,10] ]}, //, [22, 60]] }, | |
// color circles by strand, using data-driven styles | |
'circle-color': | |
{ | |
property: 'TUBE', | |
type: 'categorical', | |
stops: [ ['blue',myBlue], | |
['orange', myOrange], | |
['green', myGreen], | |
['brown', myBrown], | |
['slate', mySlate], | |
['white', myWhite], | |
['red', myRed], | |
['black', myBlack], | |
['yellow', myYellow], | |
['violet', myViolet], | |
['rose', myRose], | |
['aqua', myAqua]] } | |
} | |
} | |
); | |
}); | |
//STRAND-4 - these are square | |
map.on('load', function () { | |
map.addLayer( | |
{ | |
//TAP | |
'id': 'strand-4', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'filter': ['==', 'PORT', 4], | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': '{STRAND}-square-15', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .5], [13,1], [14,1.25], [15,1.75], [16,2] ]} | |
} | |
} | |
); | |
}); | |
//TUBE-4 - these are circles | |
map.on('load', function () { | |
map.addLayer( | |
{//TAP | |
'id': 'tube-4', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'filter': ['==', 'PORT', 4], | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': '{TUBE}-circle-11', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .5], [13,1], [14,1.25], [15,1.75], [16,2] ]} | |
} | |
} | |
); | |
}); | |
//STRAND-8 - these are octagons | |
map.on('load', function () { | |
map.addLayer( | |
{ | |
//TAP | |
'id': 'strand-8', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'filter': ['==', 'PORT', 8], | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': '{STRAND}-octagon-15', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .5], [13,1], [14,1.25], [15,1.75], [16,2] ]} | |
} | |
} | |
); | |
}); | |
//TUBE-8 - these are circles | |
map.on('load', function () { | |
map.addLayer( | |
{//TAP | |
'id': 'tube-8', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'filter': ['==', 'PORT', 8], | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': '{TUBE}-circle-11', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .5], [13,1], [14,1.25], [15,1.75], [16,2] ]} | |
} | |
} | |
); | |
}); | |
//SPAN-text | |
map.on('load', function () { | |
map.addLayer({ | |
//SPAN | |
'id': 'span-text', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: span_url | |
}, | |
'source-layer': span_source_layer, | |
'paint': { | |
'text-color': spanColor | |
}, | |
'layout': { | |
'text-field':'{LEN_COST}', | |
'text-font': ["Open Sans Semibold", "Arial Unicode MS Bold"], | |
'symbol-placement': 'line', | |
'text-offset': [0, 0.6], | |
'text-size': { | |
'base': 1, | |
'stops': [[12, 5], [13,6], [14,7], [15,9], [16,10] ]} | |
} | |
}); | |
}); | |
//tap-text | |
map.on('load', function () { | |
map.addLayer({ | |
//SPAN | |
'id': 'tap-text', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: tap_url | |
}, | |
'source-layer': tap_source_layer, | |
'paint': { | |
'text-color': tapColor | |
}, | |
'layout': { | |
'text-field':'{LOSS}', | |
'text-font': ["Open Sans Semibold", "Arial Unicode MS Bold"], | |
// 'symbol-placement': 'line', | |
//'text-offset': [0, 0.6], | |
'text-size': { | |
'base': 1, | |
'stops': [[12, 6], [13,7], [14,8], [15,10], [16,12] ]} | |
} | |
}); | |
}); | |
//Substation - these are circles | |
map.on('load', function () { | |
map.addLayer( | |
{//SUBSTATION | |
'id': 'substation', | |
'type': 'symbol', | |
'source': { | |
type: 'vector', | |
url: substat_url | |
}, | |
'source-layer': substat_source_layer, | |
'layout': { | |
'visibility': 'visible', | |
'icon-image': 'black-square-15', | |
'icon-size':{ | |
'base': .5, | |
'stops': [[12, .75], [13,1.25], [14,1.75], [15,2.25], [16,3.75] ]} | |
} | |
} | |
); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment