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/start-gre.png';
                iconSize = [24, 24]; // tamaño del icono
                shadowSize = [24, 24]; // tamaño de la sombra
                iconAnchor = [11, 22]; // punto del icono que corresponderá a la ubicación del marcador
                shadowAnchor = [1, 24]; // lo mismo para la sombra
                popupAnchor = [1, -20]; // punto desde el que debería abrirse la ventana emergente en relación con el iconoAnchor
                data = {"id":lugar.id};
            }
            if(lugar.categoriaid == 7) {
                icono = $("#ruta_proyecto").val()+'/plugins/leaflet/images/start-blue.png';
                iconSize = [24, 24]; // tamaño del icono
                shadowSize = [24, 24]; // tamaño de la sombra
                iconAnchor = [11, 22]; // punto del icono que corresponderá a la ubicación del marcador
                shadowAnchor = [1, 24]; // lo mismo para la sombra
                popupAnchor = [1, -20]; // punto desde el que debería abrirse la ventana emergente en relación con el iconoAnchor
                data = {"id":lugar.id};
            }
            if(lugar.categoriaid == 8) {
                icono = $("#ruta_proyecto").val()+'/plugins/leaflet/images/start-ye.png';
                iconSize = [24, 24]; // tamaño del icono
                shadowSize = [24, 24]; // tamaño de la sombra
                iconAnchor = [11, 22]; // punto del icono que corresponderá a la ubicación del marcador
                shadowAnchor = [1, 24]; // lo mismo para la sombra
                popupAnchor = [1, -20]; // punto desde el que debería abrirse la ventana emergente en relación con el iconoAnchor
                data = {"id":lugar.id};
            }

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()}/pagina/img/mapa/icon-google-map.png" width="25">
                </center>
                </a>
            `;

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

]);
        });

iniciar_mapa();

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

}

function iniciar_mapa(ver=null){

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

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(); //para que se muestre los puntos agrupados
    markers = map;

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],
            data: a[10]
        });
        var marker = L.marker(new L.LatLng(a[0], a[1]), { title: `${a[0]},${a[1]}`, icon:iconMarker});
        //marker.bindPopup(title); //para mostrar el tooltiptext al dar clic en un punto
        marker.on('click', function(e){ //evento al hacer clic en en un punto
            mostrar_informacion(e);
        });
        markers.addLayer(marker);
    }

//map.addLayer(markers);

}

function mostrar_informacion(data){
    $("#mapa_info").show();
    console.log(data);
}

function close_info(){
    $("#mapa_info").hide();  
}