Skip to content

Instantly share code, notes, and snippets.

@kingkool68

kingkool68/1st-map.html

Created September 19, 2019 02:06
Show Gist options
  • Save kingkool68/84821384b785ebd2e934203fa4365414 to your computer and use it in GitHub Desktop.
Save kingkool68/84821384b785ebd2e934203fa4365414 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1st-map.html
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script> <section class="inter-map"> <div class="inter-map__inner"> <style> <!-- @font-face {
font-family: DINRoundOT;
src: url('https://a.americares.org/mapbox/fonts/FontFont - DINRoundOT.otf');
}
@font-face {
font-family: BlockBQBol;
src: url('https://a.americares.org/mapbox/fonts/BlockBQBol.otf');
}
.inter-map__inner h1 {
margin: 10px;
font-size: 1.6em;
font-family: BlockBQBol;
color: #ffffff;
}
.inter-map__inner h2,
h3 {
margin: 10px;
font-size: 1.2em;
font-family: BlockBQBol;
color: #000000;
}
.inter-map__inner h4 {
margin: 10px;
font-size: 1.2em;
font-family: BlockBQBol;
color: #ffffff;
}
#pd {
margin: 14px;
font-size: 1em;
}
.inter-map__inner p {
font-size: 1em;
margin: 10px;
text-align: left;
font-family: DINRoundOT;
}
#pnm {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
/**
* Create a position for the map
* on the page */
#nepal-clinics {
position: absolute;
top: 0px;
bottom: 0;
width: 100%;
/* min-height: 750px;*/
}
/**
* Set rules for how the map overlays
* (info box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
left: 0;
background: #ef4123;
margin-right: 20px;
font-family: DINRoundOT;
overflow: auto;
border-radius: 3px;
font-size: 14px;
color: #ffffff;
}
#features {
top: 0;
height: 0px;
margin-top: 0px;
width: 100%;
color: #ffffff;
padding-left: 5%;
padding-right: 5%;
}
/**
* Pop up window */
.mapboxgl-popup {
max-width: 350px;
font: 12px/12px 'DINRoundOT';
Z-index: 11111;
background-color: #fff;
}
.mapboxgl-popup2 {
background: #ef4123 color: #000 Width: 350px;
font: 12px/12px 'DINRoundOT';
Z-index: 11111;
}
#npkeanu {
background: #fff;
position: absolute;
z-index: 1;
top: 0px;
right: 10px;
border-radius: 3px;
width: 150px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: DINRoundOT;
font-weight: bold;
}
#npkeanu a {
font-size: 9px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
#npkeanu a:last-child {
border: none;
}
#npkeanu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#npkeanu a.ProgramGray {
background-color: #aab2bc;
color: #ffffff;
}
#npkeanu a.blank {
color: #000000;
}
#npkeanu a.grayHospital {
color: #94979c;
background-image: url(https://a.americares.org/mapbox/Icons/circle-grey-stroked-15.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 3% 15%;
}
#npkeanu a.grayHospital: hover {
color: #94979c;
background-image: url(https://a.americares.org/mapbox/Icons/circle-grey-stroked-15.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 3% 15%;
}
#npkeanu a.blueHospitallarge {
color: #0562af;
background-image: url(https://a.americares.org/mapbox/Icons/circle-blue-15.svg);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0% 15%;
}
#npkeanu a.lblueHospital {
color: #7cb7d5;
background-image: url(https://a.americares.org/mapbox/Icons/circle-lblue-stroked-15.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 3% 15%;
}
#npkeanu a.DarkRedBox {
background-color: #960622;
color: #ffffff;
}
#npkeanu a.RedBox {
background-color: #ef4123;
color: #ffffff;
opacity: 1;
}
#npkeanu a.Red1Box {
background-color: #ef4123;
color: #ffffff;
opacity: .6;
}
#npkeanu a.Red2Box {
background-color: #ef4123;
color: #ffffff;
opacity: .4;
}
#npkeanu a.Red3Box {
background-color: #ef4123;
color: #ffffff;
opacity: .2;
}
#npkeanu a.RedBox:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .5;
}
#npkeanu a.Red1Box:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .3;
}
#npkeanu a.Red2Box:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .2;
}
#npkeanu a.Red3Box:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .1;
}
#npkeanu a.DarkRedBox:hover {
background-color: #960622;
color: #ffffff;
opacity: .6;
}
#npkeanu a.ProgramGray:hover {
background-color: #aab2bc;
color: #ffffff;
opacity: .8;
}
#fly3 {
position: absolute;
right: 7px;
bottom: 140px;
margin: 0px auto;
width: 80px;
height: 30px;
padding: 5px;
border: 2px solid #00000;
/* black */
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #00000;
font-weight: bold;
background: #fff;
}
--></style> <div id='nepal-clinics'></div> <br/> <button id='fly3'>Fly Home</button> <nav id="npkeanu"></nav> <script type="text/javascript"> // <![CDATA[
// define access token
mapboxgl.accessToken='pk.eyJ1IjoiYW1lcmljYXJlc3dlYnRlYW0iLCJhIjoiY2lvbGoydzdqMDFvOHZqbTF2cTloYjVsYSJ9.OMBDVMxT3XfwFokHXXX1Kg';
if (!mapboxgl.supported()) {
alert('We are sorry but your browser does not support Mapbox GL. Please try another browser, and be sure it is updated.');
}
else {
//create map
var map=new mapboxgl.Map( {
container: 'nepal-clinics', // container id
style: 'mapbox://styles/americareswebteam/ciw3zuw9b008a2kotri1ohn9q', //stylesheet location
minZoom: 1, maxZoom: 20, zoom: 8, center: [84.87898, 27.80572], // starting position
}
);
// wait for map to load before adjusting it
map.on('load',
function() {
// make a pointer cursor
map.getCanvas().style.cursor='default';
}
);
var toggleableLayerIds=['District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area',
'Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area',
'Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area'];
for (var i=0;
i < toggleableLayerIds.length;
i++) {
var id=toggleableLayerIds[i];
if (id==='District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area') {
var cssid='blueHospitallarge'
}
else if (id==='Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area') {
var cssid='lblueHospital'
}
else if (id==='Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area') {
var cssid='grayHospital'
}
else if (id==='Injured 2000+') {
var cssid='blank'
}
else if (id==='Injured 1000-2000') {
var cssid='blank'
}
else if (id==='Injured 100-1000') {
var cssid='blank'
}
else if (id==='Injured 10-100') {
var cssid='blank'
}
else if (id==='Injured <10') {
var cssid='blank'
}
else {
var cssid='ProgramGray'
}
var link=document.createElement('a');
link.href='#';
link.textContent=id;
link.className=cssid;
link.onclick=function (e) {
var clickedLayer=this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility=map.getLayoutProperty(clickedLayer,
'visibility');
if (visibility==='visible') {
map.setLayoutProperty(clickedLayer,
'visibility',
'none');
this.className='';
}
else {
map.setLayoutProperty(clickedLayer,
'visibility',
'visible');
if (this.textContent==='District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area') {
this.className='blueHospitallarge'
}
else if (this.textContent==='Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area') {
this.className='lblueHospital'
}
else if (this.textContent==='Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area') {
this.className='grayHospital'
}
else if (this.textContent==='Injured 2000+') {
this.className='DarkRedBox'
}
else if (this.textContent==='Injured 1000-2000') {
this.className='RedBox'
}
else if (this.textContent==='Injured 100-1000') {
this.className='Red1Box'
}
else if (this.textContent==='Injured 10-100') {
this.className='Red2Box'
}
else if (this.textContent==='Injured <10') {
this.className='Red3Box'
}
else {
this.className='ProgramGray'
}
}
}
;
var layers=document.getElementById('npkeanu');
layers.appendChild(link);
}
// Fly home
document.getElementById('fly3').addEventListener('click',
function () {
// Fly to a random location by offsetting the point -74.50, 40
// by up to 5 degrees.
map.flyTo( {
center: [84.87898, 27.80572], zoom: 8,
}
);
return;
}
);
// Add zoom and rotation controls to the map.
var nav=new mapboxgl.Navigation( {
position: 'bottom-right'
}
); // position is optional
map.addControl(nav);
var popupOffsets= {
'top': [0, 0], 'top-left': [0, 0], 'top-right': [0, 0], 'bottom': [0, 0], 'bottom-left': [0, 0], 'bottom-right': [0, 0], 'left': [0, 0], 'right': [0, 0]
}
;
// Create a popup2, but don't add it to the map yet.
var popup2=new mapboxgl.Popup( {
closeButton: false, closeOnClick: false, offset: popupOffsets
}
);
map.on('mousemove',
function(e) {
var features=map.queryRenderedFeatures(e.point,
{
layers: ['District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area', 'Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area', 'Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area']
}
);
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor=(features.length) ? 'pointer': '';
if (!features.length) {
popup2.remove();
return;
}
var feature=features[0];
// feature.properties.layers.symbol.opacity = .5;
// Populate the popup2 and set its coordinates
// based on the feature found.
popup2.setLngLat(feature.geometry.coordinates) .setHTML('\<img src=\"'+features[0].properties.Photo+'\" style=\"width: 200px\"\> <span class="inter-map__inner"><h3>'+features[0].properties.Category+'</h3></span><span class="inter-map__inner"><p><i>'+features[0].properties.VDC+'</i><br>'+features[0].properties.catch_total_c+' Individuals in Catchment Area<br><br>'+features[0].properties.Programming+'</p></span>') .addTo(map);
}
);
map.on("mousemove",
function(e) {
// var AidHover = map.queryRenderedFeatures(e.point, { layers: ['Health Facility Reconstruction','Health Facility Reconstruction and Ongoing Health Programs'] })
if (!AidHover.length) {
return;
}
if (AidHover.length) {
map.setFilter("Hover-Over-Program",
["==",
"id",
AidHover[0].properties.id]);
}
else {
map.setFilter("Hover-Over-Program",
["==",
"id",
""]);
}
}
);
// Reset the route-hover layer's filter when the mouse leaves the map
map.on("mouseout",
function() {
map.setFilter("Hover-Over-Program",
["==",
"id",
""]);
}
);
map.scrollZoom.disable();
}
// ]]></script>
</div> </section>
Raw
2nd-map.html
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script> <section class="inter-map"> <div class="inter-map__inner"> <style> <!-- @font-face {
font-family: DINRoundOT;
src: url('https://a.americares.org/mapbox/fonts/FontFont - DINRoundOT.otf');
}
@font-face {
font-family: BlockBQBol;
src: url('https://a.americares.org/mapbox/fonts/BlockBQBol.otf');
}
.inter-map__inner h1 {
margin: 10px;
font-size: 1.6em;
font-family: BlockBQBol;
color: #ffffff;
}
.inter-map__inner h2,
h3 {
margin: 10px;
font-size: 1.2em;
font-family: BlockBQBol;
color: #000000;
}
.inter-map__inner h4 {
margin: 10px;
font-size: 1.2em;
font-family: BlockBQBol;
color: #ffffff;
}
#pd {
margin: 14px;
font-size: 1em;
}
.inter-map__inner p {
font-size: 1em;
margin: 10px;
text-align: left;
font-family: DINRoundOT;
}
#pnm {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
/**
* Create a position for the map
* on the page */
#nepal-clinics {
position: absolute;
top: 0px;
bottom: 0;
width: 100%;
/* min-height: 750px;*/
}
/**
* Set rules for how the map overlays
* (info box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
left: 0;
background: #ef4123;
margin-right: 20px;
font-family: DINRoundOT;
overflow: auto;
border-radius: 3px;
font-size: 14px;
color: #ffffff;
}
#features {
top: 0;
height: 0px;
margin-top: 0px;
width: 100%;
color: #ffffff;
padding-left: 5%;
padding-right: 5%;
}
/**
* Pop up window */
.mapboxgl-popup {
max-width: 350px;
font: 12px/12px 'DINRoundOT';
Z-index: 11111;
background-color: #fff;
}
.mapboxgl-popup2 {
background: #ef4123 color: #000 Width: 350px;
font: 12px/12px 'DINRoundOT';
Z-index: 11111;
}
#npkeanu {
background: #fff;
position: absolute;
z-index: 1;
top: 0px;
right: 10px;
border-radius: 3px;
width: 150px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: DINRoundOT;
font-weight: bold;
}
#npkeanu a {
font-size: 9px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
#npkeanu a:last-child {
border: none;
}
#npkeanu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#npkeanu a.ProgramGray {
background-color: #aab2bc;
color: #ffffff;
}
#npkeanu a.blank {
color: #000000;
}
#npkeanu a.grayHospital {
color: #94979c;
background-image: url(https://a.americares.org/mapbox/Icons/circle-grey-stroked-15.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 3% 15%;
}
#npkeanu a.grayHospital: hover {
color: #94979c;
background-image: url(https://a.americares.org/mapbox/Icons/circle-grey-stroked-15.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 3% 15%;
}
#npkeanu a.blueHospitallarge {
color: #0562af;
background-image: url(https://a.americares.org/mapbox/Icons/circle-blue-15.svg);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0% 15%;
}
#npkeanu a.lblueHospital {
color: #7cb7d5;
background-image: url(https://a.americares.org/mapbox/Icons/circle-lblue-stroked-15.svg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 3% 15%;
}
#npkeanu a.DarkRedBox {
background-color: #960622;
color: #ffffff;
}
#npkeanu a.RedBox {
background-color: #ef4123;
color: #ffffff;
opacity: 1;
}
#npkeanu a.Red1Box {
background-color: #ef4123;
color: #ffffff;
opacity: .6;
}
#npkeanu a.Red2Box {
background-color: #ef4123;
color: #ffffff;
opacity: .4;
}
#npkeanu a.Red3Box {
background-color: #ef4123;
color: #ffffff;
opacity: .2;
}
#npkeanu a.RedBox:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .5;
}
#npkeanu a.Red1Box:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .3;
}
#npkeanu a.Red2Box:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .2;
}
#npkeanu a.Red3Box:hover {
background-color: #ef4123;
color: #ffffff;
opacity: .1;
}
#npkeanu a.DarkRedBox:hover {
background-color: #960622;
color: #ffffff;
opacity: .6;
}
#npkeanu a.ProgramGray:hover {
background-color: #aab2bc;
color: #ffffff;
opacity: .8;
}
#fly3 {
position: absolute;
right: 7px;
bottom: 140px;
margin: 0px auto;
width: 80px;
height: 30px;
padding: 5px;
border: 2px solid #00000;
/* black */
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #00000;
font-weight: bold;
background: #fff;
}
--></style> <div id='nepal-clinics'></div> <br/> <button id='fly3'>Fly Home</button> <nav id="npkeanu"></nav> <script type="text/javascript"> // <![CDATA[
// define access token
mapboxgl.accessToken='pk.eyJ1IjoiYW1lcmljYXJlc3dlYnRlYW0iLCJhIjoiY2lvbGoydzdqMDFvOHZqbTF2cTloYjVsYSJ9.OMBDVMxT3XfwFokHXXX1Kg';
if (!mapboxgl.supported()) {
alert('We are sorry but your browser does not support Mapbox GL. Please try another browser, and be sure it is updated.');
}
else {
//create map
var map=new mapboxgl.Map( {
container: 'nepal-clinics', // container id
style: 'mapbox://styles/americareswebteam/ciw3zuw9b008a2kotri1ohn9q', //stylesheet location
minZoom: 1, maxZoom: 20, zoom: 8, center: [84.87898, 27.80572], // starting position
}
);
// wait for map to load before adjusting it
map.on('load',
function() {
// make a pointer cursor
map.getCanvas().style.cursor='default';
}
);
var toggleableLayerIds=['District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area',
'Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area',
'Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area'];
for (var i=0;
i < toggleableLayerIds.length;
i++) {
var id=toggleableLayerIds[i];
if (id==='District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area') {
var cssid='blueHospitallarge'
}
else if (id==='Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area') {
var cssid='lblueHospital'
}
else if (id==='Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area') {
var cssid='grayHospital'
}
else if (id==='Injured 2000+') {
var cssid='blank'
}
else if (id==='Injured 1000-2000') {
var cssid='blank'
}
else if (id==='Injured 100-1000') {
var cssid='blank'
}
else if (id==='Injured 10-100') {
var cssid='blank'
}
else if (id==='Injured <10') {
var cssid='blank'
}
else {
var cssid='ProgramGray'
}
var link=document.createElement('a');
link.href='#';
link.textContent=id;
link.className=cssid;
link.onclick=function (e) {
var clickedLayer=this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility=map.getLayoutProperty(clickedLayer,
'visibility');
if (visibility==='visible') {
map.setLayoutProperty(clickedLayer,
'visibility',
'none');
this.className='';
}
else {
map.setLayoutProperty(clickedLayer,
'visibility',
'visible');
if (this.textContent==='District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area') {
this.className='blueHospitallarge'
}
else if (this.textContent==='Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area') {
this.className='lblueHospital'
}
else if (this.textContent==='Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area') {
this.className='grayHospital'
}
else if (this.textContent==='Injured 2000+') {
this.className='DarkRedBox'
}
else if (this.textContent==='Injured 1000-2000') {
this.className='RedBox'
}
else if (this.textContent==='Injured 100-1000') {
this.className='Red1Box'
}
else if (this.textContent==='Injured 10-100') {
this.className='Red2Box'
}
else if (this.textContent==='Injured <10') {
this.className='Red3Box'
}
else {
this.className='ProgramGray'
}
}
}
;
var layers=document.getElementById('npkeanu');
layers.appendChild(link);
}
// Fly home
document.getElementById('fly3').addEventListener('click',
function () {
// Fly to a random location by offsetting the point -74.50, 40
// by up to 5 degrees.
map.flyTo( {
center: [84.87898, 27.80572], zoom: 8,
}
);
return;
}
);
// Add zoom and rotation controls to the map.
var nav=new mapboxgl.Navigation( {
position: 'bottom-right'
}
); // position is optional
map.addControl(nav);
var popupOffsets= {
'top': [0, 0], 'top-left': [0, 0], 'top-right': [0, 0], 'bottom': [0, 0], 'bottom-left': [0, 0], 'bottom-right': [0, 0], 'left': [0, 0], 'right': [0, 0]
}
;
// Create a popup2, but don't add it to the map yet.
var popup2=new mapboxgl.Popup( {
closeButton: false, closeOnClick: false, offset: popupOffsets
}
);
map.on('mousemove',
function(e) {
var features=map.queryRenderedFeatures(e.point,
{
layers: ['District Hospital Reconstruction and Ongoing Programming - Serving 48,468 Individuals in Catchment Area', 'Health Facility Reconstruction - Serving 55,000 Individuals in Catchment Area', 'Health Facility Reconstruction and Ongoing Programming - Serving 56,711 Individuals in Catchment Area']
}
);
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor=(features.length) ? 'pointer': '';
if (!features.length) {
popup2.remove();
return;
}
var feature=features[0];
// feature.properties.layers.symbol.opacity = .5;
// Populate the popup2 and set its coordinates
// based on the feature found.
popup2.setLngLat(feature.geometry.coordinates) .setHTML('\<img src=\"'+features[0].properties.Photo+'\" style=\"width: 200px\"\> <span class="inter-map__inner"><h3>'+features[0].properties.Category+'</h3></span><span class="inter-map__inner"><p><i>'+features[0].properties.VDC+'</i><br>'+features[0].properties.catch_total_c+' Individuals in Catchment Area<br><br>'+features[0].properties.Programming+'</p></span>') .addTo(map);
}
);
map.on("mousemove",
function(e) {
// var AidHover = map.queryRenderedFeatures(e.point, { layers: ['Health Facility Reconstruction','Health Facility Reconstruction and Ongoing Health Programs'] })
if (!AidHover.length) {
return;
}
if (AidHover.length) {
map.setFilter("Hover-Over-Program",
["==",
"id",
AidHover[0].properties.id]);
}
else {
map.setFilter("Hover-Over-Program",
["==",
"id",
""]);
}
}
);
// Reset the route-hover layer's filter when the mouse leaves the map
map.on("mouseout",
function() {
map.setFilter("Hover-Over-Program",
["==",
"id",
""]);
}
);
map.scrollZoom.disable();
}
// ]]></script>
</div> </section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment