AndreaNobili AndreaNobili - 7 months ago 44
Javascript Question

How can I use OpenLayers3 to put an icon on a selected point of interest in my map?

I am absolutly new in OpenLayers 3 and I have create the following page that use it and that show an Open Street map in which when the user click on a point it retrieve the GPS coordinates of this point:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">

<style>
.map {
height: 400px;
width: 100%;
}
</style>

<script src="http://openlayers.org/en/v3.12.1/build/ol.js" type="text/javascript"></script>

<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div> <!-- Map Container -->


<!-- JavaScript to create a simple map, With this JavaScript code, a map object is created with a MapQuest Open Aerial layer
zoomed on the African East coast: -->
<script type="text/javascript">
var rome = ol.proj.fromLonLat([12.5, 41.9]);


var map = new ol.Map({ // Creates an OpenLayers Map object
target: 'map', // Attach the map object to the <div> having id='map0

// The layers: [ ... ] array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],

// The view allow to specify the center, resolution, and rotation of the map:
view: new ol.View({
// The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out:
center: ol.proj.fromLonLat([12.5, 41.9]),
zoom: 10
})
});


map.on('click', function(evt) {
var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
alert("COORDINATE: " + prettyCoord);
});

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


So, as you can see in my code, it is pretty simple I have use this function to retrieve the GPS coordinates:

map.on('click', function(evt) {
var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
alert("COORDINATE: " + prettyCoord);
});


My problem now is: how can I put something like a pointer icon on the selected point in the map? I want put an icon like the one shown in this tutorial: http://openlayers.org/en/v3.13.0/examples/icon-negative.html

but that have to be shown in the selected point.

I want to do something like give to the user the possibility to select a point of interest on my map but I can't find a solution. How can I do it?

EDIT 1: this is the JSFiddle on my example: https://jsfiddle.net/AndreaNobili/uqcyudex/1/

Answer

You can create a vector layer to add to you map to which you configure with a vector source. Upon clicking on the map, you can clear the source first, then add a feature to the source, which gets rendered in the map.

See your updated JSFiddle: https://jsfiddle.net/uqcyudex/5/

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

...

// add it to the map
layers: [       
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
vectorLayer
],

...

// clear the source and add the feature
vectorSource.clear();
var feature = new ol.Feature(new ol.geom.Point(evt.coordinate));
vectorSource.addFeatures([feature]);

To have the vector feature styled as a marker, look at this example to see how it's done: http://openlayers.org/en/v3.13.0/examples/icon.html

Comments