source: subversion/sites/www.openstreetmap.no/index.html @ 22343

Revision 22343, 10.5 KB checked in by vibrog, 4 years ago (diff)

Descriptive map layer names on openstreetmap.no

Line 
1<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
2<head>
3<title>OpenStreetMap Norge</title>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
5<meta content="OpenStreetMap er et prosjekt for å samle inn frie kartdata for hele verden." name="description" />
6
7<!-- bring in the OpenLayers javascript library -->
8<script src="openlayers/OpenLayers.js"></script>
9
10<!-- bring in the OpenStreetMap OpenLayers layers.
11     Using this hosted file will make sure we are kept up
12     to date with any necessary changes -->
13<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
14
15<script type="text/javascript">
16// Start position for the map
17var lat=65.4
18var lon=17.0
19var zoom=4
20var epsg4326 = new OpenLayers.Projection("EPSG:4326");
21OpenLayers.Lang.setCode("nb");
22
23var map;
24//Initialise the 'map' object
25function init() {
26
27  map = new OpenLayers.Map ("map", {
28    controls: [
29      new OpenLayers.Control.ArgParser(),
30      new OpenLayers.Control.KeyboardDefaults(),
31      new OpenLayers.Control.Navigation(),
32      new OpenLayers.Control.PanZoomBar(),
33      new OpenLayers.Control.LayerSwitcher(),
34      new OpenLayers.Control.MousePosition({numDigits:4}),
35      new OpenLayers.Control.Attribution(),
36      new OpenLayers.Control.Permalink()
37    ],
38    projection: "EPSG:900913",
39    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
40    maxResolution: 156543.0399,
41    numZoomLevels: 20,
42    units: 'm',
43    displayProjection: epsg4326
44  });
45
46  layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Vanlig: Mapnik");
47  layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Detaljert: Osmarender");
48  layerCycle = new OpenLayers.Layer.OSM.CycleMap("Sykkelruter");
49  map.addLayers([layerMapnik, layerTilesAtHome, layerCycle]);
50
51  var lonLat = new OpenLayers.LonLat(lon, lat).transform(
52    epsg4326, map.getProjectionObject());
53  if( ! map.getCenter() ){
54    map.setCenter(lonLat, zoom);
55  }
56  updatelinks();
57  map.events.register("moveend", map, updatelinks);
58  map.events.register("changelayer", map, updatelinks);
59}
60
61/*
62 * Called to interpolate JavaScript variables in strings using a
63 * similar syntax to rails I18n string interpolation - the only
64 * difference is that [[foo]] is the placeholder syntax instead
65 * of {{foo}} which allows the same string to be processed by both
66 * rails and then later by javascript.
67 */
68function i18n(string, keys) {
69  string = i18n_strings[string] || string
70  for (var key in keys) {
71    var re_key = '\\[\\[' + key + '\\]\\]';
72    var re = new RegExp(re_key, "g");
73    string = string.replace(re, keys[key]);
74  }
75  return string;
76}
77
78i18n_strings = new Array();
79i18n_strings['javascripts.site.edit_disabled_tooltip'] = 'Zoom inn for å redigere kartet';
80i18n_strings['javascripts.site.edit_tooltip'] = 'Rediger kartet';
81i18n_strings['javascripts.site.edit_zoom_alert'] = 'Du må zoome inn for å redigere kartet';
82i18n_strings['javascripts.site.history_disabled_tooltip'] = 'Zoom inn for å vise redigeringer i dette området';
83i18n_strings['javascripts.site.history_tooltip'] = 'Vis redigeringer for dette området';
84i18n_strings['javascripts.site.history_zoom_alert'] = 'Du må zoome inn for å vise redigeringer i dette området';
85
86/*
87 * Called to get the arguments from a URL as a hash.
88 */
89function getArgs(url) {
90  var args = new Object();
91  var querystart = url.indexOf("?");
92  if (querystart >= 0) {
93     var querystring = url.substring(querystart + 1);
94     var queryitems = querystring.split("&");
95     for (var i = 0; i < queryitems.length; i++) {
96        if (match = queryitems[i].match(/^(.*)=(.*)$/)) {
97           args[unescape(match[1])] = unescape(match[2]);
98        } else {
99           args[unescape(queryitems[i])] = null
100        }
101     }
102  }
103  return args;
104}
105
106/*
107 * Called to set the arguments on a URL from the given hash.
108 */
109function setArgs(url, args) {
110   var queryitems = new Array();
111   for (arg in args)
112   {
113      if (args[arg] == null) {
114         queryitems.push(escape(arg));
115      } else {
116         queryitems.push(escape(arg) + "=" + escape(args[arg]));
117      }
118   }
119   return url.replace(/\?.*$/, "") + "?" + queryitems.join("&");
120}
121
122function updatelinks() {
123  var lonlat = map.getCenter().clone().transform(map.getProjectionObject(), epsg4326);
124  var zoom = map.getZoom();
125  var extents = map.getExtent().clone().transform(map.getProjectionObject(), epsg4326);
126  var osmorg = 'http://www.openstreetmap.org'
127  var node;
128  var decimals = Math.pow(10, Math.floor(zoom/3));
129  lat = Math.round(lonlat.lat * decimals) / decimals;
130  lon = Math.round(lonlat.lon * decimals) / decimals;
131
132  node = $("exportanchor");
133  if (node) {
134    var args = getArgs(node.href);
135    args["lat"] = lat;
136    args["lon"] = lon;
137    args["zoom"] = zoom;
138    node.href = setArgs(node.href, args);
139  }
140
141  node = $("editanchor");
142  if (node) {
143    if (zoom >= 13) {
144      var args = new Object();
145      args.lat = lat;
146      args.lon = lon;
147      args.zoom = zoom;
148      node.href = setArgs(osmorg+"/edit", args);
149      node.title = i18n("javascripts.site.edit_tooltip");
150    } else {
151      node.href = 'javascript:alert(i18n("javascripts.site.edit_zoom_alert"));';
152      node.title = i18n("javascripts.site.edit_disabled_tooltip");
153    }
154  }
155
156  node = $("historyanchor");
157  if (node) {
158    var minlon = extents.left;
159    var minlat = extents.bottom;
160    var maxlon = extents.right;
161    var maxlat = extents.top
162    if (zoom >= 11) {
163      var args = new Object();
164      //set bbox param from 'extents' object
165      if (typeof minlon == "number" &&
166          typeof minlat == "number" &&
167          typeof maxlon == "number" &&
168          typeof maxlat == "number") {
169        minlon = Math.round(minlon * decimals) / decimals;
170        minlat = Math.round(minlat * decimals) / decimals;
171        maxlon = Math.round(maxlon * decimals) / decimals;
172        maxlat = Math.round(maxlat * decimals) / decimals;
173        args.bbox = minlon + "," + minlat + "," + maxlon + "," + maxlat;
174      }
175      node.href = setArgs(osmorg+"/history", args);
176      node.title = i18n("javascripts.site.history_tooltip");
177    } else {
178      node.href = 'javascript:alert(i18n("javascripts.site.history_zoom_alert"));';
179      node.title = i18n("javascripts.site.history_disabled_tooltip");
180    }
181  }
182
183  node = $("compareanchor");
184  if (node) {
185    var args = getArgs(node.href);
186    args["lat"] = lat;
187    args["lon"] = lon;
188    args["zoom"] = zoom;
189    node.href = setArgs(node.href, args);
190  }
191}
192
193function toggleVisibility(id) {
194  var e = document.getElementById(id);
195  if(e.style.display == 'block')
196    e.style.display = 'none';
197  else
198    e.style.display = 'block';
199}
200
201window.onload = init;
202</script>
203
204<link rel="stylesheet" type="text/css" href="openlayers/theme/default/style.css"/>
205<style type="text/css">
206  body { margin:0px; }
207  div#map { width:100%; height:100%; }
208  .olControlAttribution {
209    font-size:8pt;
210    left:5px; bottom:5px;
211  }
212  #menu {
213    position: absolute; top:0px; left:50%; 
214    width:40em; margin-left:-20em;
215    z-index:999;
216    vertical-align:middle;
217    font-family:Arial,sans-serif;
218    font-size:13px;
219    background-color:rgb(0,0,139);
220    color:white;
221    padding:4px 20px;
222    border-bottom-left-radius: 7px;
223    -moz-border-radius-bottomleft: 7px;
224    -webkit-border-bottom-left-radius: 7px;
225    border-bottom-right-radius: 7px;
226    -moz-border-radius-bottomright: 7px;
227    -webkit-border-bottom-right-radius: 7px;
228  }
229  #more { display:none; }
230  #videotutorial { display:none; text-align:center; padding-bottom:10px; }
231  #menu * a {
232    text-decoration:none;
233    color:white;
234  }
235  #tabs a { margin-right:.9em; }
236  #more ul li { line-height:1.4em; }
237</style>
238
239</head>
240<body>
241
242  <div id="menu">
243    <div id="tabs">
244    <a href="http://www.openstreetmap.org/"
245       title="OpenStreetMap er et fritt wiki-verdenskart. Klikk her for den internasjonale siden."><img id="logo"
246       src="OpenStreetMapNorge.png"
247       width="13" height="13" border="0" /></a>
248    <a href="http://www.openstreetmap.org/edit"
249       id="editanchor"
250       title="Rediger kartet">Rediger</a>
251    <a href="http://www.openstreetmap.org/history"
252       id="historyanchor"
253       title="Vis redigeringer for dette området">Historikk</a>
254    <a href="http://www.openstreetmap.org/export"
255       id="exportanchor"
256       onclick="new Ajax.Request('/export/start', {asynchronous:true, evalScripts:true}); return false;"
257       title="Eksporter kartdata">Eksporter</a>
258    <a href="http://www.openstreetmap.org/traces"
259       title="Del og finn GPS-spor">GPS-spor</a>
260    <a href="http://help.openstreetmap.org/"
261       title="Spør om hjelp her">Hjelp</a>
262    <a href="#"
263       onclick="javascript:toggleVisibility('more');"
264       title="Kort om OSM og hint til å komme i gang">Informasjon &gt;&gt;</a>
265    </div>
266    <div id="more">
267      <p>
268        <strong>OpenStreetMap</strong> (OSM) er
269        et verdensomspennende prosjekt for å dele frie kartdata.
270        Flere titusen mennesker bidrar med å samle inn data
271        og lage løsninger som du kan bruke helt fritt.
272      </p>
273      <p>
274        Denne siden tilbyr norsktilpassede presentasjoner
275        av kartdataene i OSM.<br/>
276        Bruk '+'-menyen til høyre for å bytte mellom disse.
277      </p>
278      <ul>
279        <li><a href="http://wiki.openstreetmap.org/wiki/No:Beginners_Guide"
280              >Hvordan bidra til dugnadskartet</a> —
281            <a href="#"
282               onclick="javascript:toggleVisibility('videotutorial');"
283              >se en instruksjonsfilm &gt;&gt;</a></li>
284        <li><a href="http://wiki.openstreetmap.org/wiki/No:Map_Features"
285              >Oversikt over kartegenskaper (tagger) tilpasset Norge</a></li>
286        <li><a href="http://www.frikart.no/garmin/"
287              >Last ned kart basert på OSM til Garmin GPS</a></li>
288        <li><a id="compareanchor"
289              href="http://www.vidargundersen.com/osm/compare.html"
290              >Sammenlign OSM med offentlige kart fra Statens Kartverk</a></li>
291        <li><a href="http://wiki.nuug.no/grupper/kart"
292              >Diskusjonsforum (epostliste)</a></li>
293      </ul>
294      <div id="videotutorial">
295<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/1Kd3S53CXQs&amp;hl=en_US&amp;fs=1?rel=0"/><param name="allowFullScreen" value="true"/><param name="allowscriptaccess" value="always"/><embed src="http://www.youtube.com/v/1Kd3S53CXQs&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"/></object>
296      </div>
297    </div>
298  </div>
299
300  <!-- Define a DIV into which the map will appear. -->
301  <div id="map"></div>
302
303</body>
304</html>
Note: See TracBrowser for help on using the repository browser.