I have created some code to create two Polygons in Openlayers Map and tried to keep the size same while zooming it, but the size is also reducing when I zoomout of the map. My intention is to use Polygons as site markers. Could you please help me to use Polygons as site markers and to keep the size same while zoom out and zoom in?
I have used parcel bundler to create the test build. I have seen the OverLay example in your site where the marker stays at the same size while doing zoom In/Out of the Map ,similarly I am looking for possibility to make use of polygons as site markers.
For simplicity I have removed the import part of the below JS code.
Below is the JS Code:
//Position of our map center
var pos = fromLonLat([76.87403794962249, 8.569385045000772]);
//Position for our Triangle Polygon
var pos1 = fromLonLat([76.85860825505787, 8.575525035547585]);
//The below line is to check the Longitude and Latitude
//console.log(toLonLat(pos1));
var pos2 = fromLonLat([76.85286067404068, 8.56925661298456]);
var pos3 = fromLonLat([76.86300346314657, 8.56917303421666]);
//Position for arrow Polygon
var arrowOne = fromLonLat([76.86219331461274, 8.565926475435887]);
var arrowTwo = fromLonLat([76.86584111887299, 8.566053785302557]);
var arrowThree = fromLonLat([76.86566945749604, 8.56758150037902]);
var arrowFour = fromLonLat([76.87034723001801, 8.56456850087342]);
var arrowFive = fromLonLat([76.86635610300385, 8.562064722566959]);
var arrowSix = fromLonLat([76.86627027231538, 8.5638470749155]);
var arrowSeven = fromLonLat([76.86163541513764, 8.564016822322785]);
//OSM() Tile layer for our Map
var tileLayer = new TileLayer({
source: new OSM()
});
//Setting View for our Map
var viewOne = new View({
center: pos,
zoom: 15
});
//Coordinates for our Polygons
var cordTriangle = [pos1, pos2, pos3, pos1];
var cordArrow = [arrowOne, arrowTwo, arrowThree, arrowFour, arrowFive,
arrowSix, arrowSeven, arrowOne];
var polyTriangle = new Polygon([cordTriangle]);
var polyArrow = new Polygon([cordArrow])
//Adding the Feature for our Polygons
var featureTriangle = new Feature(polyTriangle);
var featureArrow = new Feature(polyArrow);
//vectorSource.addFeature(feature);
var vectorSource = new VectorSource({
projection: 'EPSG:4326',
features: [featureTriangle, featureArrow]
});
// The below Select is needed if we have to select a feature before move
//var select = new Select();
//The below will select all the Features and add it for Translate
var translate = new Translate();
//Setting custom styles for our Polygons
featureTriangle.setStyle(new Style({
fill: new Fill({
color: 'red'
})
}));
featureArrow.setStyle(new Style({
stroke: new Stroke({
color: 'green',
width: 2
}),
fill: new Fill({
color: 'cyan'
})
}));
var vectorLayer = new VectorLayer({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true
});
// Adding all Layers and creating our Map
var map = new Map({
interactions: defaultInteractions().extend([ /*select,*/ translate]),
target: 'map',
layers: [tileLayer, vectorLayer],
view: viewOne
});
//To get the Lon and Lat of clicked location over map. This will be
displayed in the console.
$(document).ready(function () {
map.on('click', function (event) {
let cordClick = toLonLat(event.coordinate);
console.log(cordClick);
});
});
Changes added on 31/08/2018:
var resol = viewOne.getResolution();
console.log('The Resolution is : ' + resol);
var cordVary = function () {
for (var outer = 0; outer < cordArrow.length; outer++) {
var cordArrow1 = [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0]
];
for (var inner = 0; inner < cordArrow[outer].length; inner++) {
cordArrow1[outer][inner][0] = cordArrow[outer][inner][0] * resol;
cordarrow1[outer][inner][1] = cordArrow[outer][inner][1] * resol;
//console.log(outer, inner);
}
}
return cordArrow1;
}
I am trying to update the coordinates when I zoom into the map to keep the same size for the Polygons
