Skip to content

Instantly share code, notes, and snippets.

@esisa

esisa/gist:8667609

Last active January 4, 2016 19:29
Show Gist options
  • Save esisa/8667609 to your computer and use it in GitHub Desktop.
Save esisa/8667609 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="">
<meta name="author" content="">
<title>Kilden - Bootstrap style</title>
<!-- Core CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/typeahead.js/typeahead.js-bootstrap.css" rel="stylesheet" type="text/css"> <!--https://github.com/jharding/typeahead.js-bootstrap.css-->
<link rel="stylesheet" href="http://ol3js.org/en/v3.0.0-beta.1/build/ol.css" type="text/css">
<script src="http://ol3js.org/en/v3.0.0-beta.1/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Custom styles for this template -->
<style>
html, body, #sidebar, #container {
height: 100%;
margin: 0px;
}
body {
padding-top: 50px;
}
label {
font-weight: normal;
}
#map {
height: 96%;
margin: 0px;
-webkit-box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
box-shadow: 0 -1px 10px rgba(0,0,0,0.5);
padding-bottom: -150px;
}
/* Fjerne padding på kartet */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
min-height: 1px;
padding-left: 0px;
padding-right: 0px;
position: relative;
}
/* Fjerne margins på raden*/
#row-toolbar {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #EEEEEE;
padding: 10px;
}
#maalestokk {
width: auto;
display: inline;
}
#loading {
position: absolute;
width: 220px;
height: 19px;
top: 50%;
left: 50%;
margin: -10px 0 0 -110px;
z-index: 20001;
}
#searchbox {
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-top-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.table {
margin-bottom: 0px;
}
.navbar .navbar-brand {
font-weight: bold;
font-size: 22px;
color: white;
white-space: nowrap;
}
.navbar-collapse.in {
overflow-y: hidden;
}
.tt-dropdown-menu {
overflow: auto;
}
.tt-hint, .tt-query {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
}
.typeahead-header {
margin: 0 5px 5px 5px;
padding: 3px 0;
border-bottom: 2px solid #333;
}
.tt-suggestion + .tt-suggestion {
border-top: 1px solid #ccc;
}
.search-container {
width: 250px;
}
@media (max-width: 992px) {
.navbar .navbar-brand {
font-size: 18px;
float: left;
}
.search-container {
width: 150px;
}
}
@media (max-width: 767px){
.search-container {
width: 100%;
}
.url-break {
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
}
/* Print Handling */
@media print {
.navbar, .toggle, #sidebar {
display: none !important;
}
}
/* indent 2nd level */
.list-unstyled li > ul > li {
margin-left:10px;
padding:0px;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn" data-toggle="collapse" data-target=".navbar-collapse" style="height: 34px; padding: 5px 10px; margin-right: 10px;"><i class="fa fa-ellipsis-v" style="color: white"></i></button>
<button id="toggle" type="button" class="navbar-toggle btn" style="height: 34px; padding: 5px 10px; margin-right: 10px;"><i id="toggleIcon" class="fa fa-check-square-o" style="color: white"></i></button>
<a class="navbar-brand" href="#">Kilden til</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="hidden-xs " onclick="$('#printModal').modal('show'); return false;"><span class="glyphicon glyphicon-print"></span>&nbsp;Utskrift</a></li>
<li><a href="#" onclick="$('#downloadModal').modal('show'); return false;"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;Last ned</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hjelp <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" onclick="$('#helpModal').modal('show'); return false;">Hjelp</a></li>
<li><a href="#" onclick="$('#tipsModal').modal('show'); return false;">Tips</a></li>
<li><a href="#" onclick="$('#servicesModal').modal('show'); return false;">Andre tjenester</a></li>
<li><a href="#" onclick="$('#errorModal').modal('show'); return false;">Driftsmeldinger</a></li>
<li><a href="#" onclick="$('#aboutModal').modal('show'); return false;">Om kilden</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<!--button type="submit" class="btn btn-default" onclick="$('#printModal').modal('show'); return false;"><span class="glyphicon glyphicon-print"></span>&nbsp;Utskrift</button-->
<div class="form-group">
<input type="text" class="form-control" placeholder="Søk">
</div>
</form>
<ul class="nav navbar-nav">
<li class="active hidden-xs"><a href="#">arealinformasjon</a></li>
<li><a href="#about" class="hidden-xs">landskap</a></li>
<li><a href="#contact" class="hidden-xs">skogen</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
<div class="row" id="container">
<div class="col-sm-4 col-lg-4" id="sidebar" style="padding: 10px; overflow: auto;">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#layers" data-toggle="tab"><span class="glyphicon glyphicon-list"></i>&nbsp;Kart</a></li>
<li><a href="#search" data-toggle="tab"><i class="fa fa-search"></i></i>&nbsp;Søk</a></li>
<li><a href="#legend" data-toggle="tab"><span class="glyphicon glyphicon-picture"></i>&nbsp;Tegnforklaring</a></li>
</ul>
<div class="tab-content" style="padding-top: 10px;">
<div class="tab-pane active" id="layers">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#basemap-layers">
Bakgrunnskart
</a>
</div>
<div id="basemap-layers" class="panel-collapse collapse in">
<div class="panel-body" style="padding: 0px 15px;">
<div class="radio">
<label>
<input type="radio" name="basemapLayers" id="topo2graatone" checked>
Gråtoner
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="basemapLayers" id="topo2">
Farger
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="basemapLayers" id="topo2raster">
Raster
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="basemapLayers" id="aerial">
Flybilder
<select id="aerial-project-select" class="form-control input-sm">
<option>Landsdekkende</option>
<option>Oslo 2008</option>
<option>Oslo 2011</option>
<option>Asker og Bærum 2012</option>
<option>Hole 2011</option>
</select>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="basemapLayers" id="nobackground">
Ingen bakgrunn
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#sol-layers">
Kart fra Skog og landskap
</a>
</div>
<div id="sol-layers" class="panel-collapse collapse">
<div class="panel-body" style="padding: 0px 15px;">
<!--div id="MyTree" class="tree">
<div class="tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="icon-folder-close"></i>
<div class="tree-folder-name"></div>
</div>
<div class="tree-folder-content"></div>
<div class="tree-loader" style="display:none">
</div>
</div>
<div class="tree-item tree-folder-content" style="display:none;">
<i class="tree-dot"></i>
<div class="tree-item-name"></div>
</div>
</div-->
<ul class="list-unstyled">
<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#userMenu" class="">
<h5 class="">Markslag (AR5) <i class="glyphicon glyphicon-chevron-right"></i></h5>
</a>
<ul class="list-unstyled collapse" id="userMenu">
<li class="active"> <a href="#" class=""><input type="checkbox"> Bonitet</a> &nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Arealtype </a>&nbsp; <i class="fa fa-info"></i>&nbsp;&nbsp;<span class="badge badge-warning">Ny!</span>
</li>
<li><a href="#" class=""><input type="checkbox"> Hovedgrupper</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Skogbonitet</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Treslag</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Jordbruksareal</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Grunnforhold</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Manuskart</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#userMenu2" class="">
<h5 class="">Undermeny <i class="glyphicon glyphicon-chevron-right"></i></h5>
</a>
<ul class="list-unstyled collapse" id="userMenu2">
<li class="active"> <a href="#" class=""><input type="checkbox"> Kartlag</a> &nbsp; <i class="fa fa-info"></i>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#menu2" class="">
<h5 class="">Dyrkbar jord <i class="glyphicon glyphicon-chevron-right"></i></h5>
</a>
<ul class="list-unstyled collapse" id="menu2">
<li><a href="#" class=""><input type="checkbox"> Dyrkbar jord</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Endret etter 2008</a>&nbsp; <i class="fa fa-info"></i>
</ul>
</li>
<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#menu3" class="">
<h5 class="">Arealressurser(AR50) <i class="glyphicon glyphicon-chevron-right"></i></h5>
</a>
<ul class="list-unstyled collapse" id="menu3">
<li><a href="#" class=""><input type="checkbox"> Hovedgrupper</a>&nbsp; <i class="fa fa-info"></i>
</li>
<li><a href="#" class=""><input type="checkbox"> Skogbonitet</a>&nbsp; <i class="fa fa-info"></i>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#history-layers">
Historiske kart
</a>
</div>
<div id="history-layers" class="panel-collapse collapse">
<div class="panel-body" style="padding: 0px 15px;">
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="boroughs" z-index="2" checked>
Gammel ØK-raster
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="subwayLines" z-index="1">
Kartid og dato for gammel ØK
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#basis-layers">
Basisdata
</a>
</div>
<div id="basis-layers" class="panel-collapse collapse">
<div class="panel-body" style="padding: 0px 15px;">
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="boroughs" z-index="2" checked>
Fjellskygge
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="subwayLines" z-index="1">
Basisdata
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="theaters" z-index="3" checked>
Eiendomsgrenser, FKB
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="museums" z-index="3">
Høydekurver
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="museums" z-index="3">
Veger
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="museums" z-index="3">
Steder
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#external-layers">
Eksterne
</a>
</div>
<div id="external-layers" class="panel-collapse collapse">
<div class="panel-body" style="padding: 0px 15px;">
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="boroughs" z-index="2" checked>
SEFRAK
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="overlayLayers" id="subwayLines" z-index="1">
Naturtyper
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="search">
<div class="col-xs-5">
<label for="exampleInputEmail1">Fylke:</label>
<select class="form-control input-sm">
<option>Akershus</option>
<option>Buskerud</option>
<option>Oslo</option>
<option>Vestfold</option>
</select>
<label for="exampleInputEmail1">Kommune:</label>
<select class="form-control input-sm">
<option>Frogn</option>
<option>Ås</option>
<option>Vestby</option>
<option>Skedsmo</option>
</select>
<label for="exampleInputEmail1">Gårdsnummer:</label>
<input type="text" class="form-control input-sm" id="exampleInputEmail2" placeholder="gbr/bnr">
<br>
<button type="submit" class="btn btn-default input-sm">Søk eiendom</button>
</div>
</div>
<div class="tab-pane" id="legend">
Tegnforklaring legges inn her...
</div>
</div>
</div>
<div class="col-sm-8 col-lg-8" id="map">
<div id="row-toolbar" class="row row-toolbar">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button id="feature-info-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-info-circle fa-lg mapIcon"></i></span>
</button>
<button id="move-map-back-button" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" title="Flytt kartet tilbake">
<i class="fa fa-arrow-left fa-lg mapIcon"></i></span>
</button>
<button id="move-map-forward-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-right fa-lg mapIcon"></i></span>
</button>
</div>
<div class="btn-group">
<button id="measure-line-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-minus fa-lg mapIcon"></i></span>
</button>
<button id="measure-polygon-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-square-o fa-lg mapIcon"></i></span>
</button>
<button id="measure-erase-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-eraser fa-lg mapIcon"></i></span>
</button>
</div>
<div class="btn-group">
<button id="help-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-question-circle fa-lg mapIcon"></i></span>
</button>
<button onclick="$('#errorModal').modal('show'); return false;" id="error-button" type="button" class="btn btn-default btn-sm">
<i class="fa fa-warning fa-lg mapIcon"></i></span>
</button>
</div>
<div class="btn-group">
<select id="maalestokk" class="form-control input-sm">
<option>1:2 500</option>
<option>1:5 000</option>
<option>1:10 000</option>
<option>1:25 000</option>
<option>1:50 000</option>
<option>1:100 000</option>
<option>1:250 000</option>
<option>1:500 000</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="aboutModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Uts!</h4>
</div>
<div class="modal-body">
<ul id="aboutTabs" class="nav nav-tabs">
<li class="active"><a href="#about" data-toggle="tab"><i class="fa fa-question-circle"></i>&nbsp;About the project</a></li>
<li><a href="#contact" data-toggle="tab"><i class="fa fa-envelope"></i>&nbsp;Contact us</a></li>
<li><a href="#disclaimer" data-toggle="tab"><i class="fa fa-exclamation-circle"></i>&nbsp;Disclaimer</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i>&nbsp;Metadata <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#boroughs-tab" data-toggle="tab">Boroughs</a></li>
<li><a href="#subway-lines-tab" data-toggle="tab">Subway Lines</a></li>
<li><a href="#theaters-tab" data-toggle="tab">Theaters</a></li>
<li><a href="#museums-tab" data-toggle="tab">Museums</a></li>
</ul>
</li>
</ul>
<div id="aboutTabsContent" class="tab-content" style="padding-top: 10px;">
<div class="tab-pane fade active in" id="about">
<p>A simple template for building web mapping applications with <a href="http://getbootstrap.com/">Bootstrap 3</a> and <a href="http://leafletjs.com/" target="_blank">Leaflet</a>.</p>
<div class="panel panel-primary">
<div class="panel-heading">
Features
</div>
<ul class="list-group">
<li class="list-group-item">Fullscreen mobile-friendly map template with responsive navbar, sidebar, and modal placeholders</li>
<li class="list-group-item">jQuery loading of external GeoJSON files</li>
<li class="list-group-item">Elegant client-side multi-layer feature search with autocomplete using <a href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a></li>
<li class="list-group-item">Integration of Bootstrap tables into Leaflet popups</li>
<li class="list-group-item">Logic for minimizing Sidebar on small screens</li>
<li class="list-group-item">Custom layer control with functions for defining and retaining vector z-index when toggling layer visibility.</li>
</ul>
</div>
</div>
<div class="tab-pane fade text-danger" id="disclaimer">
<p>The data provided on this site is for informational and planning purposes only.</p>
<p>Absolutely no accuracy or completeness guarantee is implied or intended. All information on this map is subject to such variations and corrections as might result from a complete title search and/or accurate field survey.</p>
</div>
<div class="tab-pane fade" id="contact">
<form id="contact-form">
<fieldset>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
<button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Submit</button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="boroughs-tab">
<p>Borough data courtesy of <a href="http://www.nyc.gov/html/dcp/html/bytes/meta_dis_nyboroughwi.shtml" target="_blank">New York City Department of City Planning</a></p>
</div>
<div class="tab-pane fade" id="subway-lines-tab">
<p><a href="http://spatialityblog.com/2010/07/08/mta-gis-data-update/#datalinks" target="_blank">MTA Subway data</a> courtesy of the <a href="http://www.urbanresearch.org/about/cur-components/cuny-mapping-service" target="_blank">CUNY Mapping Service at the Center for Urban Research</a></p>
</div>
<div class="tab-pane fade" id="theaters-tab">
<p>Theater data courtesy of <a href="https://data.cityofnewyork.us/Recreation/Theaters/kdu2-865w" target="_blank">NYC Department of Information & Telecommunications (DoITT)</a></p>
</div>
<div class="tab-pane fade" id="museums-tab">
<p>Museum data courtesy of <a href="https://data.cityofnewyork.us/Recreation/Museums-and-Galleries/sat5-adpb" target="_blank">NYC Department of Information & Telecommunications (DoITT)</a></p>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="legendModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Map Legend</h4>
</div>
<div class="modal-body">
<p>Map Legend goes here...</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="printModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Utskrift</h4>
</div>
<div class="modal-body">
<form id="contact-form">
<fieldset>
<div class="form-group">
<label for="name">Tittel:</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="email">Layout:</label>
<select class="form-control input-sm">
<option>A4 stående</option>
<option>A4 liggende</option>
<option>A3 stående</option>
<option>A4 liggende</option>
</select>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Skriv ut</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="downloadModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Nedlasting av data</h4>
</div>
<div class="modal-body">
Nedlastingsskjema...
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Lukk</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="errorModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Driftsmeldinger</h4>
</div>
<div class="modal-body">
Driftsmeldinger...
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Lukk</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="featureModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title text-primary" id="feature-title"></h4>
</div>
<div class="modal-body" id="feature-info">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!--script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script-->
<script type="text/javascript" src="assets/typeahead.js/typeahead.min.js"></script> <!--https://github.com/twitter/typeahead.js/-->
<script type="text/javascript">
var map, boroughSearch = [], theaterSearch = [], museumSearch = [];
$(document).ready(function() {
$("[rel=tooltip]").tooltip();
if (document.body.clientWidth <= 767) {
$("#map").css("class", "col-sm-12 col-lg-12");
$("#sidebar").css("display", "none");
};
});
$(window).resize(function() {
$(".tt-dropdown-menu").css("max-height", $("#container").height()-$(".navbar").height()-20);
if (document.body.clientWidth <= 767) {
$("#map").css("class", "col-sm-12 col-lg-12");
$("#sidebar").css("display", "none");
} else {
$("#map").css("class", "col-sm-9 col-lg-9");
$("#sidebar").css("display", "block");
};
});
$("#toggle").click(function() {
$("#toggle i").toggleClass("fa fa-check-square-o fa fa-map-marker");
$("#map").toggleClass("col-sm-9 col-lg-9 col-sm-12 col-lg-12");
$("#sidebar").toggle();
if (document.body.clientWidth <= 767) {
$("#map").toggle();
};
map.invalidateSize();
return false;
});
</script>
<script type="text/javascript">
var MapQuestOpenAerial = new ol.source.MapQuestOpenAerial();
var topo2graatone = new ol.layer.Tile({
source: new ol.source.TileWMS( ({
url: 'http://opencache.statkart.no/gatekeeper/gk/gk.open',
params: {
'VERSION': '1.1.1',
'LAYERS': 'topo2graatone',
'TILED': true
}//,
//extent: [-13884991, 2870341, -7455066, 6338219],
//serverType: 'geoserver'
}))
});
var topo2 = new ol.layer.Tile({
source: new ol.source.TileWMS( ({
url: 'http://opencache.statkart.no/gatekeeper/gk/gk.open',
params: {
'VERSION': '1.1.1',
'LAYERS': 'topo2',
'TILED': true
}//,
//extent: [-13884991, 2870341, -7455066, 6338219],
//serverType: 'geoserver'
}))
});
var toporaster2 = new ol.layer.Tile({
source: new ol.source.TileWMS( ({
url: 'http://opencache.statkart.no/gatekeeper/gk/gk.open',
params: {
'VERSION': '1.1.1',
'LAYERS': 'toporaster2',
'TILED': true
}//,
//extent: [-13884991, 2870341, -7455066, 6338219],
//serverType: 'geoserver'
}))
});
var map = new ol.Map({
target: 'map',
renderer: ol.RendererHint.CANVAS,
layers: [/*new ol.layer.Tile({
source: new ol.source.MapQuestOpenAerial()
})*/topo2graatone],
view: new ol.View2D({
center: ol.proj.transform([10.79328, 59.66492], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
$("input:radio[name='basemapLayers']").click(function() {
var value = $(this).val();
var id= $(this).attr('id');
//alert(id);
switch(id) {
case "topo2graatone":
map.addLayer(topo2graatone);
break;
case "topo2":
map.addLayer(topo2);
break;
case "topo2raster":
map.addLayer(toporaster2);
break;
}
});
$('#move-map-back-button').tooltip({placement: 'bottom'});
$('#move-map-forward-button').tooltip({ title: 'Flytt kartet fram', placement: 'bottom'});
$('#feature-info-button').tooltip({ title: 'Informasjon om kartlag', placement: 'bottom'});
$('#error-button').tooltip({ title: 'Driftsmeldinger', placement: 'bottom'});
$('#measure-line-button').tooltip({ title: 'Tegn en linje', placement: 'bottom'});
$('#measure-polygon-button').tooltip({ title: 'Tegn en flate', placement: 'bottom'});
$('#measure-erase-button').tooltip({ title: 'Slett tegnede objekter', placement: 'bottom'});
$('#maalestokk').tooltip({ title: 'Endre målestokk', placement: 'bottom'});
$('#measure-line-button').popover({ title: 'Tegn en linje', placement: 'bottom', content: '<h5>Lengde 30m</h5>', html:true});
$('#measure-polygon-button').popover({ title: 'Tegn en flate', placement: 'bottom', content: '<h5>Areal: 45</h5>', html:true});
$('#feature-info-button').popover({ title: 'Kartlagsinformasjon', placement: 'bottom', content: '<h5>Klikk i kartet for å hente informasjon om kartlaget!</h5>', html:true})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment