TransWikia.com

calculadora solar añadir api pvgis

Stack Overflow en español Asked by Juan Javier Escobar Rubio on December 8, 2020

estoy haciendo una calculadora solar de placas solares que me han pedido.

De momento tengo esto:(Si lo se, no tiene estilo y se puede colocar mejor. Acepto consejos pero no os metáis mucho conmigo que aun lo estoy haciendo jajajaja)

<!doctype HTML>
<html>
<head>
    
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch/dist/geosearch.css" />
    <style>
        #map{ 
            width: 100%;
            height: 580px;
            box-shadow: 5px 5px 5px #888;
        }
        #rango{
            width: 30%;
            background: #4CC561;
            cursor: pointer;
        }
    </style>
    <script>
        
    function calcular(){
        
            
        var consumo = document.getElementById("consumo");
        var orientacion = document.getElementsByName("orientacion");
        var inclinacion = document.getElementById("rango");
        var resultado = "";
        var precioConsumo = 0;
        var precioOrientacion = 0;
        var precioInclinacion = 0;
        
        for(var i=0;i<orientacion.length;i++){
            if(orientacion[i].checked){
                resultado = orientacion[i].value;
            }
        }
        
        if(consumo.value >= 1 && consumo.value <=  99){
            precioConsumo = 100;
        }else if(consumo.value >= 100 && consumo.value <= 199){
            precioConsumo = 200;
        }else if(consumo.value >= 200 && consumo.value <= 299){
            precioConsumo = 300;
        }else if(consumo.value >= 300 && consumo.value <= 399){
            precioConsumo = 400;
        }else if(consumo.value >= 400 && consumo.value <= 499){
            precioConsumo = 500;
        }else{
            precioConsumo = 600;
        }
        
        if(resultado == "oeste"){
            precioOrientacion = 100;
        }else if(resultado == "suroeste"){
            precioOrientacion = 200;
        }else if(resultado == "sur"){
            precioOrientacion = 300;
        }else if(resultado == "sureste"){
            precioOrientacion = 400;
        }else if(resultado == "este"){
            precioOrientacion = 500;
        }
        
        if(inclinacion.value >= 0 && inclinacion.value <= 9){
            precioInclinacion = 100;
        }else if(inclinacion.value >= 10 && inclinacion.value <= 19){
            precioInclinacion = 200;
        }else if(inclinacion.value >= 20 && inclinacion.value <= 29){
            precioInclinacion = 300;
        }else if(inclinacion.value >= 30 && inclinacion.value <= 39){
            precioInclinacion = 400;
        }else if(inclinacion.value >= 40 && inclinacion.value <= 49){
            precioInclinacion = 500;
        }else if(inclinacion.value >= 50 && inclinacion.value <= 59){
            precioInclinacion = 600;
        }else{
            precioInclinacion = 650;
        }
        
        
        document.getElementById('precio').value = precioConsumo + precioOrientacion + precioInclinacion + "€";
        
    }
    
    </script>
</head>
<body>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    
    
    <div id="map">
    </div>
        <label for="latitud">Latitud:</label>
        <input type="text" name="latitud" id="latitud">
        <label for="longitud">Longitud:</label>
        <input type="text" name="longitud" id="longitud">
        <label for="consumo">Consumo:</label>
        <input type="text" name="consumo" id="consumo">
        <label for="orientacion">Orientacion:</label>
        <input type="radio" name="orientacion" value="oeste"/> Oeste
        <input type="radio" name="orientacion" value="suroeste"/> Suroeste
        <input type="radio" name="orientacion" value="sur"> Sur
        <input type="radio" name="orientacion" value="sureste"> Sureste
        <input type="radio" name="orientacion" value="este"> Este
        <label for="slider">Inclinacion:</label>
    
    <p><input type="range" min="0" max="60" step="1" value="30" id="rango"><label>30</label></p>
    
    <button onClick="calcular()">Calcular</button>
    
    <label>Precio Estimado:
    <input type="text" id="precio">
    </label>
    
    <script>
    
        var input = document.querySelector("input[type=range]");
   actualizarInput(input) 


input.addEventListener("input", function(evt) {
   actualizarInput(input)
});

function actualizarInput(input){
   var label = input.parentElement.querySelector("label");
   label.innerHTML = input.value;
   var inputMin = input.getAttribute("min");
   var inputMax = input.getAttribute("max");
   var unidad = (inputMax - inputMin) / 100;
   input.style.setProperty("--value", (input.value - inputMin)/unidad);  
}
        
    </script>
    
    
</body>
    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
    <script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.umd.js"></script>
    <script>
        var map = L.map('map',{drawControl: true}).
        setView([40.4179, -3.7106],
        6);
        
        googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
        }).addTo(map);
        
        L.control.scale().addTo(map);
        
        L.control.locate().addTo(map);
        
        const search = new GeoSearch.GeoSearchControl({
          provider: new GeoSearch.OpenStreetMapProvider(),
        });
        map.addControl(search);
        
        map.on('click', function(e) { 
            document.getElementById("latitud").value = e.latlng.lat
            document.getElementById("longitud").value = e.latlng.lng
        });
        
    </script>
</html>

Como podéis ver es un mapa de la librería Leaflet de JavaScript a la que le he ido añadiendo cosas según me pedían.

Ahora la persona para la que se lo estoy haciendo me ha pedido esto.

introducir la descripción de la imagen aquí

Esta es la libreria de la foto: https://ec.europa.eu/jrc/en/PVGIS/releases/pvgis51

y esto lo que pide que haga la calculadora.

introducir la descripción de la imagen aquí

Asique es donde recurro a vosotros para conseguir eso que me pide.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP