1

I'm starting to use OpenLayers, and I can't use version later than 4.6.5

I'm just trying to display a point with this piece of code, with no success so far. The map is displayed, is centered where I want, but no point in sight. No error in console. Somebody could point me the problem?

    <div id="map" class="map"></div>
    <script type="text/javascript">

        var obsFeature = new ol.Feature({
            geometry : new ol.geom.Point([1.79987472,43.02386932]),
            labelPoint: new ol.geom.Point([1.79987472,43.02386932]),
            name: 'My Point',
            size : 10
        });

        var features = new Array(1);
        features[0] = obsFeature;
        var imageStyle = new ol.style.Style({
            image: new ol.style.Circle({
            radius: 5,
            snapToPixel: false,
            fill: new ol.style.Fill({color: 'yellow'}),
            stroke: new ol.style.Stroke({color: 'red', width: 10})
            })
        });

        obsFeature.setStyle(imageStyle);
        var observationsSourceVector = new ol.source.Vector({
            features: features
        });
        var observationsVectorLayer = new ol.layer.Vector({
            source: observationsSourceVector,
            style: imageStyle
        });

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            }),
            observationsVectorLayer
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([1.79987472,43.02386932]),
            zoom: 10
          })
        });

        map.render();

      </script>

</dl>

1 Answer 1

1

Your point is added to the map, but it is at the wrong place (near to lat/lon 0,0) because your point is using EPSG:4326 coordinates and your map is using EPSG:3857. Try this:

var obsFeature = new ol.Feature({
            geometry : new ol.geom.Point(ol.proj.fromLonLat([1.79987472,43.02386932])),
            labelPoint: new ol.geom.Point(ol.proj.fromLonLat([1.79987472,43.02386932])),
            name: 'My Point',
            size : 10
        });
1

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .