javascript - openlayers markers with popup -


i trying display map markers. want ability click these markers such information can displayed (similiar way works in google earth). have map , markers (or features) can not "popup" information work.

the js:

function init(){     var northsealonlat = [4.25, 52.05];     var centerwebmercator = ol.proj.fromlonlat(northsealonlat);      var tilelayer = new ol.layer.tile({ source: new ol.source.osm() });     markerlayer = new ol.layer.vector({ source: new ol.source.vector({ features: [], projection: 'epsg:3857' }) });       var map = new ol.map({         controls: ol.control.defaults().extend([             new ol.control.mouseposition({                 coordinateformat: ol.coordinate.createstringxy(3),                 projection: 'epsg:4326',                 undefinedhtml: '&nbsp;',                 classname: 'custom-mouse-position',                 target: document.getelementbyid('custom-mouse-position'),             })         ]),         layers: [tilelayer, markerlayer],         target: 'map',         view: new ol.view({             projection: 'epsg:3857',             center: centerwebmercator,             zoom: 7         })     });      // add marker     var circle = new ol.style.style({         image: new ol.style.circle({             radius: 4,             fill: new ol.style.fill({                 color: 'rgba(200,0,0,0.9)',             }),             stroke: new ol.style.stroke({                 color: 'rgba(100,0,0,0.9)',                 width: 2             })         })     });      coordinates = [[4.25, 52.05], [4.21, 52.01], [4.29, 52.29], [5.25, 52.05], [4.25, 51.05]];     (i = 0; < coordinates.length; i++) {          var feature = new ol.feature(             new ol.geom.point(ol.proj.transform(coordinates[i], 'epsg:4326', 'epsg:3857'))         );         feature.description = 'coordinates: '+coordinates[i][0]+','+coordinates[i][1]+'\nbla';         feature.setstyle(circle);         markerlayer.getsource().addfeature(feature);     }      var element = document.getelementbyid('popup');     var popup = new ol.overlay({       element: element,       positioning: 'bottom-center',       stopevent: false     });     map.addoverlay(popup);      // display popup on click     map.on('click', function(evt) {         var feature = map.foreachfeatureatpixel(evt.pixel,             function(feature, layer) {                 return feature;             });         if (feature) {             popup.setposition(evt.coordinate);             $(element).popover({                 'placement': 'top',                 'html': true,                 'content': feature.get('description')             });             $(element).popover('show');         } else {             $(element).popover('destroy');         }     }); }

the code got example on website: http://openlayers.org/en/v3.11.1/examples/icon.html

it works there can't version work. idea why?

popover isn't part of openlayers contained in bootstrap: http://getbootstrap.com/javascript/#popovers

also see openlayers example on overlays: https://openlayers.org/en/latest/examples/overlay.html


Comments

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more