trevor1940
asked on
Javascript OpenLayers 2 map Markers
Hi
Although I've moved forward I'm Using the https://www.experts-exchange.com/questions/29053802/Javascript-Binding-data-after-clicking-OpenLayers-2-map.html as a start point I have a couple of further questions
1 Why isn't the icons / markers blue I've tried using relative path and absolute but the marker stays the default red
My point is I can't change the marker.
2 how do I ensure only 1 popup box is open at once
The PHP
Although I've moved forward I'm Using the https://www.experts-exchange.com/questions/29053802/Javascript-Binding-data-after-clicking-OpenLayers-2-map.html as a start point I have a couple of further questions
1 Why isn't the icons / markers blue I've tried using relative path and absolute but the marker stays the default red
My point is I can't change the marker.
2 how do I ensure only 1 popup box is open at once
<!doctype html>
<html>
<head>
<title>OpenLayers Click Event Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head>
<body onload="init()">
<div class="wrapper">
<header>
<div class="container">
<h1 >OpenLayers Click Event popup</h1>
</div>
</header>
<div class="container">
<div id="mapdiv" style="width: 800px;height: 500px " ></div>
<h2>Custom Data for clicked item</h2>
<pre id="result"></pre>
</div>
<script src="https://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
//Set up a click handler
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
//A click happened!
var lonlat = map.getLonLatFromViewPortPx(e.xy);
GetPoints(lonlat.lon,lonlat.lat); // make a reusable funtion actual app has manual search
}
});
function GetPoints(Long, Lat){
alert("long " + Long + " Lat " + Lat );
$.ajax({
url: 't2672.php',
type: 'POST',
dataType: 'JSON'
}).then(function(resp) {
markers.clearMarkers();
for(var i = 0; i < resp.markers.length; i++) {
var curnt = resp.markers[i];
var mkr = new OpenLayers.Marker(new OpenLayers.LonLat(curnt.lon, curnt.lat));
mkr.custData = curnt.data;
mkr.events.register("click", mkr, function(e,i) {
$('#result').html(JSON.stringify(this.custData));
// alert(this.custData.item1);
popup = new OpenLayers.Popup.FramedCloud("chicken",
this.lonlat,
new OpenLayers.Size(200, 200),
"<h2>example popup</h2><p>" + this.custData.item2 + "</p>",
null, true);
map.addPopup(popup);
});
markers.addMarker(mkr, Blueicon.clone());
}
}).fail(function(err) {
console.log('error');
console.log(err);
});
}
</script>
<script>
var map;
var markers;
// var icon;
var Blueicon;
function init(){
map = new OpenLayers.Map('mapdiv');
markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
// icon = new OpenLayers.Icon('img/marker.png', size, offset);
Blueicon = new OpenLayers.Icon('http://openlayers.org/api/img/marker-blue.png', size, offset);
map.addLayer(new OpenLayers.Layer.OSM());
map.zoomToMaxExtent();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}
</script>
</div>
</body>
</html>
The PHP
<?php
$data = new stdClass;
$markers = array (
array(-9509989.3098047, 4344069.1908984),
array(-665307.89410156, 2778638.8518359),
array(-743579.41105469, 7044436.5257812),
array(743579.41105469, 6026906.8053906),
array(-5087648.6019531, 8962088.6911328),
array(8649002.6233203, 1995923.6823047),
array(11466777.233633, 7553201.3859766)
);
$data->markers = array();
$data->markers[] = newMarker($markers[rand(0,6)], rand(1,100), 'random text' . rand(900,1000));
$data->markers[] = newMarker($markers[rand(0,6)], rand(200,300), 'random text' . rand(800,900));
function newMarker($latlon, $item1, $item2)
{
$marker = new stdClass;
$marker->lat = $latlon[1];
$marker->lon = $latlon[0];
$marker->data = new stdClass;
$marker->data->item1 = $item1;
$marker->data->item2 = $item2;
return $marker;
}
die(json_encode($data));
is this the output of php?
var data = {
"markers": [{
"lat": 7553201.3859766,
"lon": 11466777.233633,
"data": {
"item1": 48,
"item2": "random text988"
}
}, {
"lat": 1995923.6823047,
"lon": 8649002.6233203,
"data": {
"item1": 241,
"item2": "random text856"
}
}]
};
I made a demo, if anyone wants to play with it...
https://jsfiddle.net/7oznx9px/
OpenLayer Marker
http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html
https://jsfiddle.net/7oznx9px/
OpenLayer Marker
http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html
stupid thing :)
this worked fine
https://jsfiddle.net/4auhovfd/
dont ask me why :)
* I got the data by adding "echo json_encode($data);" to your php code @ http://phpfiddle.org/
this worked fine
https://jsfiddle.net/4auhovfd/
markers.addMarker(mkr);
mkr.setUrl('http://openlayers.org/api/img/marker-blue.png');
dont ask me why :)
* I got the data by adding "echo json_encode($data);" to your php code @ http://phpfiddle.org/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanx that's been bugging me for ages
Any idea about the second part Only ever showing 1 popup at a time?
Any idea about the second part Only ever showing 1 popup at a time?
here
https://jsfiddle.net/mvj3L69x/
* just added
mkr.events.register("click", mkr, function(e, i) {
$(".olPopup").hide();
console.log("click");
$('#result').html(JSON.stringify(this.custData));
popup = new OpenLayers.Popup.FramedCloud("chicken",
this.lonlat,
new OpenLayers.Size(200, 200),
"<h2>example popup</h2><p>" + this.custData.item2 + "</p>",
null, true);
map.addPopup(popup);
});
https://jsfiddle.net/mvj3L69x/
* just added
$(".olPopup").hide();
ASKER
OK I'll give it a go in the morning feeling rather silly now
ASKER
Thank you
or give us direct link, so we can use it in our demos to debug it...