1.0.5 • Published 4 years ago
@spu-colab/leaflet-simple-set v1.0.5
leaflet-simple-set
This simple configuration package for Leaflet JS encapsulates a set of well-known plugins such as leaflet-groupedlayercontrol, leaflet-minimap, leaflet-basemaps and leaflet-search.
Installation
NPM
npm i @spu-colab/leaflet-simple-set
Usage
HTML
<body>
...
<div id="map"></div>
...
</body>CSS
body {
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
z-index: 9999;
position: absolute;
}
.icon {
max-width: 70%;
max-height: 70%;
margin: 4px;
}JavaScript
import LeafletSimpleSet from '@spu-colab/leaflet-simple-set';
import setup from './setup';
var GeoVis = new LeafletSimpleSet("map", setup.config);
GeoVis.addMaps(setup.maps);
GeoVis.loadGeoJSONCollection(setup.geoJSONFeatures);
GeoVis.initialize();setup.js
import * as helpers from './helpers'
import sigSCLogo from './sig-sc.png'
export default {
config: {
"center": [-27.7000, -50.5000],
"zoomControl": false,
"zoom": 7,
"preferCanvas": false,
"attributionControl": true,
"fullscreenControl": true,
"fullscreenControlOptions": {
"position": "topright"
},
"measureControl": true
},
maps: [
{
url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png",
// active: false, // its possible deactivate a map.
config: {
label: "World Street Map",
maxZoom: 18,
attribution: "Map data © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors"
}
},
{
url: "http://sigsc.sc.gov.br/sigserver/SIGSC/wms",
wms: true,
active: true,
config: {
label: "SIG/SC",
maxNativeZoom: 19,
maxZoom: 100,
layers: "OrtoRGB-Landsat-2012",
iconURL: sigSCLogo
}
},
{
url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
active: true,
config: {
label: "OpenTopoMap",
maxZoom: 17,
attribution: "Map data: © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, <a href='http://viewfinderpanoramas.org'>SRTM</a> | Map style: © <a href='https://ap.org'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/'>CC-BY-SA</a>)"
}
}
],
geoJSONFeatures: [
{
title: "América Latina",
group: "Limites Territoriais",
url: "https://raw.githubusercontent.com/Cadastro-Marinho/LatinAmericaData/master/LatinAmerica.geojson",
callbacks: {
style: function(feature) {
return {
fillOpacity: 0.25,
color: feature.COLORMAP,
weight: 0.75
}
},
onEachFeature: function( feature, layer ) {
layer.bindPopup(
"<b>Nome: </b>" + feature.properties.LOCLNGNAM + "<br>" +
"<b>Status: </b>" + feature.properties.STATUS + "<br>" +
"<b>Área: </b>" + feature.properties.SQKM.toLocaleString('de-DE', { maximumFractionDigits: 2 }) + " km ² <br>" +
"<b>População (2019): </b>" + feature.properties.POP_CNTRY.toLocaleString('de-DE', { maximumFractionDigits: 0 })
);
layer.bindTooltip(feature.properties.LOCSHRTNAM, {
permanent: false
});
}
}
},
{
title: "Malvinas",
group: "Brasil",
url: "https://raw.githubusercontent.com/Cadastro-Marinho/LatinAmericaData/master/malvinas.geojson",
callbacks: {
style: () => {
return {
color: '#133863',
weight: 2,
fillOpacity: 0.25
}
},
onEachFeature: function( feature, layer ){
layer.bindPopup(
"<b>Descrição: </b>" + "Malvinas" + "<br>" +
"<b>Fonte: </b>" + "<a href= http://www.marineregions.org/gazetteer.php?p=details&id=47625 target='_blank'>Link.</a>" + "<br>" +
"<b>Área (km ² ): " + "<br>" +
"<b>Obs.: </b>"
);
}
}
},
// UFS...
{
title: "Estados BR",
group: "Brasil",
url: "https://raw.githubusercontent.com/Cadastro-Marinho/BrasilData/master/unidades_federacao.geojson",
callbacks: {
style: () => {
return {
color: '#f1f4c7',
weight: 2,
fillOpacity: 0.25
}
},
onEachFeature: function( feature, layer ){
layer.bindPopup(
"<b>Estado: </b>" + feature.properties.NM_ESTADO + "<br>" +
"<b>Região: </b>" + feature.properties.NM_REGIAO + "<br>" +
"<b>Código: </b>" + feature.properties.CD_GEOCUF
);
layer.bindTooltip(feature.properties.NM_ESTADO,{
permanent: false
});
}
}
},
{
title: "Municípios",
group: "Brasil",
url: "https://raw.githubusercontent.com/lfpdroubi/SPUData/master/municipios.geojson",
callbacks: {
style: helpers.areaStyle,
onEachFeature: function( feature, layer ){
layer.bindPopup(
"<b>Município: </b>" + feature.properties.nome + "<br>" +
"<b>Geocodigo: </b>" + feature.properties.geocodigo + "<br>" +
"<b>Gestão de Praias: </b>" + helpers.gestaoPraiaStatus(feature) + "<br>" +
"<b>NUP: </b>" + "<a href=" + feature.properties.nup_gpraia + ">Link para portaria.</a>"
);
layer.bindTooltip(feature.properties.nome,{
permanent: false
});
}
}
},
{
title: "Zonas Econômicas Exclusivas",
group: "Brasil",
url: "https://raw.githubusercontent.com/Cadastro-Marinho/LatinAmericaData/master/EEZ.geojson",
callbacks: {
style: () => {
return {
color: '#133863',
weight: 2,
fillOpacity: 0.25
}
},
onEachFeature: function( feature, layer ) {
layer.bindPopup(
"<b>Descrição: </b>" + feature.properties.GEONAME + "<br>" +
"<b>Fonte: </b>" + helpers.link(feature) + "<br>" +
"<b>Área (km ² ): " + feature.properties.AREA_KM2.toLocaleString('de-DE', { maximumFractionDigits: 2 }) + " <br>" +
"<b>Obs.: </b>" + "Não contempla a extensão da plataforma continental."
)
}
}
}
]
}