Skip to content

Instantly share code, notes, and snippets.

@feomike
Created May 31, 2018 18:25
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 feomike/a995f7db8c931ef9086d549210fc7c30 to your computer and use it in GitHub Desktop.
Save feomike/a995f7db8c931ef9086d549210fc7c30 to your computer and use it in GitHub Desktop.
oec_nob_f2_20180531a
<!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: 12,
center: [-97.35,35.12]
});
var cable_url = 'mapbox://feomike.9gtha189'
var cable_source_layer = 'mb_snob_f2_cable-d2cq5g'
var consumers_url = 'mapbox://feomike.dgs9bdp7'
var consumers_source_layer = 'mb_snob_f2_consumers-5t4spr'
var splice_can_url = 'mapbox://feomike.8guh4md5'
var splice_can_source_layer = 'mb_snob_f2_splice_can-2j4g4p'
var substat_url = 'mapbox://feomike.1kvj2ejd'
var substat_source_layer = 'mb_snob_f2_substations-ayjgxi'
var tap_url = 'mapbox://feomike.dvpikcfe'
var tap_source_layer = 'mb_snob_f2_tap_geo-3seyot'
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'
var spanAerial = '#551a8b' //purple
var spanUnder = '#FFA500'
var seqColor = '#A9A9A9' //'#FFA500'
var strandTextColor = '#545454' //'#FFA500'
var strandLineColor = '#dcdcdc' //'#FFA500'
//remember shapefile fields need to be upper case for mapbox to recognize them
//cable-96
map.on('load', function () {
map.addLayer({
//CABLE
'id': 'cable-96',
'type': 'line',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['==', 'CABLE', 96],
'layout':{'line-join':'round','line-cap':'round'},
'paint': {
'line-width': {
base: 1,
stops: [[10,1],[11,8],[12,9],[13,10],[14,11],[15,12],[16,13]]
},
'line-color': strandLineColor
}
});
});
//remember shapefile fields need to be upper case for mapbox to recognize them
//cable-48
map.on('load', function () {
map.addLayer({
//CABLE
'id': 'cable-48',
'type': 'line',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['==', 'CABLE', 48],
'paint': {
'line-width': {
base: 1,
stops: [[10,1],[11,5],[12,6],[13,7],[14,8],[15,9],[16,10]]
},
'line-color': strandLineColor
}
});
});
//remember shapefile fields need to be upper case for mapbox to recognize them
//cable-24
map.on('load', function () {
map.addLayer({
//CABLE
'id': 'cable-24',
'type': 'line',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['==', 'CABLE', 24],
'paint': {
'line-width': {
base: 1,
stops: [[10,1],[11,3],[12,4],[13,5],[14,6],[15,7],[16,8]]
},
'line-color': strandLineColor
}
});
});
//remember shapefile fields need to be upper case for mapbox to recognize them
//cable-12
map.on('load', function () {
map.addLayer({
//CABLE
'id': 'cable-12',
'type': 'line',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['==', 'CABLE', 12],
'paint': {
'line-width': {
base: 1,
stops: [[10,1],[11,2],[12,3],[13,4],[14,5],[15,6],[16,7]]
},
'line-color': strandLineColor
}
});
});
//remember shapefile fields need to be upper case for mapbox to recognize them
//cable-4
map.on('load', function () {
map.addLayer({
//CABLE
'id': 'cable-4',
'type': 'line',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['==', 'CABLE', 4],
'paint': {
'line-width': {
base: 1,
stops: [[10,1],[11,1],[12,2],[13,3],[14,4],[15,5],[16,6]]
},
'line-color': strandLineColor
}
});
});
//remember shapefile fields need to be upper case for mapbox to recognize them
//cable
map.on('load', function () {
map.addLayer({
//CABLE
'id': 'cable',
'type': 'line',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'paint': {
'line-width': 1,
'line-color':
{
property: 'STYPE',
type: 'categorical',
stops: [ ['1',spanAerial],
['2', spanAerial],
['3', spanUnder],
['4', spanUnder]
] } }
});
});
//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] ] }
}
}
);
});
//tube-2P - these are the outside circles
//TUBE IS THE OUTSIDE COLOR - look at issue #94
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.75,
'stops': [[12, 2], [13,6], [14,8], [15,10], [16,12]] }, //, [22, 180]] },
// color circles by tube, 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-2P - these are the inside circles
//STRAND IS THE INSIDE COLOR - look at issue #94
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': .9,
'stops': [[12, 1], [13,4], [14,6], [15,7], [16,10] ]}, //, [22, 60]] },
// 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-4 - these are the outside square
//TUBE IS THE OUTSIDE COLOR - look at issue #94
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}-square-15',
'icon-size':{
'base': .5,
'stops': [[12, .5], [13,1], [14,1.25], [15,1.5], [16,2] ]}
}
}
);
});
//STRAND-4 - these are circles
//STRANS IS THE INSIDE COLOR - look at issue #94
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}-circle-11',
'icon-size':{
'base': .5,
'stops': [[12, .5], [13,1], [14,1.25], [15,1.75], [16,2] ]}
}
}
);
});
//TUBE-8 - these are octagons
//TUBE IS THE OUTSIDE COLOR - look at issue #94
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}-octagon-15',
'icon-size':{
'base': .5,
'stops': [[12, .5], [13,1], [14,1.25], [15,1.5], [16,2] ]}
}
}
);
});
//STRAND-8 - these are octagons
//STRAND IS THE INSIDE COLOR - look at issue #94
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}-circle-11',
'icon-size':{
'base': .5,
'stops': [[12, .5], [13,1], [14,1.25], [15,1.75], [16,2] ]}
}
}
);
});
//tap-text - loss
map.on('load', function () {
map.addLayer({
//TAP
'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] ]}
}
});
});
// //tap-text - sequence
map.on('load', function () {
map.addLayer({
//TAP
'id': 'tap-Sequence-text',
'type': 'symbol',
'source': {
type: 'vector',
url: tap_url
},
'source-layer': tap_source_layer,
'paint': {
'text-color': seqColor
},
'layout': {
'text-field':'{SEQUENCE}',
'text-font': ["Open Sans Semibold", "Arial Unicode MS Bold"],
// 'symbol-placement': 'line',
'text-offset': [0, 1.5],
'text-size': {
'base': 1,
'stops': [[12, 7], [13,8], [14,9], [15,11], [16,12] ]}
}
});
});
//Cable-Aerial-text
map.on('load', function () {
map.addLayer({
//SPAN
'id': 'span-Aerial-text',
'type': 'symbol',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['in', 'STYPE', '1','2'],
'paint': {
'text-color': spanAerial
},
'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] ]}
}
});
});
//Cable-Underground-text
map.on('load', function () {
map.addLayer({
//SPAN
'id': 'span-Underground-text',
'type': 'symbol',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'filter': ['in', 'STYPE', '3','4'],
'paint': {
'text-color': spanUnder
},
'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] ]}
}
});
});
//Cable-Strand Count
map.on('load', function () {
map.addLayer({
//SPAN
'id': 'cable-strand-count-text',
'type': 'symbol',
'source': {
type: 'vector',
url: cable_url
},
'source-layer': cable_source_layer,
'paint': {
'text-color': strandTextColor
},
'layout': {
'text-field':'{CABLE}',
'text-font': ["Open Sans Semibold", "Arial Unicode MS Bold"],
'symbol-placement': 'line',
'text-offset': [0, -1],
'text-size': {
'base': 1,
'stops': [[12, 8], [13,9], [14,10], [15,12], [16,14] ]}
}
});
});
//Substation - these are squares
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