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