-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add worldviews example #7720
Add worldviews example #7720
Changes from 2 commits
807f042
8b3f985
704d53a
409562c
47e9e31
3b36c94
94e88e4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
<style> | ||
|
||
label { | ||
font-size: 20px; | ||
} | ||
.toggle-menu { | ||
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; | ||
position: absolute; | ||
width: 400px; | ||
top: 0; | ||
right: 0; | ||
padding: 10px; | ||
} | ||
|
||
.toggle-menu .toggle-menu-inner { | ||
text-align: center; | ||
background-color: #fff; | ||
border-radius: 5px; | ||
padding: 10px; | ||
margin-bottom: 10px; | ||
} | ||
|
||
.toggle-menu-inner button { | ||
color: #000; | ||
display: inline-block; | ||
width: 50px; | ||
height: 20px; | ||
border: none; | ||
cursor: pointer; | ||
} | ||
|
||
.toggle-menu-inner button:hover { | ||
box-shadow:inset 0 0 0 4px pink; | ||
} | ||
</style> | ||
|
||
<div id='map'></div> | ||
<div class='toggle-menu top'> | ||
<div class='toggle-menu-inner'> | ||
<label>Toggle worldview:</label> | ||
<div id='worldviews'></div> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
var map = new mapboxgl.Map({ | ||
container: 'map', | ||
style: 'mapbox://styles/mapbox/streets-v11', | ||
center: [95.690, 25.251], | ||
zoom: 3 | ||
}); | ||
|
||
var worldviewButtons = document.getElementById('worldviews'); | ||
|
||
var worldviews = [ | ||
//Boundaries for a mainland Chinese audience/worldview, but not officially approved for use in the PRC. | ||
'CN', | ||
//Boundaries conforming to cartographic requirements for use in India | ||
'IN', | ||
//Boundaries for an American audience, & which are generally appropriate outside of China & India. Lines do not necessarily reflect official US foreign policy. | ||
'US' | ||
]; | ||
|
||
map.on('load', function() { | ||
|
||
worldviews.forEach(function(worldview) { | ||
var worldviewButton = document.createElement('button'); | ||
worldviewButton.innerHTML = worldview.toString(); | ||
worldviewButton.addEventListener('click', function() { | ||
var adminLayers = ['admin-0-boundary', 'admin-1-boundary', 'admin-0-boundary-disputed', 'admin-1-boundary-bg', 'admin-0-boundary-bg']; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It might be nice to break some of these lines that go over the width limit for the page (like right after admin-0-boundary-disputed on this line). |
||
adminLayers.forEach(function(adminLayer) { | ||
map.setFilter(adminLayer, ["match", ["get", "worldview"], ["all", worldview], true, false]); | ||
}); | ||
}); | ||
worldviewButtons.appendChild(worldviewButton); | ||
}); | ||
|
||
}); | ||
</script> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/*--- | ||
title: Change worldview of administrative boundaries | ||
description: Uses the worldview value to adjust administrative boundaries based on the map's audience. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. would like to link to the vector tile spec here if possible @colleenmcginnis There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like you can just use a link directly with Markdown syntax.
works for me! |
||
tags: | ||
- layers | ||
- user interaction | ||
pathname: /mapbox-gl-js/example/toggle-worldviews/ | ||
---*/ | ||
import Example from '../../components/example'; | ||
import html from './toggle-worldviews.html'; | ||
export default Example(html); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about adding a little note like this above the line where the style URL is defined @malwoodsantoro?