Link to home
Start Free TrialLog in
Avatar of trevor1940
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
 
<!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>

Open in new window


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));

Open in new window

Avatar of HainKurt
HainKurt
Flag of Canada image

please post a sample from php
or give us direct link, so we can use it in our demos to debug it...
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"
    }
  }]
};

Open in new window

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
stupid thing :)

this worked fine

https://jsfiddle.net/4auhovfd/

    markers.addMarker(mkr);
    mkr.setUrl('http://openlayers.org/api/img/marker-blue.png');

Open in new window


dont ask me why :)


* I got the data by adding "echo json_encode($data);" to your php code @ http://phpfiddle.org/
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of trevor1940
trevor1940

ASKER

Thanx that's been bugging me for ages

Any idea about the second part Only ever showing 1  popup at a time?
here

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);
    });

Open in new window


https://jsfiddle.net/mvj3L69x/

* just added

$(".olPopup").hide();

Open in new window

OK I'll give it a go in the morning feeling  rather silly now
Thank you