Skip to content

Commit

Permalink
add Legends.js
Browse files Browse the repository at this point in the history
  • Loading branch information
sfggeogis committed May 2, 2024
1 parent 50d910f commit c07a57b
Show file tree
Hide file tree
Showing 11 changed files with 754 additions and 789 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
# MapICGC GL JS


> 🌠 __MAPLIBRE GL JS version:__ 4.1.2
> 🌠 __Based on MapLibre GL JS version:__ 4.1.3
The MapICGC GL JS library builds upon the open-source library [**MapLibre GL JS**](https://github.com/maplibre/maplibre-gl-js), exposing its existing capabilities while introducing new features specific to the MapICGC ecosystem. This library is tailored to seamlessly integrate with the MapICGC Cloud service, offering a comprehensive set of data to enhance web mapping experiences, including vector tiles, satellite raster tiles, DEM with Terrain RGB, and customizable styles with an editor.

Expand Down
90 changes: 90 additions & 0 deletions dist/mapicgc-gl.css
Original file line number Diff line number Diff line change
Expand Up @@ -1569,6 +1569,9 @@ h4::selection {
}
}




/* Media queries*/
@media screen and (min-width: 640px) {
.maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed {
Expand Down Expand Up @@ -1723,3 +1726,90 @@ h4::selection {


}

.maplibregl-legend-list {
display: none
}

.maplibregl-legend-list {
overflow-y: scroll;
max-height: 70vh;
margin: .3em
}

.maplibregl-ctrl-group .maplibregl-legend-list button {
background: none;
border: none;
cursor: pointer;
display: block;
height: auto
}

.maplibregl-legend-list button.active {
font-weight: 700
}

.maplibregl-legend-list button:hover {
background-color: #0000000d
}

.maplibregl-legend-list button+button {
border-top: 1px solid #ddd
}

.maplibregl-legend-switcher {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEXklEQVR4nO1bW28bRRReiSDKG6V/gV4kHnkCiqACnmkp8EThgZv6I9BGFTxWKNg+35md2VhBDWnclgZKIVJQq0ioQKHgRoISAW1p6WtbUCQaOc6iY2zXjt1kfNmLvfmkI1manfX5vrmdmTnrOJsIFxOZzDYf2KeBUQ2e0oQLGnzNgG9qwqpY5Tf4WrVsSp6VOlLXGUQopXZp4H0D/GTAZQMOurSyBv9oiN8zRDudJEMpdb8m9boh/q4HwuuaJnzrA6+5rjviJIz4QU18JSziLUa4rIF3YhfCI3pKExYiI95qF32ldkdOvHD48IOGmKsTWFzka8Ni1QCUz+e3RELeEO3UxMW4ibcKwT97We/RcMkzP6sJ/8RN9p4igP82ObUnHPI5tVcT/o2bpMWQWPaBV/pLntTLmrASN7kORFgxRPv7Qz6n9hjwnbhJddMTNPB87xEdJXfMb2iE2+PA9q7I5/P5LdVQNn4ivfWEBVm2OxbAEHPczvfPkO2IvK/U7iQEOX3sBasqp56wIu+67kgSA50+iLAg+5YNBdCkDsbtbHgi8NsWOzu+MrQCgP9YdwepZT+fAEdDNaID9xTAAOdtXvL5zKfB1/PzdTt57FhT+RefnWoqj8LEJ6teQDjXlryX8XbYvGDm+IlgLcrlcjA58VGdfFwQ3yx7Qevxmq6c4W1ceW52tu2f13rB/JmzQVwQ3+yGAg61Gf9cTIsAmvB9E/mJTGab7ent3JftBfikUBPgTBAXxDdLAVaIaOvd1md+0XYWPXpkMlheXm7646WlpWDC+JXyE9PTQalUipy8+CS+Wa8GObW3cfyPWlcEV8hOT35ct7ynm8v98abyKKzWALamSb3bIABPdVJ5GEwTH2mYAHEhfQI0TISGcN22onT3xUuXghvX/6rbQrFYL5eu+NviYlN5FCY+rR2K6xrhz0YBbttWnD19uu0kdPzodKX87NxXQVwQ3zroBTcbQmAu2VYchjigaqVNAWrYHAI0+JPgr7/0MAnqtC+DOvWBEFIeCvvAvrRthjzghbtDQOuHU70dFthegw1HIITzzloYSUVLiQAy56X6UNTLeDtaBBDY5vidOjmTuGNx8amnY3GBJCHazqKDajrHrzrrXY0ZwuXUXo0JJANzaAUg9aaT5utx1za1VgNPDlOCRCXIY37c6QQGoCFq/Q+dbpKktOTqJ4BAj3axqyQpgQQMlfTTQW154JbOZh9xeoEGnhmEFNm2KbOknnP6AQ94adBSZeW+00ljsrQB3+l7snTjcOjkBDnylgdu+Tn1tBMmxoHtSUyhlRWr5wmvwzzibEKCpbKs82NjYw84UUMTPWabWRZKqxMXrVNgw4LruiMGeEt2WpGRJ/zuA28UCoX7nKTAFSGIDhjwN+G1OM7Jfj727wU3wv/Hazgkty+9xA+V9VzeAYx2/eFD3CCirXIGLxcRBpg04B80+Krcz1eP4svVj6evCll5Rp6VOvkP8g/F7b8z7PgPslNWT+ShSSkAAAAASUVORK5CYII=');
background-position: center;
background-repeat: no-repeat;
background-size: 70%
}

table.legend-table {
border-collapse: collapse;
margin: 0 auto
}

td.legend-table-td,th.legend-table-th {
border: 1px solid #fff;
margin: 10px;
padding: 2px;
text-align: left
}

.maplibregl-legend-close-button {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0 3px 0 0;
cursor: pointer;
background-color: #0000;
font-size: 13px;
padding-top: 5px;
padding-right: 5px
}

.maplibregl-legend-title-label {
font-size: 14px;
font-weight: 700;
margin: 5px;
color: #1c1c1c
}

.maplibregl-legend-onlyRendered-checkbox {
margin: 5px 5px 5px .5em
}

.maplibregl-legend-onlyRendered-label {
font-size: 14px;
margin: 5px;
color: #1c1c1c
}

td.legend-table-td>svg {
height: 17px
}

td.legend-table-td>label {
color: #1c1c1c
}
344 changes: 172 additions & 172 deletions dist/mapicgc-gl.js

Large diffs are not rendered by default.

344 changes: 172 additions & 172 deletions dist/mapicgc-gl.umd.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "mapicgc-gl-js",
"homepage": "https://autogitlab.icgc.local/geostarters/icgc/mapicgc/mapicgc-gl-js",
"version": "0.0.63",
"version": "0.0.64",
"description": "mapicgc-gl-js library",
"author": "ICGC",
"license": "BSD-3-Clause",
Expand Down Expand Up @@ -63,7 +63,7 @@
"@maplibre/maplibre-gl-geocoder": "^1.5.0",
"@watergis/maplibre-gl-export": "^3.4.1",
"axios": "^1.6.7",
"flatgeobuf": "^3.27.2",
"flatgeobuf": "^3.31.1",
"maplibre-gl": "^4.1.3",
"utm-latlng": "^1.0.8"
}
Expand Down
90 changes: 90 additions & 0 deletions public/mapicgc-gl.css
Original file line number Diff line number Diff line change
Expand Up @@ -1569,6 +1569,9 @@ h4::selection {
}
}




