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
Post a Comment