Hej!
Håller på med ett eget litet projekt som involverar javascript biblioteket Mapbox gl js samt deras kart-api och har gjort en html-sida som ska visa upp kartan från mapbox+lite till. Då jag är total nybörjare när det gäller html och javascript och sitter i Atom och kodar detta så har jag stött på ett problem. När jag förhandsgranskar index.html som innehåller själva kartan i Atom så visas den upp som den ska med tillhörande element. Dock när jag kör html-filen i chrome eller annan webbläsare så visas inte kartan upp alls. Vore oerhört tacksam om någon kunde kika på min, förmodligen väldigt taskiga kod:
index.html:
main.css:
Koden för tabsen är dock inte klar, men visas ändå upp korrekt i previewn i Atom btw.
Javascriptkoden kommer i inlägget under då jag slog i taket på max tecken:
Tack på förhand!
Håller på med ett eget litet projekt som involverar javascript biblioteket Mapbox gl js samt deras kart-api och har gjort en html-sida som ska visa upp kartan från mapbox+lite till. Då jag är total nybörjare när det gäller html och javascript och sitter i Atom och kodar detta så har jag stött på ett problem. När jag förhandsgranskar index.html som innehåller själva kartan i Atom så visas den upp som den ska med tillhörande element. Dock när jag kör html-filen i chrome eller annan webbläsare så visas inte kartan upp alls. Vore oerhört tacksam om någon kunde kika på min, förmodligen väldigt taskiga kod:
index.html:
HTML-kod:
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Testsida</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css" type="text/css"> <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div class='header'><h2>3D-visualisering av planerade byggnader i detaljplan</h2></div> <div class='map' id='map'></div> <div class='map-overlay' id='detaljoverlay'><h4 id='h4-overlay'>Planbestämmelser</h4><div id=detaljinfo></div></div> <div class='tab'> <button class='tablinks' onclick='changetabs(event, 'detaljplan')'>Detaljplan</button> <button class='tablinks' onclick='changetabs(event, 'byggdata')'>Ladda upp</button> <button class='tablinks' onclick='changetabs(event, 'byggdata')'>Om</button> </div> <div class='tabcontent' id='detaljplan'> <pre> <h3>PLANBESTÄMMELSER</h3> <h4 class='detaljplan-rubrik'>Omfattning</h4> - Högsta nockhöjd för huvudbyggnad är angivet värde i meter, PBL 4 kap. 11 § 1 st 1 p. - Högsta byggnadshöjd för komplementbyggnad är angivet i meter, PBL 4 kap. 11 § 1 st 1 p. e1 Största exploatering per fastighet är 250 kvadratmeter byggnadsarea, PBL 4 kap. 11 § 1 st 1 p. e2 Minsta byggnadsarea för huvudbyggnad är 100 kvadratmeter, PBL 4 kap. 11 § 1 st 1 p. <h4 class='detaljplan-rubrik'>Placering</h4> p1 Byggnad ska placeras minst 4 meter från fastighetsgräns, PBL 4 kap. 16 § 1 st 1 p. p2 Byggnad ska placeras minst 6 meter fastighetsgränsmot GATA eller VÄG, PBL 4 kap 16 § 1 st 1 p. p3 komplementbyggnad ska placeras minst 2 meter från fastighetsgränsmot allmän plats NATUR och CYKEL GÅNG, PBL 4 kap. 16 § 1 st 1 p. <h4 class='detaljplan-rubrik'>Fastighet</h4> d1 Endast en huvudbyggnad per fastighet, PBL 4 kap. 18 § 1 st. d2 Minsta fastighetsstorlek är 1200 kvadratmeter, PBL 4 kap. 18 § 1 st. d3 Största fastighetsstorlek är 1500 kvadratmeter, PBL 4 kap. 18 § 1 st. <h4 class='detaljplan-rubrik'>Störningsskydd</h4> m1 Plank eller motsvarande får finnas vid fastighetsgräns, PBL 4 kap. 12 § 1 st 2 p. <h4 class='detaljplan-rubrik'>Utformning</h4> f1 Endast friliggande villor, PBL 4 kap. 16 § 1 st 1 p. <h3>ADMINISTRATIVA BESTÄMMELSER</h3> <h4 class='detaljplan-rubrik'>Genomförandetid</h4> Genomförandetiden är 10 år, PBL 4 kap. 21 § </pre> </div> <div class='tabcontent' id='byggdata'> <p>geoJSON</p> </div> <script src="js/vendor/modernizr-3.5.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script> <script src="js/plugins.js"></script> <script src="js/mb.js"></script> <script src="js/main.js"></script> </body> </html>
main.css:
Kod:
body { background-color: #fff; margin: 0; font-family: sans-serif; } .header { } .map { position: relative; float:left; width: 70%; height: 90%; border-radius: 10px; } .map-overlay { position: absolute; top: 0; background: rgba(255, 255, 255, 0.5); margin-top: 60px; margin-left: 10px; overflow: auto; border-radius: 12px; box-shadow: 0 8px 6px -6px black; } #h4-overlay { top: 0; height: auto; margin-top: 12px; margin-left: 6px; width: 250px; } #container { width: 95%; height: 90%; margin:auto; margin: 20px; border-radius: 10px; -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } #detaljinfo { top: 0; height: auto; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; width: 250px; font-size: 0.7em; line-height: 1.6; } /*håller på att jobba med tabsen så detta är ej klart */ .tab { float: left; width: 490px; border-bottom:: 1px solid black; } .tab button { background-color: inherit; border-radius: 10px; outline: none; cursor: pointer; padding: 12px 40px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid black; border-top: none; }
Koden för tabsen är dock inte klar, men visas ändå upp korrekt i previewn i Atom btw.
Javascriptkoden kommer i inlägget under då jag slog i taket på max tecken:
Tack på förhand!