javascript - Onclick location, using location in function -
i'm making tile map 2 layers: map files stored on hdd, second osm. i've made gdal2tiles.py how looks: two layers using openlayers
i want add onclick popup show link original tile in bigger resolution. idea attach .csv file following structure:
[latitude],[longitude],[image index] my function in python parses file , gets image index. here it:
def find_pic(lat, lng): my_file = open('log wynikowy epsg 3857.csv', 'r') list_of_lines = my_file.readlines() print len(list_of_lines) line in list_of_lines: if (line.rstrip()).split(",")[0] == lat , (line.rstrip()).split(',')[1] == lng: return line.rstrip().split(',')[2] then tried rewrite in javascript:
function find_pic(lat, lng) { fh = fopen(getscriptpath('log wynikowy epsg 3857.csv'), 0); fh_length = flength(fh); var alltext = fread(fh, fh_length); var flddata = []; (x = 0; x < alltextlines.length; x++) { flddata = alltextlines[x].split(','); } (i = 0; < flddata.length.length; i++) { if (alltextlines[i].split(',')[0] == lat && alltextlines[i].split(',')[1] == lng) { var result = alltextlines[i].split(',')[2]; } } var pic_link = "/data/" + result + ".jpg"; return pic_link; } in html file, copy-paste popup location example , try implement function. here whole 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" <head> <title>ortofotomapa</title> <meta http-equiv='imagetoolbar' content='no'/> <style type="text/css"> v\:* {behavior:url(#default#vml);} html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'lucida grande',geneva,arial,verdana,sans-serif; } body { margin: 10px; background: black; } h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; } #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; } #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;} #map { height: 95%; border: 1px solid #888; } .olimageloaderror { display: none; } .olcontrollayerswitcher .layersdiv { border-radius: 10px 0 0 10px; } </style> <script src='http://maps.google.com/maps/api/js?sensor=false&v=3.7'></script> <script src="http://www.openlayers.org/api/2.12/openlayers.js"></script> <script> var map; var mapbounds = new openlayers.bounds( 20.9278783732, 52.0107452018, 20.943887533, 52.0184497743); var mapminzoom = 14; var mapmaxzoom = 20; var emptytileurl = "http://www.maptiler.org/img/none.png"; openlayers.image_reload_attempts = 3; function init(){ var options = { div: "map", controls: [], projection: "epsg:900913", displayprojection: new openlayers.projection("epsg:4326"), numzoomlevels: 20 }; map = new openlayers.map(options); // create osm layer var osm = new openlayers.layer.osm("openstreetmap"); // create tms overlay layer var tmsoverlay = new openlayers.layer.tms("tms overlay", "", { serviceversion: '.', layername: '.', alpha: true, type: 'png', isbaselayer: false, geturl: geturl }); if (openlayers.util.alphahack() == false) { tmsoverlay.setopacity(1.0); } map.addlayers([osm, tmsoverlay]); var switchercontrol = new openlayers.control.layerswitcher(); map.addcontrol(switchercontrol); switchercontrol.maximizecontrol(); map.zoomtoextent(mapbounds.transform(map.displayprojection, map.projection)); map.addcontrols([//new openlayers.control.panzoombar(), new openlayers.control.navigation(), new openlayers.control.mouseposition({ numdigits: 10}), //new openlayers.control.argparser(), new openlayers.control.attribution()]); } function geturl(bounds) { bounds = this.adjustbounds(bounds); var res = this.getserverresolution(); var x = math.round((bounds.left - this.tileorigin.lon) / (res * this.tilesize.w)); var y = math.round((bounds.bottom - this.tileorigin.lat) / (res * this.tilesize.h)); var z = this.getserverzoom(); if (this.map.baselayer.class_name === 'openlayers.layer.bing') { z+=1; } var path = this.serviceversion + "/" + this.layername + "/" + z + "/" + x + "/" + y + "." + this.type; var url = this.url; if (openlayers.util.isarray(url)) { url = this.selecturl(path, url); } if (mapbounds.intersectsbounds(bounds) && (z >= mapminzoom) && (z <= mapmaxzoom)) { return url + path; } else { return emptytileurl; } } function getwindowheight() { if (self.innerheight) return self.innerheight; if (document.documentelement && document.documentelement.clientheight) return document.documentelement.clientheight; if (document.body) return document.body.clientheight; return 0; } function getwindowwidth() { if (self.innerwidth) return self.innerwidth; if (document.documentelement && document.documentelement.clientwidth) return document.documentelement.clientwidth; if (document.body) return document.body.clientwidth; return 0; } function resize() { var map = document.getelementbyid("map"); var header = document.getelementbyid("header"); var subheader = document.getelementbyid("subheader"); map.style.height = (getwindowheight()-80) + "px"; map.style.width = (getwindowwidth()-20) + "px"; header.style.width = (getwindowwidth()-20) + "px"; subheader.style.width = (getwindowwidth()-20) + "px"; if (map.updatesize) { map.updatesize(); }; } function find_pic(lat, lng){ fh = fopen(getscriptpath('log wynikowy epsg 3857.csv'), 0); fh_length = flength(fh); var alltext = fread(fh, fh_length); var flddata =[]; (x=0; x<alltextlines.length; x++){ flddata = alltextlines[x].split(','); } (i=0; i<flddata.length.length; i++){ if (alltextlines[i].split(',')[0] == lat && alltextlines[i].split(',')[1] == lng){ var result = alltextlines[i].split(',')[2]; } } var link_pic = "/data/" + result + ".jpg"; return link_pic; } var overlay = new ol.overlay({ element: container, autopan: true, autopananimation: { duration: 250 } })); closer.onclick = function() { overlay.setposition(undefined); closer.blur(); return false; }; map.on('singleclick', function(evt) { var coordinate = evt.coordinate; var link_pic = find_pic(coordinate[0],coordinate[1]); content.innerhtml = '<p>link oryginalnego zdjecia: <a href=link_pic>klik</a></p>'; overlay.setposition(coordinate); }); onresize=function(){ resize(); }; var element = document.getelementbyid('popup'); </script> </head> <body onload="init()"> <div id="header"><h1>ortofotomapa</h1></div> <div id="subheader">generated <a href="http://www.maptiler.org/">maptiler</a>/<a href="http://www.klokan.cz/projects/gdal2tiles/">gdal2tiles</a>, copyright © 2008 <a href="http://www.klokan.cz/">klokan petr pridal</a>, <a href="http://www.gdal.org/">gdal</a> & <a href="http://www.osgeo.org/">osgeo</a> <a href="http://code.google.com/soc/">gsoc</a> <!-- please, let note author , project somewhere on website, or @ least in comment in html. thank --> </div> <div id="map"></div> <script type="text/javascript" >resize()</script> </body> </html> edit:after this, page black. want have onclick popup, contain link big resolution photo.
Comments
Post a Comment