javascript - Openlayers3 markers are not showing up on os map -


while ago had on setting project need mark random building in nyc , display info building, long story short, have displayed openstreetmap using openlayers3, view fix astoria(queens, nyc). popup working markers not displaying.

i have tried experiment , change geometry

geometry: new ol.geom.point(ol.proj.fromlonlat([-73.927870, 40.763633]))

to ol.geom.point(ol.proj.transform([-73.920935,40.780229], 'epsg:4326', 'epsg:3857')),

and use transform instead fromlonlat, didn't displayed them, next thing src in styleicon, have download standard openlayers3 marker , tried add image folder src: 'img/icon.png', didn't work to.

can please me understand going on, why mine markers not displaying on map?

this jsfiddle project, see popup working no markers.

this jsfiddle updated , working now, markers displaying properly.

/* create map */  // elements make popup var container = document.getelementbyid('popup'); var content = document.getelementbyid('popup-content'); var closer = document.getelementbyid('popup-closer');  // add click handler hide popup. // @return {boolean}. closer.onclick = function() {   overlay.setposition(undefined);   closer.blur();   return false; };  // create overlay anchor popup // map var overlay = new ol.overlay({   element: container,   autopan: true,   autopananimation: {     duration: 250   } });  // setting coordinates map display var city = ol.proj.transform([-73.920935,40.780229], 'epsg:4326', 'epsg:3857');   // setting openlayer3 view var view = new ol.view({     center: city,     zoom: 15 });  // create map var map = new ol.map({   layers: [     new ol.layer.tile({       source: new ol.source.osm({         crossorigin: 'anonymous'       })     })   ],   overlays: [overlay],   target: 'map',   view: view });  // setup markers var markers = new ol.layer.vector({   source: new ol.source.vector({     features: [       new ol.feature({         geometry: new ol.geom.point(ol.proj.fromlonlat([-73.927870, 40.763633])),         name: 'crescent st',         description: 'apartment'       }),       new ol.feature({         geometry: new ol.geom.point(ol.proj.fromlonlat([-73.917356, 40.763958])),         name: 'long island city',         desctiption: 'apartment'       })     ]   }),   style: new ol.style.style({     image: new ol.style.icon({       anchor: [0.5, 46],       anchorxunits: 'fraction',       anchoryunits: 'pixel',       opacity: 0.75,       src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png',     })   }) }); map.addlayer(markers);  // setting click handler map // render popup map.on('singleclick', function(evt) {   var name = map.foreachfeatureatpixel(evt.pixel, function(feature) {     return feature.get('name');   })   var coordinate = evt.coordinate;   content.innerhtml = name;   overlay.setposition(coordinate); }); map.on('pointermove', function(evt) {   map.gettargetelement().style.cursor = map.hasfeatureatpixel(evt.pixel) ? 'pointer' : ''; }); 

just remove https src style.

instead of src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png', putsrc: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',

you need zoom out bit see marks


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

java.lang.NoClassDefFoundError When Creating New Android Project -

Decoding a Python 2 `tempfile` with python-future -