/* Media queries*/
@media screen and (min-width: 640px) {
.maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed {
Expand Down Expand Up @@ -1723,3 +1726,90 @@ h4::selection {


}

.maplibregl-legend-list {
display: none
}

.maplibregl-legend-list {
overflow-y: scroll;
max-height: 70vh;
margin: .3em
}

.maplibregl-ctrl-group .maplibregl-legend-list button {
background: none;
border: none;
cursor: pointer;
display: block;
height: auto
}

.maplibregl-legend-list button.active {
font-weight: 700
}

.maplibregl-legend-list button:hover {
background-color: #0000000d
}

.maplibregl-legend-list button+button {
border-top: 1px solid #ddd
}

.maplibregl-legend-switcher {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEXklEQVR4nO1bW28bRRReiSDKG6V/gV4kHnkCiqACnmkp8EThgZv6I9BGFTxWKNg+35md2VhBDWnclgZKIVJQq0ioQKHgRoISAW1p6WtbUCQaOc6iY2zXjt1kfNmLvfmkI1manfX5vrmdmTnrOJsIFxOZzDYf2KeBUQ2e0oQLGnzNgG9qwqpY5Tf4WrVsSp6VOlLXGUQopXZp4H0D/GTAZQMOurSyBv9oiN8zRDudJEMpdb8m9boh/q4HwuuaJnzrA6+5rjviJIz4QU18JSziLUa4rIF3YhfCI3pKExYiI95qF32ldkdOvHD48IOGmKsTWFzka8Ni1QCUz+e3RELeEO3UxMW4ibcKwT97We/RcMkzP6sJ/8RN9p4igP82ObUnHPI5tVcT/o2bpMWQWPaBV/pLntTLmrASN7kORFgxRPv7Qz6n9hjwnbhJddMTNPB87xEdJXfMb2iE2+PA9q7I5/P5LdVQNn4ivfWEBVm2OxbAEHPczvfPkO2IvK/U7iQEOX3sBasqp56wIu+67kgSA50+iLAg+5YNBdCkDsbtbHgi8NsWOzu+MrQCgP9YdwepZT+fAEdDNaID9xTAAOdtXvL5zKfB1/PzdTt57FhT+RefnWoqj8LEJ6teQDjXlryX8XbYvGDm+IlgLcrlcjA58VGdfFwQ3yx7Qevxmq6c4W1ceW52tu2f13rB/JmzQVwQ3+yGAg61Gf9cTIsAmvB9E/mJTGab7ent3JftBfikUBPgTBAXxDdLAVaIaOvd1md+0XYWPXpkMlheXm7646WlpWDC+JXyE9PTQalUipy8+CS+Wa8GObW3cfyPWlcEV8hOT35ct7ynm8v98abyKKzWALamSb3bIABPdVJ5GEwTH2mYAHEhfQI0TISGcN22onT3xUuXghvX/6rbQrFYL5eu+NviYlN5FCY+rR2K6xrhz0YBbttWnD19uu0kdPzodKX87NxXQVwQ3zroBTcbQmAu2VYchjigaqVNAWrYHAI0+JPgr7/0MAnqtC+DOvWBEFIeCvvAvrRthjzghbtDQOuHU70dFthegw1HIITzzloYSUVLiQAy56X6UNTLeDtaBBDY5vidOjmTuGNx8amnY3GBJCHazqKDajrHrzrrXY0ZwuXUXo0JJANzaAUg9aaT5utx1za1VgNPDlOCRCXIY37c6QQGoCFq/Q+dbpKktOTqJ4BAj3axqyQpgQQMlfTTQW154JbOZh9xeoEGnhmEFNm2KbOknnP6AQ94adBSZeW+00ljsrQB3+l7snTjcOjkBDnylgdu+Tn1tBMmxoHtSUyhlRWr5wmvwzzibEKCpbKs82NjYw84UUMTPWabWRZKqxMXrVNgw4LruiMGeEt2WpGRJ/zuA28UCoX7nKTAFSGIDhjwN+G1OM7Jfj727wU3wv/Hazgkty+9xA+V9VzeAYx2/eFD3CCirXIGLxcRBpg04B80+Krcz1eP4svVj6evCll5Rp6VOvkP8g/F7b8z7PgPslNWT+ShSSkAAAAASUVORK5CYII=');
background-position: center;
background-repeat: no-repeat;
background-size: 70%
}

table.legend-table {
border-collapse: collapse;
margin: 0 auto
}

td.legend-table-td,th.legend-table-th {
border: 1px solid #fff;
margin: 10px;
padding: 2px;
text-align: left
}

.maplibregl-legend-close-button {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0 3px 0 0;
cursor: pointer;
background-color: #0000;
font-size: 13px;
padding-top: 5px;
padding-right: 5px
}

.maplibregl-legend-title-label {
font-size: 14px;
font-weight: 700;
margin: 5px;
color: #1c1c1c
}

.maplibregl-legend-onlyRendered-checkbox {
margin: 5px 5px 5px .5em
}

.maplibregl-legend-onlyRendered-label {
font-size: 14px;
margin: 5px;
color: #1c1c1c
}

td.legend-table-td>svg {
height: 17px
}

td.legend-table-td>label {
color: #1c1c1c
}
5 changes: 5 additions & 0 deletions src/constants/Legends.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 49 additions & 0 deletions src/controls/LegendControl.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
export default class LegendControl {
constructor(options) {
this.options = options || {};
console.info(this.options);
}
onAdd(map) {
this._map = map;
let _this = this;

this._img1 = document.createElement("img");
this._img1.src = this.options.legendUrl;

this._img1.width = 150;
this._img1.title = 300;

this.controlContainer = document.createElement("div");
this.controlContainer.classList.add("maplibregl-ctrl");
this.controlContainer.classList.add("maplibregl-ctrl-group");
this.legendContainer = document.createElement("div");
this.legendContainer.classList.add("maplibregl-legend-list");
this.legendButton = document.createElement("button");
this.legendButton.classList.add("maplibregl-ctrl-icon");
this.legendButton.classList.add("maplibregl-legend-switcher");
this.legendButton.addEventListener("click", () => {
this.legendButton.style.display = "none";
this.legendContainer.style.display = "block";
});
document.addEventListener("click", this.onDocumentClick);
this.controlContainer.appendChild(this.legendButton);
this.controlContainer.appendChild(this.legendContainer);

this.closeButton = document.createElement("button");
this.closeButton.textContent = "x";
this.closeButton.classList.add("maplibregl-legend-close-button");
this.closeButton.addEventListener("click", () => {
this.legendButton.style.display = "block";
this.legendContainer.style.display = "none";
});
this.legendContainer.appendChild(this.closeButton);
const legendLabel = document.createElement("label");
legendLabel.classList.add("maplibregl-legend-title-label");
legendLabel.textContent = this.options.name || "Llegenda";
this.legendContainer.appendChild(legendLabel);
this.legendContainer.appendChild(document.createElement("br"));
this.legendContainer.appendChild(this._img1);

return this.controlContainer;
}
}
6 changes: 4 additions & 2 deletions src/controls/LogoControl.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@

import mapicgcConfig from "../mapicgc-config.json";


export default class LogoControl {
constructor(options) {
this.options = options;
this.options = options || {};

}
onAdd(map) {
let defaultOptions = this.options.defaultOptions
let defaultOptions = mapicgcConfig.defaultOptions
this._map = map;
let _this = this;

Expand Down
Loading

0 comments on commit c07a57b

Please sign in to comment.