OpenGastroMap/Installation/index.html

From OpenStreetMap Wiki
Jump to: navigation, search
To use this file, please do not copy the contents of this page directly, but take the Wiki source instead. Otherwise, HTML codes are not provided correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
 <!--
    Map layers for OpenStreetMap 'smoking' tag, online editing of tags
    Copyright (C) 2010 Stephan Knauss, stephankn@toolserver.org
    some changes: Markus Weber

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=100">
<title>OpenGastroMap.de - Gaststätten in Deutschland</title>
<link rel="shortcut icon" href="favicon_gastro.png">

<script src="ol/OpenLayers.js" type="text/javascript"></script>
<script src="OpenStreetMap.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* -jsl:option explicit*/
/*jsl:import ol/OpenLayers.js*/
/*jsl:import OpenStreetMap.js*/
/*jsl:import jquery.min.js*/
      
OpenLayers.Protocol.HTTPex= new OpenLayers.Class(OpenLayers.Protocol.HTTP, {
  read: function(options) {
    OpenLayers.Protocol.prototype.read.apply(this,arguments);
    options= OpenLayers.Util.applyDefaults(options,this.options);
    options.params= OpenLayers.Util.applyDefaults(
    options.params,this.options.params);
    options.params.resolution= map.getResolution();
    options.params.zoom= map.getZoom();
    if(options.filter) {
      options.params= this.filterToParams(
        options.filter, options.params);
      }
    var readWithPOST= (options.readWithPOST!==undefined)?
      options.readWithPOST: this.readWithPOST;
    var resp= new OpenLayers.Protocol.Response({requestType: "read"});
    if(readWithPOST) {
      resp.priv= OpenLayers.Request.POST({
        url: options.url,
        callback: this.createCallback(this.handleRead,resp,options),
        data: OpenLayers.Util.getParameterString(options.params),
        headers: {"Content-Type": "application/x-www-form-urlencoded"}
        });
    } else {
      resp.priv= OpenLayers.Request.GET({
        url: options.url,
        callback: this.createCallback(this.handleRead,resp,options),
        params: options.params,
        headers: options.headers
        });
      }
    return resp;
    },
  CLASS_NAME: "OpenLayers.Protocol.HTTPex"
  });

// map object
var map;
var loading= 0;

function getAmenityIcon(a) {
  return '<img src="'+a+'.png" alt="'+a+'" style="vertical-align:bottom;">';
  }

function getOSMIcon(type) {
  var baseURL= '';
  switch(type) {
  case 'n': return baseURL+'node.png';
  case 'w': return baseURL+'area.png';
    }
  return '';
  }

function getOSMBrowseURL(type,id) {
  var baseURL= 'http://www.openstreetmap.org/browse/';
  var elementType= 'node/';
  switch(type) {
  case 'n': elementType= 'node/'; break;
  case 'w': elementType= 'way/'; break;
  case 'r': elementType= 'relation/'; break;
    }
  return baseURL+elementType+id;
  }

function registerLoader(layer) {
  layer.events.register("loadstart", null, function() { 
    loading++;
    $('#loader').show();
    });
  layer.events.register("loadend", null, function() { 
    loading--;
    if (loading<=0) {
      $('#loader').hide(); 
      loading=0;
      }
    });
  }

function sendEdits() {
  var editdata= $('#osmeditform').serialize();
  $.get('store.php?'+editdata);
  this.popup.toggle();
  return false;
  }

function onPopupClose(evt) {
  // 'this' is the popup.
  selectControl.unselect(this.feature);
  }

