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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.