CODEWITHSUNDEEP
javascriptjqueryopenstreetmapopenlayers-3
copser
copser

Reputation: 2641

Openlayers3 markers are not showing up on os map

While ago I had help over so about setting up a project where I need to mark random building in NYC and display some info about the building, long story short, I have displayed a openstreetmap using openlayers3, view is fix to Astoria(Queens, NYC). Now popup is working but markers are not displaying.

I have tried to experiment and change geometry from this

geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633]))

to this ol.geom.Point(ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857')),

and use transform instead fromLonLat, but that didn't displayed them, next thing was src in styleIcon, I have download the standard openlayers3 marker and tried to add it from the image folder like src: 'img/icon.png', but that didn't work to.

Can someone please help me understand what is going on, why are mine markers not displaying properly on the map?

This is the JSFiddle for this project, you will see the popup working but no markers.

This JSFiddle is updated and it is working now, markers are displaying properly.

/* Create the map */

// Elements that make up the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

// Add a click handler to hide the popup.
// @return {boolean}.
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

// Create an overlay to anchor the popup
// to the map
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

// setting up coordinates for map to display
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857'); 

// setting up openlayer3 view
var view = new ol.View({
    center: city,
    zoom: 15
});

// Create the 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 up click handler for the map
// to render the 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' : '';
});

Upvotes: 0

Views: 1087

Answers (1)

pavlos
pavlos

Reputation: 3081

just remove the https from your 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 also need to zoom out a bit to see your marks

Upvotes: 1

Related Questions