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.

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.

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

ajax api html javascript leaflet

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Joshua Engel on Why fry rice before boiling?
Jon Church on Why fry rice before boiling?
Lex on Does Google Analytics track 404 page responses as valid page views?
haakon.io on Why fry rice before boiling?
Peter Machado on Why fry rice before boiling?