maplibre/martin
1
1
Fork 0
mirror of https://github.com/maplibre/martin.git synced 2024-12-20 05:11:57 +03:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

adds search; adds resize; adds dynamic layer color; (#660)

Browse Source 
- [ ] show lines and polygons
- [ ] show all layers regardless of their name
- [x] different color for each layer
- [x] make left sidebar resizable
- [x] add search box

- closes #536
This commit is contained in:
Binabh 2023-05-18 09:00:29 +05:45 committed by GitHub
parent bb4370c5fe
commit fd88852492
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 83 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
tests/debug.html
View File

@ -34,6 +34,7 @@
width: 120px; width: 120px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
overflow: scroll; overflow: scroll;
resize: horizontal;
} }
#menu a { #menu a {
@ -68,14 +69,80 @@
#menu a.active:hover { #menu a.active:hover {
background: #3074a4; background: #3074a4;
} }
#menu-search {
padding: 2px;
width: 100%;
}
#menu a.active #colorbox {
display: block;
}
#menu a #colorbox {
display: none;
}
#colorbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 15px;
width: 15px;
border: 1px solid white;
outline: none;
float: right;
margin-left: 5px;
cursor: pointer;
}
#colorbox::-webkit-color-swatch {
border: none;
}
#colorbox::-moz-color-swatch {
border: none;
}
</style> </style>
</head> </head>
<body> <body>
<nav id="menu"></nav> <nav id="menu">
<input
oninput="handleSearch()"
id="menu-search"
type="search"
placeholder="Search..."
/>
</nav>
<div id="map"></div> <div id="map"></div>
<script> <script>
function handleSearch() {
const search = document.getElementById("menu-search").value;
const links = document.querySelectorAll("#menu a");
for (const link of links) {
if (link.textContent.toLowerCase().includes(search.toLowerCase())) {
link.style.display = "block";
} else {
link.style.display = "none";
}
}
}
// Reference from: https://stackoverflow.com/a/16348977/11522644
const stringToColour = function (str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = "#";
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff;
colour += ("00" + value.toString(16)).substr(-2);
}
return colour;
};
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: 'map', container: 'map',
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
@ -130,7 +197,7 @@
visibility: 'none' visibility: 'none'
}, },
paint: { paint: {
[`${layerType}-color`]: 'red' [`${layerType}-color`]: stringToColour(source.id)
} }
}); });
@ -138,12 +205,26 @@
console.log(e.features); console.log(e.features);
}); });
const colorbox = document.createElement("input");
colorbox.type = "color";
colorbox.id = "colorbox";
colorbox.value = stringToColour(source.id);
colorbox.style.backgroundColor = stringToColour(source.id);
colorbox.onclick = function(e){
e.stopPropagation();
}
colorbox.onchange = function(e){
map.setPaintProperty(source.id, `${layerType}-color`, e.target.value);
colorbox.style.backgroundColor = e.target.value;
}
// Create a link. // Create a link.
const link = document.createElement('a'); const link = document.createElement('a');
link.id = source.id; link.id = source.id;
link.href = '#'; link.href = '#';
link.textContent = source.id; link.textContent = source.id;
link.title = source.id; link.title = source.id;
link.appendChild(colorbox);
// Show or hide layer when the toggle is clicked. // Show or hide layer when the toggle is clicked.
link.onclick = function (e) { link.onclick = function (e) {