Working with OpenLayers 4 | Part 3— Setting customised markers and images on the map
In the Previous Part Working with OpenLayers 4 | Part 2 — Using markers or points on the map, we learned about making a marker on a given latitude and longitude on map.
In this article, we will customise the markers according to our need and place an image to a particular latitude and longitude extents.
Note: This article requires a server application on your machine or you will have Access-Control-Allow-Origin issue. My recommendation is to use WAMP(Windows) / LAMP(Linux) / MAMP(Macintosh) on the local machine if you do not know so much about Apache or Nginx setup on your local machine.
We will start with the previous codes and will customise the marker we set on the New York City’s City Hall. Followed by adding an image over the city hall with bounding area.
Customising the Marker:
For customization, we will be using a transparent background image of dot and will fill it with magenta color (Hex Code: #FF00FF).
Key point: In OpenLayers, if you want to customize the style of point, line or polygon, you can use the setStyle() method of the object you created passing an ol.style.Style() object as an argument.
In our case we will set an image in the style of marker:
var marker = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-74.006,40.7127])
), // Cordinates of New York's City Hall
});marker.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
src: 'dot.png'
}))
}));
On setting the image on the marker, our City Hall’s marker will look in the following way:
To set the color of the background of the marker’s image, add the color attribute in the image style object.
marker.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: '#ffcd46',
crossOrigin: 'anonymous',
src: 'dot.png'
}))
}));Now, if we reload the page, we can clearly see that the image that we have used for the marker have a yellow background now.
In this way, you can customize the marker and use the color or images of your own desire to make your markers more interactive.
Adding an image to an extent:
As we have placed a marker on the map using our own image. Now, if you want to set an image for a specific area, you can also do that in OpenLayers library. This type of functionality is especially useful for GIS industries when you don’t have a geo-tagged satellite image but the extent coordinates.
For the setting of the image, we will use the Image subclass of OpenLayers’s layer class and pass the ImageStatic subclass of source class in it as a source.
I am going to use the image of this bearded guy to place over the city hall.
This time we will not have to give the lat-long of a point location. We will define the image in a rectangular area by giving the latitudes of south and north of the area and longitudes of east and west of the area. In other words, you need the north-east and south-west coordinates of the area on which you are going to mount the image on the map.
var north = 40.7127;
var south = 40.7129;
var east = -74.0059;
var west = -74.0061;
var extent = ol.proj.transformExtent([east, north, west, south], 'EPSG:4326', 'EPSG:3857');
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'photo.png',
imageExtent: extent
})
});
map.addLayer(imageLayer);I have used a transformExtent method to convert the Latitude and Longitude extent coordinates for the mapping library. And if you reload the webpage and zoom to the pointer, you can clearly see our beard guy over the City Hall.
In this way you can certainly place any image over anywhere on the map, covering as much extent as you need.
You can download the full code from this Github repo.
And if you enjoyed this post, share it on Facebook and Twitter. I Love Sharing.
You can also follow me on twitter: here