function onFeatureSelect(feature) {
  var gastrotype='unbekannter Gaststättentyp';
  var smokestatus,cuisine,info,infos,website;

  switch(feature.attributes.amenity) {
  case 'pub': gastrotype= 'Kneipe, Pub'; break;
  case 'bar': gastrotype= 'Bar'; break;
  case 'nightclub': gastrotype= 'Disko, Nachtclub'; break;
  case 'restaurant': gastrotype= 'Restaurant'; break;
  case 'fast_food': gastrotype= 'Fastfood-Restaurant'; break;
  case 'food_court': gastrotype= 'Gemeinsamer Restaurantbereich'; break;
  case 'cafe': gastrotype= 'Cafe'; break;
    }

  switch(feature.attributes.smoking) {
  case 'yes': smokestatus= 'Raucherlokal'; break;
  case 'dedicated': smokestatus= 'Raucherclub'; break;
  case 'separated': smokestatus= 'Raucher/Nichtraucher gemischt, ohne stets geschlosene Abtrennung'; break;
  case 'isolated': smokestatus= 'Raucher- und Nichtraucherraum mit stets geschlossener dichter Abtrennung'; break;
  case 'no': smokestatus= 'Nichtraucherlokal, in dem zu keiner Zeit geraucht wird'; break;
  default:
    if(feature.attributes.smoking_outside!="_") {
      smokestatus= "";
      gastrotype= gastrotype+", nur Außenbereich";
      }
    else {
      var ce= feature.geometry.clone().transform(new OpenLayers.Projection("EPSG:900913"),
        new OpenLayers.Projection("EPSG:4326")).getBounds().getCenterLonLat();
      smokestatus= '--> Raucher/Nichtraucher bitte bei '+
        '<a href="http://www.opengastromap.org?zoom=18&lat='+ce.lat+'&lon='+ce.lon+
        '" target="_blank">www.opengastromap.org<\/a> eintragen.';
      }
    }

  if(feature.attributes.smoking_hours=="yes")
    smokestatus= 'Raucherlokal zu manchen Uhrzeiten';
  else if(feature.attributes.smoking_hours!="_")
    smokestatus= 'Raucherlokal: '+feature.attributes.smoking_hours;
  if(smokestatus!="") smokestatus= smokestatus+"<br>"

  if(feature.attributes.cuisine=='_') cuisine= '';
  else cuisine= '<img src="'+feature.attributes.cuisine_icon+
    '" alt="Flagge" style="margin: 1px; vertical-align: middle;"> '+
    feature.attributes.cuisine+"<br>";

  website= feature.attributes.website;
  if(website=='_')
    website= '';
  else {
    if(website.substr(0,4)!="http")
      website= "http://"+website;
    website= '<br><a href="'+website+
    '" target="_blank">Webseite dieses Lokals anzeigen<\/a>';
    }

  infos= "";

  if(feature.attributes.wheelchair=="yes")
    info= "rollstuhlgeeignet";
  else if(feature.attributes.wheelchair=="limited")
    info= "bedingt rollstuhlgeeignet";
  else if(feature.attributes.wheelchair=="no")
    info= "nicht rollstuhlgeeignet";
  else info= "";
  if(info!="") if(infos!="") infos= infos+", "+info; else infos= info;

  if(feature.attributes.internet_access=="terminal")
    info= "Internetzugang per Terminal";
  else if(feature.attributes.internet_access=="wlan")
    info= "Internetzugang per WLAN";
  else info= "";
  if(info!="") if(infos!="") infos= infos+", "+info; else infos= info;

  if(infos!="") infos= "<br>"+infos+"<br>";
  
  popup= new OpenLayers.Popup.FramedCloud("featurePopup",
    feature.geometry.getBounds().getCenterLonLat(),new OpenLayers.Size(510,250),
    '<table bgcolor="#dfdfff"><div  style="width:510px; max-width:510px">'+
    '<font size="+2">'+feature.attributes.name+'<\/font>   '+
    '('+gastrotype+')<br>'+cuisine+smokestatus+infos+
    '<p><a href="'+getOSMBrowseURL(feature.attributes.osmtype,feature.attributes.osmid)+
    '" target="_blank">Weitere Informationen zu diesem Lokal anzeigen<\/a>'+
    website+'<\/p><\/div></table>',
    null,true,onPopupClose);
    popup.updateSize();
    feature.popup= popup;
    popup.feature= feature;
    map.addPopup(popup);
    $("#smokingoptions").val(feature.attributes.smoking);
    $("#smokingoptions").attr('style', $("#smokingoptions :selected").attr('style'));
    }

