Home > openlayers > problem with open popup onclick marker in openlayers?

problem with open popup onclick marker in openlayers?

March 28Hits:7

I am very new to openlayers. I have done showing map and whenever we click on the map it is showing marker. But i need to open the popup when i click on the marker.

The following code has some problem. When i click on marker popup is displaying but at the corner it is displaying. I want to display the popup on the marker it self

<html> <body>   <div id="mapdiv"></div>   <script src="http://www.openlayers.org/api/OpenLayers.js"></script>   <script>     map = new OpenLayers.Map("mapdiv");     map.addLayer(new OpenLayers.Layer.OSM());      var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )           .transform(             new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984             map.getProjectionObject() // to Spherical Mercator Projection           );      var zoom=16;     var markers = new OpenLayers.Layer.Markers( "Markers" );     map.addLayer(markers);      map.events.register("click", map , function(e){    var opx = map.getLonLatFromPixel(e.xy) ;    var marker = new OpenLayers.Marker(opx);    markers.addMarker(marker);    marker.events.register("click", marker, function(e){    popup = new OpenLayers.Popup("chicken",                    map.getLonLatFromPixel(e.xy),                    new OpenLayers.Size(200,200),                    "example popup",                    true);  map.addPopup(popup);   });  });      map.setCenter (lonLat, zoom);   </script> </body> </html> 


Try this:

  popup = new OpenLayers.Popup.FramedCloud("chicken",
                         new OpenLayers.Size(200, 200),
                         "example popup",
                         null, true);

problem with open popup onclick marker in openlayers?

Related Articles

  • problem with open popup onclick marker in openlayers?

    problem with open popup onclick marker in openlayers?March 28

    I am very new to openlayers. I have done showing map and whenever we click on the map it is showing marker. But i need to open the popup when i click on the marker. The following code has some problem. When i click on marker popup is displaying but a

  • Problems with features, popups and strategy with OpenLayersJune 4

    I'm trying to create a website for vehicles localization on map, but i have some problem with openlayers. This is my first time with OL... What I would do is: - add and update features (my vehicles) on map. DONE - follow only vehicles visible on scre

  • How to add multiple markers on map and popup different information using OpenLayers? November 1

    Can anybody give me some examples of adding multiple markers on the map? --------------Solutions------------- Please use the following code to add multiple markers with information window. This example creates a vector layer for placing points which

  • Adding a marker with openlayers/geoserver

    Adding a marker with openlayers/geoserverMarch 2

    My name's Tony. I'm from vietnam. I want to add a marker in webgis with openlayers/geoserver. Here is my code : <!-- Import OL CSS, auto import does not work with our minified OL.js build --> <link rel="stylesheet" type="text/css&q

  • How can I rotate a marker in OpenLayersNovember 12

    I'm creating markers using this method : var 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); var icon = new OpenLayers.Ic

  • Is it possible to animate a marker in OpenLayers 3September 27

    I have been trying to find a marker animation plugin for OpenLayers to sync lat, lon, and time data along a track like this (in Leaflet): https://github.com/hallahan/LeafletPlayback http://leafletplayback.theoutpost.io/examples/example_1.html Is it p

  • Highlight / Bounce marker on openlayers openstreet map and add hoverNovember 6

    I have a page where i have a table at the bottom and a map on top of page. different table rows map to different markers on the map. I have a need to highlight a marker by doing something like bouncing on openstreet map on row selection. I need some

  • Popup positioning issue in OpenLayers 2.10March 4

    We were using OpenLayers 2.7 before and everything was working fine. Then we decided to upgrade our system to use OpenLayers 2.10. We have popup positioning issue with this new version. The popup is getting displayed away from the actual marker. It i

  • Combine hover info with onclick info in openlayers?November 18

    I am trying to do some complex thing. I wonna have: popup with a name of a feature on mouse hover, popup with more complex info ( name, foto, etc.) after mouseclick on the same feature - the same layer. It is possible to have those two things at the

  • Select and trigger popup on marker via javascriptMay 6

    Is it possible using javascript to trigger a select on an openlayers marker? I have access to the name and coordinates of the marker, at the moment I am using setcenter to adjust the map to show the marker but I can not find an api call for selecting

  • Problems with zooming and mouse events in OpenlayersDecember 28

    I'm having trouble with everything mouse related for an Openlayers map when the map is placed inside a DIV with position fixed. The map works fine when you're at the top of the viewport of the browser, but when you're scrolling down the page, you can

  • How to deal with popups for clusters in openlayers?January 31

    I have an openlayers map which generates points from an array as vector features, with popups for these features, which works fine. Since I have so many points on this map, I have started working with cluster strategy. I can get the popups working fi

  • How to make popups on polygon using openlayers?July 22

    I want to make popups that contain information of a polygon when in hover using OpenLayers. information displayed in popups obtained from the database. Can you give reference code to make it. thanks for answering --------------Solutions-------------

  • How to remove marker from openlayers mapAugust 1

    I have Drupal 7 installation with Openlayers and Geofield (I am using Openlayers as the widget for Geofield). I am able to add new points and show them on the map, however I am not able to remove points from the map once they are edited. I guess that

  • Problem reprojecting KML in EPSG:2039 Map - OpenLayers 2.12 + proj4jsNovember 18

    I have KML files (EPSG:4326) and a background map I made using EPSG:2039 projection (mandatory). When I try reprojecting the KMLs to show in EPSG:2039 I don't succeed and still they don't appear on the map. Only when manually projecting everything to

  • Problem Access-Control-Allow-Origin.GeoServer ISS OpenLayers February 11

    This question already has an answer here: How to configure Proxy.cgi with IIS 2 answers I use OpenLyaers in order to show france Departements. My website is generated in ASP .NET MVC 4 (i use Visual studio 2012) ans i use GeoServer to store WFS files

  • Problem creating a popup in mobile openlayerOctober 12

    I'm trying to use the mobile version of openlayer, unfortunately I could not use framedcloud in it, I could only create a square popup does not look very aesthetic, besides the main need is to identify from a cloud of the associated data points so th

  • Problem with WFS-T save strategy in OpenlayersNovember 2

    In my web map application, I have added the editable wfs vector layer for feature editing. But in save strategy method, Insert and Update Geometry is working fine.But Update Attributes is not saved in transaction. Did I miss anything to include while

  • only one popup displayed on the openlayersFebruary 4

    The issue is that i only one popup on the map is dispalyed. I can see all the points but popup can see only on the last point of the list. Please check my code http://jsfiddle.net/3HSjY/24/ I'm stack with rhis problem from Sunday and can not find any

  • How to open a popup on Marker click when Markers are in array using leaflet mapsMay 22

    Hey guys I have a set of Markers that are getting created dynamically on a .each loops like so. $.each(data, function(index, element) { markerArr[element.id] = L.marker(map.unproject([element.LocationX,element.LocationY],map.getMaxZoom()-4)).addTo(ma

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.608 s.