Controles y capas mapa

Agregar el document ready

$(document).on("pageshow", "#mapPage", function () {});

Agregar el control de capas

<link rel="stylesheet" href="css/styledLayerControl.css" />

<script src="js/styledLayerControl.js"></script>

Servicios WMTS ICGC https://www.icgc.cat/es/Administracion-y-empresa/Servicios/Servicios-en-linea-Geoservicios/WMS-y-teselas-Cartografia-de-referencia/WMS-WMTS-rapidos-de-cartografia-raster/WMTS-de-cartografia-raster-en-coordenadas-no-UTM

http://kartena.github.io/Proj4Leaflet/

//Capas

const serveiOrtoCache = new L.tileLayer(
    "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wmts/orto/GRID3857/{z}/{x}/{y}.jpeg",
    {},
);

const serveiTopoCache = new L.tileLayer(
    "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wmts/topo/GRID3857/{z}/{x}/{y}.jpeg",
    {},
);

const portals = new L.Proj.geoJson(portals_json, {
    pointToLayer: function (geoJsonPoint, latlng) {
        return L.circleMarker(latlng, {
            radius: 8,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
        });
    },
});

const baseMaps = [
    {
        groupName: "Mapes base",
        layers: {
            OpenStreetMap: osm,
            Ortofoto: serveiOrtoCache,
            Topogràfic: serveiTopoCache,
        },
    },
];

const serveis = [
    {
        groupName: "Portals",
        layers: {
            Portals: portals,
        },
    },
];

const options = {
    container_width: "200px",
    container_maxHeight: "850px",
    group_maxHeight: "80px",
    exclusive: false,
};
const controlLayers = new L.Control.styledLayerControl(
    baseMaps,
    serveis,
    options,
);
mapa.addControl(controlLayers);

Agregar el control de busqueda

<link rel="stylesheet" href="css/leaflet-search.min.css" />
<link rel="stylesheet" href="css/leaflet-search.mobile.min.css" />

<script src="js/leaflet-search.min.js"></script>

const searchControl = new L.Control.Search({
    layer: portals,
    propertyName: "Direccion",
    zoom: 18,
});
searchControl.on("search:locationfound", (item) => {
    const { latlng } = item;
    //streetView(latlng.lat, latlng.lng);
});
mapa.addControl(searchControl);

Agregar el font-awesome

<link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>

Agregar el control de localizacion

<link rel="stylesheet" href="css/L.Control.Locate.min.css" />

<script src="js/L.Control.Locate.min.js"></script>

//leaflet control geolocalizacion
L.control.locate({ drawCircle: false }).addTo(mapa);

Agregar el control de medida

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.css"
    crossorigin="anonymous"
/>

<script
    src="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.js"
    crossorigin="anonymous"
></script>

//Medida
L.control
    .ruler({
        position: "topleft",
    })
    .addTo(mapa);

Agregar la vista de calle (REQUIERE API KEY DE GOOGLE)

<script
    type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=[TU_API_KEY]"
></script>

#panorama {
    position: absolute;
    z-index: 1000;
    left: 10px;
    bottom: 100px;
    height: 150px;
    width: 200px;
    resize: both;
    background-color: transparent !important;
}

// en el search control descomentar
//streetView(latlng.lat, latlng.lng)

//leaflet Street View
function streetView(lat, lng) {
    document.getElementById("panorama").style.visibility = "visible";
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById("panorama"),
        {
            position: { lat: lat, lng: lng },
            pov: { heading: 290, pitch: 10 },
            zoom: 1,
        },
    );
    panorama.setOptions({
        addressControl: false,
        panControl: false,
        enableCloseButton: true,
    });
}

mapa.on("contextmenu", function (evento) {
    var coordenada = evento.latlng;
    streetView(coordenada.lat, coordenada.lng);
});

Agregar el resto de capas geojson al mapa

<script src="data/farmacies.js"></script>
<script src="data/aparcament.js"></script>
<script src="data/BBVA.js"></script>
.....

//Farmacies
const icono_farmacia = L.icon({
    iconUrl: 'iconos/farmacia.png',
    iconSize: [16,16]
});
const farmacies = L.Proj.geoJson(farmacies_json,{
    'pointToLayer': function (feature,latlng){
        return L.marker(latlng,{icon:icono_farmacia});
    }
})

//Aparcaments
const icono_aparcament = L.icon({
    iconUrl: 'iconos/aparcament.png',
    iconSize: [16,16]
});
const aparcament = L.Proj.geoJson(aparcament_json,{
    'pointToLayer': function (feature,latlng){
        return L.marker(latlng,{icon:icono_aparcament});
    }
})

//BBVA
const icono_BBVA = L.icon({
    iconUrl: 'iconos/BBVA.png',
    iconSize: [16,16]
});
const BBVA = L.Proj.geoJson(BBVA_json,{
    'pointToLayer': function (feature,latlng){
        return L.marker(latlng,{icon:icono_BBVA});
    }
})
.....

Modificar el control del capas

const serveis = [
    {
        groupName: "Entitats bancàries",
        layers: {
            BBVA: BBVA,
            CaixaBank: caixabanc,
            Santander: santander,
            Sabadell: sabadell,
        },
    },
    {
        groupName: "Sanitat",
        layers: {
            Hospital: hospital,
            CAP: CAP,
            Farmacies: farmacies,
        },
    },
    {
        groupName: "Educació",
        layers: {
            Escoles: escoles,
            Biblioteques: biblio,
        },
    },
    {
        groupName: "Oci i lleure",
        layers: {
            Parcs: parcs,
            Poliesportius: poliesport,
            Oci: oci,
            Restaurants: restaurant,
        },
    },
    {
        groupName: "Consum",
        layers: {
            //"Supermercats" : supermercats,
            Alcampo: alcampo,
            BonArea: bonarea,
            Condis: condis,
            Caprabo: caprabo,
            Consum: consum,
            Dia: dia,
            Mercadona: mercadona,
        },
    },
    {
        groupName: "Serveis",
        layers: {
            //"Serveis Públics" : serveispublics,
            Ajuntament: ajuntament,
            DNI: DNI,
            Museu: museu,
            Policia: policia,
            "Serveis socials": serveissocials,
            Tanatori: tanatori,
            "Parades bus": paradesbus,
            Aparcament: aparcament,
            Gasolineres: gasolineres,
            Ferrocarrils: ferrocarrils,
        },
    },
    {
        groupName: "Portals",
        layers: {
            Portals: portals,
        },
    },
];