CODEWITHSUNDEEP
openlayers-3
Chris Stone
Chris Stone

Reputation: 129

setting a features' location in openlayers

I have been working on this for some time and can't seem to find the information in the documentation for the latest openlayers (version 3 at the time of writing this)...

I am pulling my hair out in fact!

What I need to know is how to place a feature (ol.feature) at a specific location on the map.

I have abstracted the longitude and latitude with a function server side and am passing them into the js code with the use of template tags.

At the moment it is placing it off the coast of Africa in the middle of the ocean...

My code so far is;

<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 500px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script>
    <title>pickup point selection</title>
  </head>
  <body>
    <h2>Choose your pickup point</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ]);
      var iconFeature = new ol.Feature({
        geometry: customerCoordinates,
        name: '{{postcode}}'
      });

      iconFeature.

      var iconStyle = new ol.style.Style({
        text: new ol.style.Text({
          text: '\uf015',
          font: 'normal 50px FontAwesome',
          textBaseline: 'Bottom',
          fill: new ol.style.Fill({
            color: 'black',
          })
        })
      });

      iconFeature.setStyle(iconStyle);
      iconFeature.setG

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource});

      var rasterLayer = new ol.layer.Tile({
        source: new ol.source.OSM()});

      var map = new ol.Map({
          layers: [rasterLayer, vectorLayer],
          target: document.getElementById('map'),
          view: new ol.View({
              center: ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]),
              zoom: 17
              })
          });

    </script>
  </body>
</html>

Any help would be very appreciated

If you need more info let me know!

Upvotes: 0

Views: 1015

Answers (1)

pavlos
pavlos

Reputation: 3081

change this: var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ])

to this var customerCoordinates = new ol.geom.Point([ ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]) ])

Upvotes: 1

Related Questions