initial release
git-svn-id: http://svn.code.sf.net/p/staticmaplite/code@11 3c7674d3-d6c2-4d0e-87b7-95661b9333b9
This commit is contained in:
rac98
parent
f44c119b81
commit
83a0749006
270
wizzard/index.html
Normal file
270
wizzard/index.html
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<!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