Guest User

Untitled

a guest
Nov 21st, 2018
191
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.30 KB | None | 0 0
  1. marker = new ol.Feature({
  2. geometry: new ol.geom.Point([longitude, latitude]),
  3. name: "Location Marker"
  4. });
  5. markerStyle = new ol.style.Style({
  6. image: new ol.style.Icon({
  7. anchor: [0.5, 1.0],
  8. anchorXUnits: "fraction",
  9. anchorYUnits: "fraction",
  10. src: "Content/Images/OpenLayers/marker_trans.png"
  11. }),
  12. zIndex: 100000
  13. });
  14. marker.setStyle(markerStyle);
  15. marker.on("click", function(e) {
  16. // do something
  17. }, marker);
  18. map.getSource().addFeature(marker);
  19.  
  20. map.on("click", function(e) {
  21. // do something
  22. }, marker);
  23.  
  24. map.on("click", function(e) {
  25. map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
  26. //do something
  27. })
  28. });
  29.  
  30. $(map.getViewport()).on("click", function(e) {
  31. map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
  32. //do something
  33. });
  34. });
  35.  
  36. map.getViewport().addEventListener("click", function(e) {
  37. map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
  38. //do something
  39. });
  40. });
  41.  
  42. interaction.getFeatures().on("add", function (e) {
  43. // do something. e.element is the feature which was added
  44. });
  45.  
  46. var map = new ol.Map({
  47. target: 'map',
  48. layers: [
  49. new ol.layer.Tile({
  50. source: new ol.source.MapQuest({layer: 'sat'})
  51. })
  52. ],
  53. view: new ol.View({
  54. center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
  55. zoom: 4
  56. })
  57. });
  58.  
  59. map.on("click", function(evt) {
  60. var coord = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
  61. var lon = coord[0];
  62. var lat = coord[1];
  63. alert(lon);
  64. alert(lat);
  65. });
  66.  
  67. <style>
  68. #marker {
  69. width: 20px;
  70. height: 20px;
  71. border: 1px solid #088;
  72. border-radius: 10px;
  73. background-color: #0FF;
  74. opacity: 0.5;
  75. }
  76. </style>
  77.  
  78. // add marker
  79. var pos = ol.proj.fromLonLat([0.01123, 0.00612]);
  80. var marker = new ol.Overlay({
  81. position: pos,
  82. positioning: 'center-center',
  83. element: $('<div id="marker" title="Marker"></div>')
  84. .popover({
  85. 'placement': 'top',
  86. 'html': true,
  87. 'content': '<strong>anything...</strong>'
  88. })
  89. .on('click', function (e) { $(".location-popover").not(this).popover('hide'); }),
  90. stopEvent: false
  91. });
  92. map.addOverlay(marker);
Add Comment
Please, Sign In to add comment