function onFeatureUnselect(feature) {
  if(feature.popup) {
    popup.feature= null;
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
    }
  }

// initiator
function init() {
  // get the request-parameters
  var args= OpenLayers.Util.getParameters();

  // main map object
  map= new OpenLayers.Map("map",{
    controls: [
    new OpenLayers.Control.Navigation(),
    new OpenLayers.Control.PanZoomBar(),
    new OpenLayers.Control.LayerSwitcher(),
    new OpenLayers.Control.Permalink(),
    new OpenLayers.Control.Attribution()
    ],
    // mercator bounds
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
    //maxExtent: new OpenLayers.Bounds(1430000,4400000,1760000,4660000),
    maxResolution: 156543.0399,numZoomLevels: 19,units: 'm',
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326")
    });

  // add the ts layers
  map.addLayer(new OpenLayers.Layer.OSM.Mapnik('OpenStreetMap-Karte'));
  var nonsmokingPOI;

  nonsmokingPOI= new OpenLayers.Layer.Vector("Rauchen unbekannt", {
    visibility: false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=m",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false
    });
  map.addLayer(nonsmokingPOI);
  registerLoader(nonsmokingPOI);

  nonsmokingPOI= new OpenLayers.Layer.Vector("Rauchen in Speiselokalen", {
    visibility: false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=x&t=s",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false
    });
  map.addLayer(nonsmokingPOI);
  registerLoader(nonsmokingPOI);

  nonsmokingPOI= new OpenLayers.Layer.Vector("Rauchen in Getränkelokalen", {
    visibility: false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=x&t=g",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false
    });
  map.addLayer(nonsmokingPOI);
  registerLoader(nonsmokingPOI);

  layerPOI= new OpenLayers.Layer.Vector("Küche (ab Zoom 15)", {
    //visibility: false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=c",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false, maxResolution : 4.8  // i.e. zoom 15..18
    });
  map.addLayer(layerPOI);
  registerLoader(layerPOI);

  layerPOI= new OpenLayers.Layer.Vector("Rollstuhleignung", {
    visibility: false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=w",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false, maxResolution : 4.8  // i.e. zoom 15..18
    });
  map.addLayer(layerPOI);
  registerLoader(layerPOI);

  layerPOI= new OpenLayers.Layer.Vector("Internetterminal/WLAN", {
    visibility: false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=i",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false, maxResolution : 4.8  // i.e. zoom 15..18
    });
  map.addLayer(layerPOI);
  registerLoader(layerPOI);

  layerPOI= new OpenLayers.Layer.Vector("Details per Klick", {
    //"visibility": false,
    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
    protocol: new OpenLayers.Protocol.HTTPex({
    url: "features.php?f=a",
    format: new OpenLayers.Format.Text()
    }),
    transparent: true, isBaseLayer:false, maxResolution : 4.8  // i.e. zoom 15..18
    });
  map.addLayer(layerPOI);
  registerLoader(layerPOI);

  selectControl= new OpenLayers.Control.SelectFeature(layerPOI,
    {toggle: true, onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  map.addControl(selectControl);
  selectControl.activate();

  // TODO remove the following line in the final version. helps debugging to determine coordinate of object
  //map.addControl(new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection("EPSG:900913")}));

  // default zoon
  var zoom= 6;

  // set the default center
  var center= new OpenLayers.LonLat(1140000, 6630000);

  // bbox requestet
  if(args.bbox) {
    // transform bbox
    var bounds= OpenLayers.Bounds.fromArray(args.bbox).
      transform(map.displayProjection, map.getProjectionObject());

    // move to
	map.zoomToExtent(bounds);
	}
  else if(args.lon && args.lat) {  // lat/lon requestes
    if(args.zoom) {  // zoom requested
      zoom= parseInt(args.zoom,10);
      var maxZoom= map.getNumZoomLevels();
      if(zoom>=maxZoom) zoom= maxZoom -1;
      }

    // transform center
    center= new OpenLayers.LonLat(parseFloat(args.lon),parseFloat(args.lat)).
      transform(map.displayProjection,map.getProjectionObject());

    // move to
    map.setCenter(center,zoom);
    }
  else  // default center
    // move to
    map.setCenter(center,zoom);

  // initialize info popup handler
  $('#descriptionToggle').click(function () {
    $('#descriptionPopup').toggle("fast");
    });
  }

</script>

		
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
    font-family: sans-serif;
	}
 .descriptionPopup {
    position: absolute;
    left: 75px;
    top: 36px;
    width: 590px;
    height: 460px;
    overflow: auto;
    padding: 5px;
    background-color: white;
    font-family: sans-serif;
    font-size: small;
    border: 1px solid black;
 }
 .descriptionHeader {
    position: absolute;
    left: 75px;
    top: 15px;
    width: 198px;
    height: 18px;
    overflow: auto;
    padding: 1px;
    text-align: center;
    font-family: sans-serif;
    background-color: #FAFAD2;
    border: 1px solid black;
 }
 a { text-decoration:none; }
 a:hover { text-decoration:underline; }
 .imagebacked {
    padding-left: 21px; /* bg position + image width + 4 (padding of text)*/
    background-repeat: no-repeat;
    background-position: 1px 2px;
    height: 24px;
    font-family: Tahoma, sans-serif;
 }
 select option.imagebacked {
    height: 20px;
 }
 .olPopup {
    font-size: small;
 }
 
</style>
</head>
   
<body onload="init();">
   <div id="map" style="bottom: 10px; position: absolute; left: 10px; right: 10px; top: 10px;"></div>
   <div id="loader" style="position: absolute; left: 75px; top: 55px; display: none;">
     <img src="ajax-loader.gif" width="55" height="54" alt="loading"><br>
     Daten werden geladen...
   </div>
   <div class="descriptionHeader" id="descriptionToggle">
      Informationen zur Karte
   </div>
   <div class="descriptionPopup" id="descriptionPopup" style="display:none;">
<p>Diese Karte zeigt alle eingetragenen Gaststätten in Deutschland.</p>
      <p>
Verschieben ist mit der linken Maustaste möglich. Der Kartenausschnitt kann mit dem Mausrad vergrößert und verkleinert werden. Mit gleichzeitig zur Umschalttaste gedrückt gehaltener linker Maustaste kann ein Bereich zum Vergrößern ausgewählt werden.<br><br>
In höheren Vergrößerungsstufen können durch Klick auf das Pluszeichen (rechts oben) Detailinformationen eingeblendet werden. Für Genauers zur jeweiligen Gaststätte bitte auf das jeweilige Fähnchen bzw. das kleine Rechteck klicken.<br><br>
Die Aktualisierung der Karte erfolgt einmal täglich auf Grundlage der OpenStreetMap-Datenbank.
      </p>
		<h3>Raucher/Nichtraucher</h3>
		<p style="border: 1px solid; background-color: #DCDCDC;">
         <img src="16pxr.png" width="16" height="16" alt="Raucher" style="margin: 1px; vertical-align: middle;"> Rauchergaststätte oder gemischte Gaststätte ohne stets geschlosene Abtrennung<br>
         <img src="16pxy.png" width="16" height="16" alt="Abgetrennt" style="margin: 1px; vertical-align: middle;"> Raucher- und Nichtraucherraum mit stets geschlossener luftdichter Abtrennung<br>
         <img src="16pxg.png" width="16" height="16" alt="Nichtraucher" style="margin: 1px; vertical-align: middle;"> Nichtrauchergaststätte, in der zu keiner Zeit geraucht wird<br>
         <img src="16pxb.png" width="16" height="16" alt="nicht erfasst" style="margin: 1px; vertical-align: middle;"> Information noch nicht vorhanden oder wird derzeit geprüft
      </p>
		<h3>Küche</h3>
		<p>Die am häufigsten anzutreffenden Küchenarten werden in Form von kleinen Fähnchen dargestellt. Für weitere Details bitte auf das jeweilige Fähnchen klicken.<br>
Um die Anzeige der Küchenarten zu aktivieren muss die Ebene "Detail" aktiviert werden: rechts oben auf das Pluszeichen klicken.</p> 
		<h3>Karte bearbeiten</h3>
		<p>Fehlende Raucher-Nichtraucher-Status lassen sich über
         <a href="http://www.opengastromap.org" target="_blank">www.opengastromap.org</a> eintragen.
		   Fehlende Gaststätten können über <a href="http://openstreetbugs.schokokeks.org/?zoom=7&lat=51.04919&lon=10.24079&layers=B00T" target="_blank">OpenStreetBugs</a> gemeldet werden.</p>
      <p><a href="http://wiki.openstreetmap.org/wiki/DE:Beginners_Guide" target="_blank">Erfahrene Anwender</a> mit eigenem Benutzerkonto bei
         OpenStreetMap haben die Möglichkeit, Gaststättendaten direkt mit <a href="http://wiki.openstreetmap.org/wiki/DE:JOSM" target="_blank">JOSM</a>
         oder <a href="http://wiki.openstreetmap.org/wiki/DE:Potlatch" target="_blank">Potlatch</a> bearbeiten.
      </p> 
		<h3>Projekt "politische Karten"</h3>
		<p>Diese Karte ist aus dem Projekt <a href="https://jira.toolserver.org/browse/ACCAPP-186" target="_blank">"politische Karten"</a>, einem Gemeinschaftsprojekt von <a href="http://meta.wikimedia.org/wiki/OpenStreetMap/de" target="_blank">Wikipedia und Openstreetmap</a>, entstanden. Ziel dieses Projektes ist es, ein allgemein verwendbares Werkzeug zu schaffen, mit dem politische Karten aus Geodaten von OpenStreetMap erstellt werden können, um sie für Wikipedia zu nutzen.
      </p>
		<h3>Mitwirkende</h3>
         Programmierung: <a href="http://toolserver.org/~stephankn/" target="_blank">Stephan Knauß</a> (<a href="mailto://stephankn@toolserver.org">stephankn@toolserver.org</a>)<br>
         Grundlegende Überarbeitung der Programmierung: Markus Weber<br>
         Ursprüngliche Idee für die Raucher-Nichtraucher-Karte: Markus Bärlocher<br>

Impressum: Markus Weber, Hohfederstraße 14, D-90489 Nürnberg<br>
Email: markus.weber ät gmx.<small></small>com, Telefon: +49 911 5819647<br>
Haftungshinweis: Trotz sorgfältiger Prüfung kann keine Haftung für die Inhalte
externer Links übernommen werden. Für den Inhalt von verlinkten Seiten sind ausschließlich
deren Betreiber verantwortlich.<br>

Kartengrundlage: Die Daten stammen von OpenStreetMap.org und unterliegen den dort festgelegten rechtlichen Bedingungen. Eine inhaltliche Gewähr wird nicht übernommen.
   </div>
   <noscript><div class="descriptionPopup"><h1>Sehr gut, Sie achten auf Sicherheit und haben Javascript deaktiviert!<br><br>
Zum Darstellen der Karte wird Javascript jedoch benötigt. Bitte aktivieren Sie Javascript für die betreffenden Domains.</h1>
</div></noscript>
	</body>
</html>