EVOLUTION-MANAGER

Edit File: mapa.js

$(document).ready(function () {
    setTimeout(() => {
        console.clear();
    }, 700);

obtener_lugares();
});

var addressPoints = [];

var map;
var hacer_click = 0;

function obtener_lugares(){

vista_cargando();
    $.get("https://wsapp.sucre.gob.ec/api/turismo/obtener-lugares", {}, function (lista_lugares) {
        vista_cargando_end();

$.each(lista_lugares, function (i, lugar) {

//Mas info en:  https://leafletjs.com/examples/custom-icons/

var icono = $("#ruta_proyecto").val()+'/plugins/leaflet/images/marker-icon.png';
            var icono_shadow = $("#ruta_proyecto").val()+'/plugins/leaflet/images/marker-shadow.png';
            var iconSize = [25, 41]; // tamaño del icono
            var shadowSize = [41, 41]; // tamaño de la sombra
            var iconAnchor = [12, 41]; // punto del icono que corresponderá a la ubicación del marcador
            var shadowAnchor = [12, 41]; // lo mismo para la sombra
            var popupAnchor = [-0, -40]; // punto desde el que debería abrirse la ventana emergente en relación con el iconoAnchor

if(lugar.categoriaid == 6) {
                icono = $("#ruta_proyecto").val()+'/plugins/leaflet/images/placemap2.png';
                iconSize = [55, 55];
                shadowSize = [55, 55];
                iconAnchor = [27, 55];
                shadowAnchor = [17, 56];
                popupAnchor = [-0, -53];
            }
            if(lugar.categoriaid == 7) {
                icono = $("#ruta_proyecto").val()+'/plugins/leaflet/images/hotelmap2.png';
                iconSize = [55, 55];
                shadowSize = [55, 55];
                iconAnchor = [27, 55];
                shadowAnchor = [17, 56];
                popupAnchor = [-0, -53];
            }
            if(lugar.categoriaid == 8) {
                icono = $("#ruta_proyecto").val()+'/plugins/leaflet/images/restaurantmap2.png';
                iconSize = [55, 55];
                shadowSize = [55, 55];
                iconAnchor = [27, 55];
                shadowAnchor = [17, 56];
                popupAnchor = [-0, -53];
            }

var descripcion = `
                <b>${lugar.nombres}</b>
                <br>${lugar.ubicacion}
                <br>
                <a href="https://maps.google.com/?q=${lugar.latitud},${lugar.longitud}" target="_blank">
                <center style="margin-top: 10px;">
                    <img src="${$("#ruta_proyecto").val()}/img/icons/icon-google-map.png" width="25">
                </center>
                </a>
            `;

addressPoints.push([
                lugar.latitud, 
                lugar.longitud, 
                descripcion,
                icono, //icono
                icono_shadow,
                iconSize,
                shadowSize,
                iconAnchor,
                shadowAnchor,
                popupAnchor

]);
        });

iniciar_mapa();

}).fail(function() {
        vista_cargando_end();
    });

}

function iniciar_mapa(ver=null){

var latitud = -0.602535;
    var longitud = -80.424440;

//obtenemos la geolocalizacion
    // navigator.geolocation.getCurrentPosition(
    //     (pos)=> {
    //         const {coords} = pos
    //         cargar_mapa(coords.latitude, coords.longitude);
    //     },
    //     (err)=> {
    //         console.warn("No se pudo obtener la ubicación");
    //         cargar_mapa(latitud, longitud);
    //     },
    //     {}
    // );

if(ver == null){
        if (!!navigator.geolocation) {
            //Pedimos los datos de geolocalizacion al navegador
            navigator.geolocation.getCurrentPosition(
                //Si el navegador entrega los datos de geolocalizacion los imprimimos
                function (position) {
                    cargar_mapa(position.coords.latitude, position.coords.longitude);
                },
                //Si no los entrega manda un alerta de error
                function () {
                    console.warn("No se pudo obtener la ubicación");
                    cargar_mapa(latitud, longitud);
                }
            );
        }            
    }else{
        cargar_mapa(latitud, longitud);
    }

}

function cargar_mapa(latitud, longitud){

var url_mapa = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    // var url_mapa = 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';

var tiles = L.tileLayer(url_mapa, {
        maxZoom: 40,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
    });

// let iconMarker = L.icon({iconUrl: $("#ruta_proyecto").val()+'/plugins/leaflet/images/marker-icon7.png',});

latlng = L.latLng(latitud, longitud);
    map = L.map('myMap', {center: latlng, zoom: 11, layers: [tiles]});
    markers = L.markerClusterGroup();

for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(new L.LatLng(a[0], a[1]), { title: `${a[0]},${a[1]}`});
        let iconMarker = L.icon({
            iconUrl: a[3], 
            shadowUrl: a[4],
            iconSize: a[5],
            shadowSize: a[6],
            iconAnchor: a[7],
            shadowAnchor: a[8],
            popupAnchor: a[9]
        });
        var marker = L.marker(new L.LatLng(a[0], a[1]), { title: `${a[0]},${a[1]}`, icon:iconMarker});
        marker.bindPopup(title);
        markers.addLayer(marker);
    }

map.addLayer(markers);

}