detaches wizzard from staticmaplite renderer
This commit is contained in:
Gerhard Koch
parent
ef8d3df08b
commit
1c5a8859b5
@ -1,57 +0,0 @@
|
|||||||
/*
|
|
||||||
CSS based on template of Dandelion wiki engine by Radomir Dopieralski who released this
|
|
||||||
template under the terms of GNU GPL. http://dandelion.sheep.art.pl/
|
|
||||||
*/
|
|
||||||
|
|
||||||
html{font:96% sans-serif;color:#000;background:#f7f7f7;line-height:1.4;}
|
|
||||||
body{color:#333;}
|
|
||||||
#wrapper{margin:auto;width:60em;position:relative;}
|
|
||||||
#header{padding:0px 0px 7px 0px; height: 1em;}
|
|
||||||
#header h1 { float:left; width: 40%; }
|
|
||||||
#content{background:white;padding:1em;border:1px solid #e0d78a;outline:0.5em solid #fef4a4; margin:0.5em 0;padding:0 20px 20px 20px;min-height:20em;}
|
|
||||||
h1{margin-top:0px;}
|
|
||||||
h1,h2,h3,h4,h5,h6{letter-spacing:0.05em;color:#1474CA;font-weight:normal;}
|
|
||||||
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{text-decoration:none;}
|
|
||||||
a{color:#1474CA;text-decoration:none;}
|
|
||||||
a:visited{color:#1474CA;}
|
|
||||||
a.pending{color:#c174a0;}
|
|
||||||
a:hover{text-decoration:underline;}
|
|
||||||
a img{border:none;}
|
|
||||||
#buttons input, #buttons textarea{font-size:94%;border:1px solid #999;background:#fff;color:#666;outline:0.2em solid #eee;padding:0px;line-height:1.2;margin:0.5em;vertical-align:middle;}
|
|
||||||
input {padding: 2px 5px;}
|
|
||||||
textarea{display:block;margin:0.5em 0;width:100%;}
|
|
||||||
pre, textarea{outline:0.4em solid #eee;padding:0.5em;margin:0.5em;border:1px solid #e0d78a;background:#fef4a4;color:#644e22;}
|
|
||||||
hr{height:0;border:none;color:#fff;background:transparent;border-bottom:1px solid #ccc; margin:0.5em 0;}
|
|
||||||
#diff {outline:none;border:none;}
|
|
||||||
#diff ins{color:green;text-decoration:none;font-weight:bold;}
|
|
||||||
#diff del{color:red;text-decoration:line-through;}
|
|
||||||
#diff{background:#fff;line-height:1.25;padding:1em;white-space:pre-wrap;word-wrap:break-word; white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;width:97%;}
|
|
||||||
hr{margin:10px 0 10px 0;height:0px;overflow:hidden;border:0px;border-top:2px solid #ccc;}
|
|
||||||
.error{color:#F25A5A;font-weight:bold;}
|
|
||||||
form{display:inline;}
|
|
||||||
#contentTextarea{height:44em;}
|
|
||||||
#toc{margin:5px 0 5px 10px;padding:6px 5px 7px 0px;float:right;list-style:none;outline:0.4em solid #eee;background:#fef4a4;border:1px solid #e0d78a;}
|
|
||||||
#toc ul{list-style:none;padding:3px 0 3px 10px;}
|
|
||||||
#toc li{font-size:11px;padding-left:10px;}
|
|
||||||
#toc ul li{font-size:10px;}
|
|
||||||
#toc ul ul li{font-size:9px;}
|
|
||||||
#toc ul ul ul li{font-size:8px;}
|
|
||||||
#toc ul ul ul ul li{font-size:7px;}
|
|
||||||
.pageVersionsList{letter-spacing:0px;font-variant:normal;font-size:12px;}
|
|
||||||
#renameForm{float:left;}
|
|
||||||
.clear{clear:both;}
|
|
||||||
.tagList{padding:0.2em 0.4em 0.2em 0.4em;margin-top:0.5em;border:1px dashed #e0d78a;background:#fef4a4;color:#644e22;}
|
|
||||||
.tagCloud{float:right;width:200px;padding:0.5em;margin:1em;border:1px dashed #e0d78a;background:#fef4a4;color:#644e22;}
|
|
||||||
#fileTable{border-collapse:collapse;}
|
|
||||||
#fileTable td{border:1px solid #FEF4A4;padding:2px 6px 2px 6px;}
|
|
||||||
h2 span.par-edit, h3 span.par-edit, h4 span.par-edit, h5 span.par-edit, h6 span.par-edit {display:none;}
|
|
||||||
h2:hover span.par-edit, h3:hover span.par-edit, h4:hover span.par-edit, h5:hover span.par-edit, h6:hover span.par-edit {display:inline;font-size:x-small;}
|
|
||||||
.comment-item { border:1px solid #999;color:#666;outline:0.2em solid #eee; }
|
|
||||||
.resizeTextareaDiv { margin-top: 5px;}
|
|
||||||
a.toolbarTextareaItem { padding-right: 10px; }
|
|
||||||
a.external:after { content: "\2197";}
|
|
||||||
.smallmap {width: 500px; height: 350px; border:1px solid #ccc;outline:0.25em solid #eee;padding:0.25em;margin:0.25em 0 0.25em 0.5em;background:#fff; float:left;}
|
|
||||||
#buttons {float: left; width: 250px; margin-left: 20px;}
|
|
||||||
.droppable-active, droppable-hover {border: solid darkblue 1px}
|
|
||||||
h3 {margin-bottom:0}
|
|
||||||
.draggable {z-index:9999}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
@ -1,270 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
||||||
<title>simpleMapWizzard</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/main.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="js/openlayers/theme/default/style.css" type="text/css" />
|
|
||||||
|
|
||||||
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
|
|
||||||
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
|
|
||||||
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
|
|
||||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var map, layer;
|
|
||||||
var perma = "";
|
|
||||||
|
|
||||||
|
|
||||||
/* init OL, map, dragFeature */
|
|
||||||
function initOpenLayers() {
|
|
||||||
map = new OpenLayers.Map('map', {
|
|
||||||
controls: [
|
|
||||||
new OpenLayers.Control.Attribution(),
|
|
||||||
new OpenLayers.Control.MouseDefaults(),
|
|
||||||
new OpenLayers.Control.PanZoomBar()]
|
|
||||||
});
|
|
||||||
markers = new OpenLayers.Layer.Vector(
|
|
||||||
"Markers",
|
|
||||||
{
|
|
||||||
styleMap: new OpenLayers.StyleMap({
|
|
||||||
externalGraphic: "js/openlayers/img/marker-gold.png",
|
|
||||||
backgroundGraphic: "../images/marker_shadow.png",
|
|
||||||
backgroundXOffset: 0,
|
|
||||||
backgroundYOffset: -7,
|
|
||||||
graphicZIndex: 10,
|
|
||||||
backgroundGraphicZIndex: 11,
|
|
||||||
pointRadius: 10
|
|
||||||
}),
|
|
||||||
rendererOptions: {yOrdering: true}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
|
|
||||||
displayOutsideMaxExtent: true,
|
|
||||||
wrapDateLine: true
|
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer(mapnik);
|
|
||||||
|
|
||||||
osma = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
|
|
||||||
map.addLayer(osma);
|
|
||||||
|
|
||||||
cylce = new OpenLayers.Layer.OSM.CycleMap("OpenCycleMap");
|
|
||||||
map.addLayer(cylce);
|
|
||||||
|
|
||||||
piste = new OpenLayers.Layer.OSM("openpistemap","http://openpistemap.org/tiles/contours/${z}/${x}/${y}.png");
|
|
||||||
map.addLayer(piste);
|
|
||||||
|
|
||||||
topo = new OpenLayers.Layer.OSM("topo.geofabrik.trails","http://topo.geofabrik.de/trails/${z}/${x}/${y}.png");
|
|
||||||
map.addLayer(topo);
|
|
||||||
|
|
||||||
|
|
||||||
center = new OpenLayers.LonLat(-50,40).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
|
|
||||||
map.setCenter (center, 2);
|
|
||||||
|
|
||||||
map.events.register( 'moveend', this, makeStaticCodeSnip);
|
|
||||||
|
|
||||||
map.addLayer(markers);
|
|
||||||
|
|
||||||
var dragFeature = new OpenLayers.Control.DragFeature(markers);
|
|
||||||
dragFeature.onComplete = makeStaticCodeSnip;
|
|
||||||
dragFeature.onDrag = makeStaticCodeSnip;
|
|
||||||
map.addControl(dragFeature);
|
|
||||||
dragFeature.activate();
|
|
||||||
|
|
||||||
layerswitcher = new OpenLayers.Control.LayerSwitcher()
|
|
||||||
map.addControl(layerswitcher);
|
|
||||||
|
|
||||||
map.events.register("changebaselayer", map, mapTypeChanged);
|
|
||||||
map.maptype = 'mapnik';
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapTypeChanged(){
|
|
||||||
switch(map.baseLayer.name){
|
|
||||||
case "Mapnik" : map.maptype = 'mapnik'; break;
|
|
||||||
case "openpistemap" : map.maptype = 'piste'; break;
|
|
||||||
case "Osmarender" : map.maptype = 'osmarenderer'; break;
|
|
||||||
case "OpenCycleMap" : map.maptype = 'cycle'; break;
|
|
||||||
case "topo.geofabrik.trails" : map.maptype = 'topo'; break;
|
|
||||||
default: map.maptype = map.baseLayer.name;
|
|
||||||
}
|
|
||||||
makeStaticCodeSnip();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* function for adding markers by dragging and click on image */
|
|
||||||
function mark(markerImg){
|
|
||||||
markCenter($(markerImg).attr('rel'), $(markerImg).attr('src'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function markCenter(rel,img){
|
|
||||||
id = rel.split('|')[0];
|
|
||||||
width = rel.split('|')[1];
|
|
||||||
height = rel.split('|')[2];
|
|
||||||
offsetx = rel.split('|')[3];
|
|
||||||
offsety = rel.split('|')[4];
|
|
||||||
markAtPosition(id,img, $('#map').height()/2, $('#map').width()/2, width, height, offsetx, offsety);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function markAtPosition(id,img, y, x, width, height, offsetx, offsety){
|
|
||||||
var features = [];
|
|
||||||
lonLat = map.getCenter();
|
|
||||||
center = map.getViewPortPxFromLonLat(map.getCenter());
|
|
||||||
pixel = new OpenLayers.Pixel(center.x + x-$('#map').width()/2, center.y + y-$('#map').height()/2);
|
|
||||||
lonLat = map.getLonLatFromViewPortPx(pixel);
|
|
||||||
|
|
||||||
vector = new OpenLayers.Feature.Vector(
|
|
||||||
new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
|
|
||||||
);
|
|
||||||
vector.attributes.img = id;
|
|
||||||
vector.style = {
|
|
||||||
externalGraphic: img,
|
|
||||||
graphicWidth:parseInt(width),
|
|
||||||
graphicHeight:parseInt(height),
|
|
||||||
graphicXOffset:parseInt(offsetx),
|
|
||||||
graphicYOffset:parseInt(offsety),
|
|
||||||
backgroundGraphic: (id.substr(0,5)=='light'?'':"../images/marker_shadow.png"),
|
|
||||||
backgroundXOffset:0,
|
|
||||||
backgroundYOffset:parseInt(offsety)-2,
|
|
||||||
graphicZIndex: 11,
|
|
||||||
backgroundGraphicZIndex: 10,
|
|
||||||
pointRadius: 10
|
|
||||||
}
|
|
||||||
features.push(vector);
|
|
||||||
markers.addFeatures(features);
|
|
||||||
makeStaticCodeSnip();
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeStaticCodeSnip(){
|
|
||||||
perma = '<img src="';
|
|
||||||
perma += getStaticMapImageUrl();
|
|
||||||
perma += "\" />"
|
|
||||||
$('#perma').val(perma);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStaticMapImageUrl(){
|
|
||||||
output = 'staticmap.php?';
|
|
||||||
if(map.maptype != 'mapnik') output += "maptype="+map.maptype+"&";
|
|
||||||
mapCenter = map.getCenter();
|
|
||||||
centerLonLat = mapCenter.transform(map.getProjectionObject(),new OpenLayers.Projection("EPSG:4326"));
|
|
||||||
output += "center="+centerLonLat.lat+","+centerLonLat.lon;
|
|
||||||
output += "&zoom="+map.zoom;
|
|
||||||
output += "&size="+$('#width').val()+"x"+$('#height').val();
|
|
||||||
|
|
||||||
if(markers.features.length){
|
|
||||||
output += "&markers="
|
|
||||||
for(i=0; i<markers.features.length; i++){
|
|
||||||
pos = markers.features[i].geometry.getCentroid();
|
|
||||||
lonLat = pos.transform(map.getProjectionObject(),new OpenLayers.Projection("EPSG:4326"));
|
|
||||||
if(i>0) output += '|';
|
|
||||||
output += lonLat.y+","+lonLat.x+","+markers.features[i].attributes.img
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showStaticInNewWindow(){
|
|
||||||
makeStaticCodeSnip();
|
|
||||||
var newWindow = window.open("../"+getStaticMapImageUrl(), '_blank');
|
|
||||||
newWindow.focus();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* drag + drop */
|
|
||||||
$(document).ready(function(){
|
|
||||||
|
|
||||||
$('.draggable').draggable(
|
|
||||||
{ helper: 'clone'}
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
$(".drop").droppable({
|
|
||||||
accept: ".draggable",
|
|
||||||
activeClass: 'droppable-active',
|
|
||||||
hoverClass: 'droppable-hover',
|
|
||||||
drop: function(ev, ui) {
|
|
||||||
mapOffset = $('#map').offset();
|
|
||||||
id = ui.draggable.attr('rel').split('|')[0];
|
|
||||||
width = parseInt(ui.draggable.attr('rel').split('|')[1]);
|
|
||||||
height = parseInt(ui.draggable.attr('rel').split('|')[2]);
|
|
||||||
offsetx = parseInt(ui.draggable.attr('rel').split('|')[3]);
|
|
||||||
offsety = parseInt(ui.draggable.attr('rel').split('|')[4]);
|
|
||||||
markAtPosition(id, ui.draggable.attr('src'), ui.offset.top-mapOffset.top-offsety, ui.offset.left-mapOffset.left-offsetx, width, height, offsetx, offsety);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
initOpenLayers();
|
|
||||||
makeStaticCodeSnip();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="wrapper">
|
|
||||||
<div id="header">
|
|
||||||
</div>
|
|
||||||
<div id="content" style="background:url(images/wizzard-bg.jpg) 50px 0px no-repeat;">
|
|
||||||
|
|
||||||
<div class="par-div">
|
|
||||||
<h2 style="font-size:2em; margin-bottom:0">
|
|
||||||
simple map wizzard
|
|
||||||
</h2>
|
|
||||||
<ol>
|
|
||||||
<li>navigate to your area of interest</li>
|
|
||||||
<li>place some markers and drag them to their desired position (optional)</li>
|
|
||||||
<li>copy image tag or press "show map in new window"</li>
|
|
||||||
<li>done! </li>
|
|
||||||
</ol>
|
|
||||||
<hr />
|
|
||||||
<div id="map" class="smallmap drop" style="-moz-user-select: none"></div>
|
|
||||||
<div id="buttons" style="-moz-user-select: none">
|
|
||||||
<h3>makers</h3>
|
|
||||||
<input style="margin-left:0;" type="button" onclick="markers.removeFeatures(markers.features); makeStaticCodeSnip();" value="clear all markers" />
|
|
||||||
<h4 style="margin:0">click or drag to add</h4>
|
|
||||||
<img style="margin-left:0;" class="draggable" src="../images/markers/lightblue1.png" onclick="mark(this);" rel="lightblue1|17|19|-2|-20" />
|
|
||||||
<img class="draggable" src="../images/markers/lightblue2.png" onclick="mark(this);" rel="lightblue2|17|19|0|-19" />
|
|
||||||
<img class="draggable" src="../images/markers/lightblue3.png" onclick="mark(this);" rel="lightblue3|17|19|0|-19" />
|
|
||||||
<img class="draggable" src="../images/markers/lightblue4.png" onclick="mark(this);" rel="lightblue4|17|19|0|-19" />
|
|
||||||
<br />
|
|
||||||
<img class="draggable" style="margin-left:0;" src="../images/markers/ol-marker.png" onclick="mark(this);" rel="ol-marker|21|25|-10|-25" />
|
|
||||||
<img class="draggable" src="../images/markers/ol-marker-gold.png" onclick="mark(this);" rel="ol-marker-gold|21|25|-10|-25" />
|
|
||||||
<img class="draggable" src="../images/markers/ol-marker-blue.png" onclick="mark(this);" rel="ol-marker-blue|21|25|-10|-25" />
|
|
||||||
<img class="draggable" src="../images/markers/ol-marker-green.png" onclick="mark(this);" rel="ol-marker-green|21|25|-10|-25" />
|
|
||||||
<br />
|
|
||||||
<img class="draggable" style="margin-left:0;" src="../images/markers/ltblu-pushpin.png" onclick="mark(this);" rel="ltblu-pushpin|32|32|-11|-33" />
|
|
||||||
<img class="draggable" src="../images/markers/pink-pushpin.png" onclick="mark(this);" rel="pink-pushpin|32|32|-11|-33" />
|
|
||||||
<img class="draggable" src="../images/markers/red-pushpin.png" onclick="mark(this);" rel="red-pushpin|32|32|-11|-33" />
|
|
||||||
<img class="draggable" src="../images/markers/ylw-pushpin.png" onclick="mark(this);" rel="ylw-pushpin|32|32|-11|-33" />
|
|
||||||
<!-- <h3>address</h3>
|
|
||||||
<input type="text" value="Mountain View, CA" /><input type="button" onclick="lookup(this.value);" value="look up" />
|
|
||||||
--> <h3>map size</h3>
|
|
||||||
<input style="margin-left:0;" type="text" name="width" id="width" value="500" size="5" onchange="makeStaticCodeSnip()" />x
|
|
||||||
<input type="text" name="height" id="height" value="350" size="5" onchange="makeStaticCodeSnip()" />px
|
|
||||||
<h3>show map</h3>
|
|
||||||
<input style="margin-left:0; background: #eee; padding: 5px 10px" type="button" onclick="showStaticInNewWindow();" value="show map in new window" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br style="clear: both" />
|
|
||||||
<hr />
|
|
||||||
<div class="par-div">
|
|
||||||
|
|
||||||
<p>
|
|
||||||
To create a corresponding static map, simply use following <img> tag:
|
|
||||||
</p>
|
|
||||||
<textarea id="perma" name="perma" style="width: 700px" rows="3"></textarea>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
<div style="text-align:center;padding:7px;color:#ccc">
|
|
||||||
sponsored by <a href="http://dfacts.de" style="color:#ccc">dFacts Network</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user