Vinnaren i pepparkakshustävlingen!
2018-04-09, 01:49
  #1
Medlem
grimgazzs avatar
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:
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!
Citera
2018-04-09, 01:50
  #2
Medlem
grimgazzs avatar
mb.js:



Kod:
mapboxgl.accessToken = 'pk.eyJ1IjoidG9iaGFuODgiLCJhIjoiY2pmcmc2YTJvMDlseDJxbnl6cWxlYmNzNyJ9.9ProXDIKhDVqYESdRx_aug';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [21.519, 65.313],
  zoom: 15
});

map.on('load', function () {
    map.addSource('lager1', {type: 'geojson', data: 'https://gist.githubusercontent.com/Toebben88/93ba79ec665cd7412706b13af7ad0a56/raw/dd8296e672f7a7a73957449464a22ec092fbcf21/kvartallman.geojson'});
    map.addSource('lager2', {type: 'geojson', data: 'https://gist.githubusercontent.com/Toebben88/3af3f429fa30fea4c7c4f9d4f0af6b18/raw/64b45c6efb1cfbed82eda328063d477c2eb19bb7/plangrans.geojson'});
    map.addSource('lager3', {type: 'geojson', data: 'https://gist.githubusercontent.com/Toebben88/4b623dfed019cf93a53d762b403b7faf/raw/f930138553903ba0fd054caa45765f5586dce299/forslagen_fast.geojson'});
    map.addSource('lager4', {type: 'geojson', data: 'https://gist.githubusercontent.com/Toebben88/15fe89c4982a8f0947e63b93cc98f5b9/raw/db79ea6133fb90cfb0654e224e724bb782e27f09/yttre_plangrans.geojson'});

  map.addLayer({
    'id': 'kvart_allman',
    'type': 'fill',
    'source': 'lager1',
    'paint': {
        'fill-color': {
            'type': 'identity',
            'property': 'COLOR'
            },
        'fill-opacity': 0.5
        }
    });

    map.addLayer({
      'id': 'plangrans',
      'type': 'line',
      'source': 'lager2',
      'paint': {
          'line-color': 'black',
          'line-width': 1.2,
          'line-dasharray': [4,3]
        }
    });

    map.addLayer({
      'id': 'forslagen_fast',
      'type': 'line',
      'source': 'lager3',
      'paint': {
          'line-color': 'black',
          'line-width': 0.5,
          'line-dasharray': [4,3]
        }
    });

    map.addLayer({
      'id': 'yttre_plangrans',
      'type': 'line',
      'source': 'lager4',
      'paint': {
          'line-color': 'black',
          'line-width': 3,
          'line-dasharray': [5,3]
        }
      });

    map.addLayer({
      'id': 'labels_detaljplan',
      'type': 'symbol',
      'source': 'lager1',
      'layout': {
          'symbol-placement': 'point',
          'symbol-avoid-edges': false,
          'text-font': ['Open Sans Regular'],
          'text-rotation-alignment': 'map',
          'text-rotate': 350,
          'text-field': '{BESKR}',
          'text-size': 8,
          'text-anchor': 'center'
        },
      });

    map.addLayer({
      'id': 'hover_fill',
      'type': 'fill',
      'source': 'lager1',
      'layout': {},
      'paint': {
          'fill-color': {
            'type': 'identity',
            'property': 'COLOR'
          },
          'fill-opacity': 0.4
        },
      'filter': ['==', 'OBJECTID', '']
    }, 'kvart_allman');

    map.on('click', 'kvart_allman', function(e){

        var beskrivning = e.features[0].properties.BESKR;
        var kommentar = e.features[0].properties.COMMENT;
        var max_hojd = e.features[0].properties.HEIGHT_MA;
        var max_hojd_co = e.features[0].properties.HEIGHT_CO;
        var omfattning = e.features[0].properties.OMFATTNING;
        var placering = e.features[0].properties.PLACERING;
        var fastighet = e.features[0].properties.FASTIGHET;
        var storningsskydd = e.features[0].properties.STORNINGSSKYDD;
        var utformning = e.features[0].properties.UTFORMNING;

        map.setFilter('hover_fill', ['==', 'OBJECTID', e.features[0].properties.OBJECTID]);

        switch (beskrivning){

          case 'NATUR':
          case 'VÄG':
          case 'GATA':
          case 'CYKEL GÅNG':
          case 'E1':
          case 'E2':
              document.getElementById('detaljinfo').innerHTML = '<strong>BESKRIVNING:</strong> ' + beskrivning + '<br>' +
              '<strong>Kommentar:</strong> ' + kommentar + '<br>';
              break;

          case 'BOSTÄDER':
              document.getElementById('detaljinfo').innerHTML = '<strong>BESKRIVNING:</strong> ' + beskrivning + '<br>' +
              '<strong>Max nockhöjd huvudbyggnad:</strong> ' + max_hojd + '<br>' + '<strong>Max höjd komplementbyggnad:</strong> ' + max_hojd_co + '<br>'
              + '<strong>Omfattning:</strong><em> ' + omfattning + '</em><br>' + '<strong>Placering:</strong><em> ' + placering + '</em><br>' +
              '<strong>FASTIGHET:</strong><em> ' + fastighet + '</em><br>' + '<strong>Utformning:</strong><em> ' + utformning + '</em><br>'
              + '<strong>Kommentar:</strong> ' + kommentar + '<br>';
              break;

          case 'FÖRSKOLA':
              document.getElementById('detaljinfo').innerHTML = '<strong>Beskrivning:</strong> ' + beskrivning + '<br>' +
              '<strong>Max nockhöjd huvudbyggnad:</strong> ' + max_hojd + '<br>' + '<strong>Placering:</strong><em> ' + placering + '</em><br>' +
              '<strong>Störningsskydd:</strong><em> ' + storningsskydd + '</em><br>' + '<strong>Kommentar:</strong> ' + kommentar + '<br>';
              break;

          default: document.getElementById('detaljinfo').innerHTML = 'error';
              break;
        }
    });

    map.on('mouseleave', 'kvart_allman', function() {

        map.setFilter('hover_fill', ['==', 'OBJECTID', '']);

        document.getElementById('detaljinfo').innerHTML = '';

    });

});
Citera
2018-04-09, 02:51
  #3
Medlem
grimgazzs avatar
Verkade lösa sig om jag körde px istället för % på bredd och höjd i css. Tack ändå om någon började gå igenom detta!
Citera
2018-04-16, 17:27
  #4
Medlem
Lånar tråden lite.
Har precis börjat med webbutveckling 1 och är precis grön (som det kanske märks)

Sitter i .css-filen och försöker göra ändringar i html-filen men den tar bara vissa av ändringarna jag gör.

Allt som är mellan <style> och </style> tas inte med. Ligger textraderna fel, eller vad är det som jag gör för fel?

Bör kanske tillägga att i html-filen så är en kolumn innesluten med <div id="billy"> textrader </div>

html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px;

<style>
#billy {
border-color: red;
background-color: white;
}
</style>
}
h1 {
font-size: normal;
color: purple;

Ber om överseende för en nybörjare, och hoppas jag inte slaktat oskrivna regler 8)
Citera
2018-04-16, 19:47
  #5
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av Drogo
Lånar tråden lite.
Har precis börjat med webbutveckling 1 och är precis grön (som det kanske märks)

Sitter i .css-filen och försöker göra ändringar i html-filen men den tar bara vissa av ändringarna jag gör.

Allt som är mellan <style> och </style> tas inte med. Ligger textraderna fel, eller vad är det som jag gör för fel?

Bör kanske tillägga att i html-filen så är en kolumn innesluten med <div id="billy"> textrader </div>

html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px;

<style>
#billy {
border-color: red;
background-color: white;
}
</style>
}
h1 {
font-size: normal;
color: purple;

Ber om överseende för en nybörjare, och hoppas jag inte slaktat oskrivna regler 8)

Du ska inte ha <style> i .css-filen. Det ar avsett for nar du har CSS i HTML-filen istallet for i en separat fil.

Dessutom bor du anvanda CODE-taggen runt din kod, sa den formateras lasbart i ditt inlagg.
Citera
2018-04-17, 14:05
  #6
Medlem
grejigabosses avatar
Citat:
Ursprungligen postat av Drogo
Lånar tråden lite.
Har precis börjat med webbutveckling 1 och är precis grön (som det kanske märks)

Sitter i .css-filen och försöker göra ändringar i html-filen men den tar bara vissa av ändringarna jag gör.

Allt som är mellan <style> och </style> tas inte med. Ligger textraderna fel, eller vad är det som jag gör för fel?

Bör kanske tillägga att i html-filen så är en kolumn innesluten med <div id="billy"> textrader </div>

html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px;

<style>
#billy {
border-color: red;
background-color: white;
}
</style>
}
h1 {
font-size: normal;
color: purple;

Ber om överseende för en nybörjare, och hoppas jag inte slaktat oskrivna regler 8)
Lägger in hur du ska göra exakt för att få gjort det du gjort i koden. Däremot är det inte nödvändigt att sätta färg på html, gör istället det i exempelvis body. Sen använder jag oftast border: 2px solid red; för att skapa en border, tycker det känns lättare än att först göra border och sen sätta färgen. Men det ser ju ut som du är på rätt väg helt klart. Om du vill styla #billy som är inuti body kan du istället använda skriva som nedan, men det går också att använda bara #billy i och med att det finns max en id på varje sida, ingen risk att du stylar flera #billy av misstag.
body #billy{
css koden
}
__________________
Senast redigerad av grejigabosse 2018-04-17 kl. 14:08.
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback