Skip to content

Instantly share code, notes, and snippets.

@feomike

feomike/index.html

Created April 13, 2018 01:01
Show Gist options
  • Save feomike/60939e5938a2cb8d74ef953587972587 to your computer and use it in GitHub Desktop.
Save feomike/60939e5938a2cb8d74ef953587972587 to your computer and use it in GitHub Desktop.
Download ZIP
cv_appomattox_201
Raw
index.html
<!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: 11,
center: [-78.8,37.4]
});
var cable_url = 'mapbox://feomike.allokvq7'
var cable_source_layer = 'mb_sappomattox_f201_cable-8cw43q'
var consumers_url = 'mapbox://feomike.8trxdooo'
var consumers_source_layer = 'mb_sappomattox_f201_consumers-5irn16'
var splice_can_url = 'mapbox://feomike.08u3i6p1'
var splice_can_source_layer = 'mb_sappomattox_f201_splice_ca-5auyog'
var substat_url = 'mapbox://feomike.9chb15zu'
var substat_source_layer = 'mb_sappomattox_f201_substatio-7p90ao'
var tap_url = 'mapbox://feomike.7829rquo'
var tap_source_layer = 'mb_sappomattox_f201_tap_geo-8gvw27'
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'
//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] ]}
}
});
});
//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