Search code examples
openlayersopenstreetmap

Want to change marker present in example given below, having problems with figuring out calculations

https://openlayers.org/en/latest/examples/modify-icon.html

If you refer to the above example, you will get to know that the default marker is changed with the new image, for which following fields are entred/configured, I want to change marker image to something else, but not able to calculate/determine what values shall I put there

for example, if image is https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png how shall I calculate these fields

Openlayers documentation says https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html

    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
Solution

  • That icon is really big.

    This seems reasonable to me:

    anchor: [0.5, 0.9], // x center, y bottom: slightly up, point of icon not at bottom
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: 'https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png',
scale: 0.1  // shrink by factor of 10

    However, that image is fairly large, it would be more efficient to use one the correct size (and not need to scale it down).

    enter image description here

    live example

    code snippet:

    const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0]),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});

const iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 0.9],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    src: 'https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png',
    scale: 0.1
  }),
});

iconFeature.setStyle(iconStyle);

const vectorSource = new ol.source.Vector({ // VectorSource({
  features: [iconFeature],
});

const vectorLayer = new ol.layer.Vector({ // VectorLayer({
  source: vectorSource,
});

const rasterLayer = new ol.layer.Tile({ // TileLayer({
  source: new ol.source.TileJSON({ // TileJSON({
    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
    crossOrigin: '',
  }),
});

const target = document.getElementById('map');
const map = new ol.Map({
  layers: [rasterLayer, vectorLayer],
  target: target,
  view: new ol.View({
    center: [0, 0],
    zoom: 3,
  }),
});

const modify = new ol.interaction.Modify({
  hitDetection: vectorLayer,
  source: vectorSource,
});
modify.on(['modifystart', 'modifyend'], function(evt) {
  target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
});
const overlaySource = modify.getOverlay().getSource();
overlaySource.on(['addfeature', 'removefeature'], function(evt) {
  target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
});

map.addInteraction(modify);
    html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#map,
.map {
  height: 100%;
  width: 100%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Icon modification</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v6.14.1/css/ol.css" type="text/css">
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/[email protected]/dist/elm-pep.js"></script>
  <!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
  <script src="https://openlayers.org/en/v6.14.1/build/ol.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
</head>

<body>
  <div id="map" class="map"></div>
</body>

</html>