Skip to content

Instantly share code, notes, and snippets.

@raphink

raphink/index.html

Last active August 29, 2015 14:04
Show Gist options
  • Save raphink/bc858b294f3391e62810 to your computer and use it in GitHub Desktop.
Save raphink/bc858b294f3391e62810 to your computer and use it in GitHub Desktop.
Download ZIP
Venir depuis la gare SNCF
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Venir depuis la gare</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en" />
<meta name="generator" content="Easymap" />
<link rel="stylesheet" type="text/css" href="map.css" />
<script type="text/javascript" src="openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var showPopupOnHover = false;
text = new Array("Show map information","Hide map information");
function drawmap() {
OpenLayers.Lang.setCode('de');
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.Attribution()],
maxExtent:
new OpenLayers.Bounds(-20037508.34,-20037508.34,
20037508.34, 20037508.34),
numZoomLevels: 18,
maxResolution: 156543,
units: 'meters'
});
// Add more controls..
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.PanZoomBar());
// Position and zoom of the map
lon = 9;
lat = 49;
zoom = 6;
checkForPermalink();
// Add layers
layer_markers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: false });
layer_vectors = new OpenLayers.Layer.Vector("Drawings", { displayInLayerSwitcher: false } );map.addLayer(layer_vectors);map.addLayer(layer_markers)
layers = new Array();
layer_layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layer_layerMapnik)
layers.push(new Array(layer_layerMapnik,'layer_layerMapnik'));
setLayer(0);
// Jump to the right position and zoom..
jumpTo(lon,lat,zoom);
// Add used maker icons..
icons = new Array();
icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1');
icons[10] = new Array('http://osmtools.de/easymap/images/haus_red.png','20','24','0.5','0.5');
// Add markers
addMarker(layer_markers,5.9195634127886,45.571327163545,"<b>Gare SNCF</b><p />Gare SNCF",false,0);
addMarker(layer_markers,5.9206751884249,45.566940913773,"<b>2 rue Favre</b><p />Calvary Chapel<br />c/o famille PINSON<br />2 rue Favre<br />3e étage<br />Sonnette #6",false,10);
geometries = new Array();geometries.push(drawLine([[5.9195701183104,45.571304632312],[5.9195647538926,45.571071809076],[5.9197042287614,45.570613670212],[5.9194896520403,45.570418396773],[5.9198651613023,45.569810040555],[5.9195218385483,45.569073995823],[5.9192643464829,45.568781077381],[5.9190926851059,45.567797160662],[5.9205732644819,45.566858292763]],{strokeColor:"#0000FF",strokeWidth: 3,fillColor: "#0000FF",fillOpacity: 0.4}));
// Nochmal was..
jumpTo(lon, lat, zoom);
checkUtilVersion(4);
}
//]]>
</script>
</head>
<body onload="drawmap();">
<div id="descriptionToggle" onclick="toggleInfo()">Show map information</div>
<div id="description" class="hide">Comment venir depuis la gare SNCF de Chambéry - Challes les Eaux</div>
<div id="map"></div>
<div class="hide"><p>Wenn Sie diesen Text sehen, dann haben Sie die HTML-Datei ohne die zusätzlich benötigten Dateien geöffnet. Wenn Sie versucht haben die Karte herunterzuladen, wurde das Downloadfenster möglicherweise aus irgendeinem Grund nicht geöffnet. Speichern Sie in diesem Fall einfach diese Seite ab.</p><p>If you see this text, you opened the map HTML-File without the necessary files. If you tried to download the map, the download dialog may not have opened for some reason. In this case just save this page.</p></div>
</body>
</html>
Raw
map.css
@charset "utf-8";
html,body {
background-color: #FFF;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
overflow: hidden;
color: #000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #000011;
text-decoration: underline;
}
#map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 1em;
color: #000;
}
.olFramedCloudPopupContent {
font-size: 0.8em;
font-family: Verdana, sans-serif;
}
#descriptionToggle {
position: absolute;
font-size: 1em;
z-index: 10000;
left: 80px;
height: 14px;
border-left: 1px solid #000040;
border-bottom: 1px solid #000040;
border-right: 1px solid #000040;
padding: 2px 10px;
margin-right: 200px;
background-color: #EEE;
font-size: 12px;
cursor: default;
opacity: 0.7;
}
#descriptionToggle:hover {
background-color: #FFF;
opacity: 1;
}
#description {
position: absolute;
z-index: 10000;
left: 80px;
top: 18px;
border: 1px solid #000040;
padding: 10px 10px;
margin-right: 200px;
background-color: #FFF;
font-size: 12px;
}
#attribution {
bottom: 0;
left: 0;
padding: 5px 8px 1px 8px;
position: absolute;
font-size: 11px;
font-style: italic;
z-index: 1000;
}
#layer {
position: absolute;
top: 60px;
right: 10px;
z-index: 10002;
}
#layer > div {
border: 1px solid #000;
background-color: #FFF;
padding: 4px 5px;
font-size: 0.7em;
cursor: default;
margin-bottom: 4px;
}
#layer div:hover {
}
#layer .active {
background-color: #EEF;
}
.hide { display: none; }
Raw
util.js
/*
* Einige Funktionen die ursprünglich von http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden stammen,
* teilweise modifiziert
*
* Some functions from the example at http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden, some
* slightly modified
*/
function jumpTo(lon, lat, zoom) {
var x = Lon2Merc(lon);
var y = Lat2Merc(lat);
map.setCenter(new OpenLayers.LonLat(x, y), zoom);
return false;
}
function Lon2Merc(lon) {
return 20037508.34 * lon / 180;
}
function Lat2Merc(lat) {
var PI = 3.14159265358979323846;
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
return 20037508.34 * lat / 180;
}
function addMarker(layer, lon, lat, popupContentHTML, showPopupOnLoad, iconId) {
// Koordinaten in LonLat umwandeln
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
// Feature erstellen und konfigurieren (Popup und Marker)
var feature = new OpenLayers.Feature(layer, ll);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 120) } );
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "auto";
feature.data.icon = makeIcon(iconId);
// Marker erstellen
var marker = feature.createMarker();
/*
* Handler Funktionen für die Mouse-Events
*/
// Click
var markerClick = function(evt) {
// Wenn das Popup nicht sichtbar ist, dann kann es nicht fest sichtbar sein
if (!this.popup.visible())
this.popup.clicked = false;
if (this.popup.clicked == true) {
this.popup.clicked = false;
this.popup.hide();
}
else {
this.popup.clicked = true;
if (!this.popup.visible())
this.popup.show();
}
OpenLayers.Event.stop(evt);
};
// Hover
var markerHover = function(evt) {
// Wenn das Popup nicht sichtbar ist, dann kann es nicht fest sichtbar sein
if (!this.popup.visible())
this.popup.clicked = false;
if (!this.popup.clicked)
this.popup.show();
OpenLayers.Event.stop(evt);
}
// Hover End
var markerHoverEnd = function(evt) {
if (!this.popup.clicked) {
this.popup.hide();
}
OpenLayers.Event.stop(evt);
}
// Events auf den Marker registrieren und als Objekt das Feature übergeben
marker.events.register("mousedown", feature, markerClick);
if (showPopupOnHover) {
marker.events.register("mouseover", feature, markerHover);
marker.events.register("mouseout", feature, markerHoverEnd);
}
// Erstellten Marker der Ebene hinzufügen
layer.addMarker(marker);
// Popup erstellen, der Karte hinzufügen und anzeigen, falls gewünscht
map.addPopup(feature.createPopup(feature.closeBox));
if (showPopupOnLoad != true) {
// Wenn das Popup nicht angezeigt werden soll, verstecken und auf 'nicht angeklickt' setzen
feature.popup.hide();
feature.popup.clicked = false;
} else {
// Das Popup wird direkt angezeigt und zwar solange bis man es explizit schließt
feature.popup.clicked = true;
}
return marker;
}
/*
*
* Creates a new marker icon
*
* using the icons-array (defined in the html-file)
*
* index
* 0 address to the image
* 1 width of the image
* 2 height
* 3 factor by which the image should be offset horizontally
* 4 factor by which the image should be offset vertically
*
* please see the icon array itself for examples of values
*/
function makeIcon(iconId) {
var size = new OpenLayers.Size(icons[iconId][1],icons[iconId][2]);
var offset = new OpenLayers.Pixel(-(size.w*icons[iconId][3]), -(size.h*icons[iconId][4]));
var icon = new OpenLayers.Icon(icons[iconId][0],size,offset);
return icon;
}
function getCycleTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit)
{
return null;
}
else
{
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
/*
* Funktion zum Zerlegen der URL um die Parameter zu erhalten (für den Permalink)
* Splits the URL in its parameters
*/
function get_parameters() {
// erzeugt für jeden in der url übergebenen parameter einen wert
// bsp: x.htm?nachname=Munch&vorname=Alex&bildfile=wasserfall.jpg erzeugt
// variable nachname mit wert Munch und
// variable vorname mit wert Alex
// variable bildfile mit wert wasserfall.jpg
var hier = document.URL;
var parameterzeile = hier.substr((hier.indexOf("?")+1));
var trennpos;
var endpos;
var paramname;
var paramwert;
var parameters = new Object();
while (parameterzeile != "") {
trennpos = parameterzeile.indexOf("=");
endpos = parameterzeile.indexOf("&");
if (endpos < 0) { endpos = 500000; }
paramname = parameterzeile.substr(0,trennpos);
paramwert = parameterzeile.substring(trennpos+1,endpos);
parameters[paramname] = paramwert;
//eval (paramname + " = \"" + paramwert + "\"");
parameterzeile = parameterzeile.substr(endpos+1);
}
return parameters;
}
/*
* Wie der Name schon sagt ebenfalls für den Permalink, überprüft ob die Parameter in der URL gefunden wurden und überschreibt
* sie gegebenenfalls.
* Checks the url for parameters of the permalink and overwrites the default values if necessary.
*/
function checkForPermalink() {
var parameters = get_parameters();
if (parameters['zoom'] != null)
zoom = parseInt(parameters['zoom']);
if (parameters['lat'] != null)
lat = parseFloat(parameters['lat']);
if (parameters['lon'] != null)
lon = parseFloat(parameters['lon']);
}
/*
* Debugging Funktion
*/
function var_dump(obj) {
if(typeof obj == "object") {
return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
} else {
return "Type: "+typeof(obj)+"\nValue: "+obj;
}
}//end function var_dump
/*
* Für den Layer-Switcher mit Buttons
*/
function setLayer(id) {
if (document.getElementById("layer") != null) {
for (var i=0;i<layers.length;++i)
document.getElementById(layers[i][1]).className = "";
}
varName = layers[id][0];
name = layers[id][1];
map.setBaseLayer(varName);
if (document.getElementById("layer") != null)
document.getElementById(name).className = "active";
}
/*
* Schaltet die Beschreibung der Karte an- und aus.
* Toggles the description of the map.
*/
function toggleInfo() {
var state = document.getElementById('description').className;
if (state == 'hide') {
// Info anzeigen
document.getElementById('description').className = '';
document.getElementById('descriptionToggle').innerHTML = text[1];
}
else {
// Info verstecken
document.getElementById('description').className = 'hide';
document.getElementById('descriptionToggle').innerHTML = text[0];
}
}
/*
* Zeichnet verschiedene Arten von geometrischen Objekten
* Draws different kinds of geometric objects
*/
function drawLine(coordinates,style) {
var linePoints = createPointsArrayFromCoordinates(coordinates);
var line = new OpenLayers.Geometry.LineString(linePoints);
var vector = new OpenLayers.Feature.Vector(line,null,style);
layer_vectors.addFeatures(vector);
return vector;
}
function drawPolygon(coordinates,style) {
var points = createPointsArrayFromCoordinates(coordinates);
var linearRing = new OpenLayers.Geometry.LinearRing(points);
var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
var vector = new OpenLayers.Feature.Vector(polygon,null,style);
layer_vectors.addFeatures(vector);
return vector;
}
function createPointsArrayFromCoordinates(coordinates) {
var points = new Array();
for (var i=0;i<coordinates.length;++i) {
var lonlat = new OpenLayers.LonLat(coordinates[i][0],coordinates[i][1]).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"))
points.push(new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat))
}
return points;
}
/*
* Gibt eine Fehlermeldung aus, wenn die Version der JavaScript Datei nicht mit der erforderlichen übereinstimmt
* Outputs an error if the version of the JavaScript-File does not match the required one
*/
function checkUtilVersion(version) {
var thisFileVersion = 4;
if (version != thisFileVersion) {
alert("map.html and util.js versions do not match.\n\nPlease reload the page using your browsers 'reload' feature.\n\nIf the problem persists and you are the owner of this site, you may need to update the map's files.");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment