Skip to content

Instantly share code, notes, and snippets.

@frodrigo

frodrigo/index.html

Last active May 12, 2020 09:09
Show Gist options
  • Save frodrigo/ee19c979b87e35e9c0373d88da86545d to your computer and use it in GitHub Desktop.
Save frodrigo/ee19c979b87e35e9c0373d88da86545d to your computer and use it in GitHub Desktop.
Download ZIP
Teritorio - Change icon style
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change a map's boundaries</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
#buttons {
width: 90%;
margin: 0 auto;
}
.button {
display: inline-block;
position: relative;
cursor: pointer;
width: 20%;
padding: 8px;
border-radius: 3px;
margin-top: 10px;
font-size: 12px;
text-align: center;
color: #fff;
background: #1c70b8;
font-family: sans-serif;
font-weight: bold;
}
#explain {
display: block;
position: relative;
width: 30%;
padding: 8px;
border-radius: 3px;
margin-top: 10px;
font-size: 12px;
background: rgba(230, 230, 230, .5);
font-family: sans-serif;
}
</style>
<div id='map'></div>
<ul id="buttons">
<li id='icon' class='button'>Icon</li>
<li id='picto' class='button'>Picto</li>
</ul>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'https://vecto.teritorio.xyz/styles/teritorio-tourism-0.9/style.json',
center: [-1.442833, 43.653279],
zoom: 15.32,
maxZoom: 20,
hash: true
});
map.on('load', function() {
const icon_image_layout = map.getLayoutProperty('poi-level-1', 'icon-image');
const picto_image_layout = [
"coalesce",
[
"image",
[
"concat",
[
"get",
"tourism_superclass"
],
"-",
[
"get",
"tourism_class"
],
"-",
[
"get",
"tourism_subclass"
],
"•"
]
],
[
"image",
[
"concat",
[
"get",
"tourism_superclass"
],
"-",
[
"get",
"tourism_class"
],
"•"
]
],
[
"image",
[
"concat",
[
"get",
"tourism_superclass"
],
"•"
]
]
];
var icon_text_color = map.getPaintProperty('poi-level-1', 'text-color');
const picto_text_color = "#333";
function set_icon_style(style) {
const image_layout = style == 'icon' ? icon_image_layout : picto_image_layout;
map.setLayoutProperty('poi-level-1', 'icon-image', image_layout);
map.setLayoutProperty('poi-level-1-icon', 'icon-image', image_layout);
map.setLayoutProperty('poi-level-2', 'icon-image', image_layout);
map.setLayoutProperty('poi-level-2-icon', 'icon-image', image_layout);
map.setLayoutProperty('poi-level-3', 'icon-image', image_layout);
map.setLayoutProperty('poi-level-3-icon', 'icon-image', image_layout);
const text_color = style == 'icon' ? icon_text_color : picto_text_color;
map.setPaintProperty('poi-level-1', 'text-color', text_color);
map.setPaintProperty('poi-level-1-icon', 'text-color', text_color);
map.setPaintProperty('poi-level-2', 'text-color', text_color);
map.setPaintProperty('poi-level-2-icon', 'text-color', text_color);
map.setPaintProperty('poi-level-3', 'text-color', text_color);
map.setPaintProperty('poi-level-3-icon', 'text-color', text_color);
const beforeLayer = style == 'icon' ? 'park-reserve-name-small': 'road_oneway';
map.moveLayer('poi-level-3-icon', beforeLayer);
map.moveLayer('poi-level-3', beforeLayer);
map.moveLayer('poi-level-2-icon', beforeLayer);
map.moveLayer('poi-level-2', beforeLayer);
map.moveLayer('poi-level-1-icon', beforeLayer);
map.moveLayer('poi-level-1', beforeLayer);
console.log(map.getStyle().layers);
}
document.getElementById('buttons').addEventListener('click', function(event) {
var style = event.target.id;
set_icon_style(style);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment