2

I am using OpenLayers 6.0.1 web map. I have plot a new marker on map with custom image and want to put the map to be centered newly plotted marker position.

1
3

Since you have already added the marker on the map this means you already have the coordinates of that Marker. Note that a marker is just a Point feature with a specific Icon style which needs a coordinate set that fits your projection. In order to center the map on the marker you have just created, you can do the following:

I guess you are using an EPSG:3857 projection on your map and that you have coordinates in EPSG:4326 which is very usual.

     let marker = new Feature({
        geometry: new Point(fromLonLat([38.71, 88.66]))
     });
     marker.setStyle(new Style({
            image: Icon({
                  anchor: [0, 0],
                  src: 'yourimage.png'
               })
           }));

     let vectorLayer = new VectorLayer({
          source: new VectorSource({
             features: [marker]
       })
     });
    map.addLayer(vectorLayer);
    map.getView().animate({zoom: 5, center: fromLonLat([38.71, 98.66])});

Of course, there is plenty of output ommited in this example, but I'm posting it just to give you an idea of how you can animate your viewport to a specific location. Most of the mentioned code and imports should already exist in your project so you just need to grab the coordinates and animate the map.

2

You can put a feature on map and fit him

 var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
  });
  var marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([-44,-2]))
  });
  vectorLayer.getSource().addFeature(marker)
  console.log(vectorLayer.getSource().getFeatures())


  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),vectorLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
  var extent = vectorLayer.getSource().getExtent();
  map.getView().fit(extent,map.getSize())
0

I have got answer from https://stackoverflow.com/questions/51207211/openlayer-load-map-with-initial-marker

<h2>Location Map</h2>
  <div id="mapLat"></div>
    <div id="mapLon"></div>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var mapId = "map";
    var lat,lon;
function createMap() {
    var queryString = window.location.search;
    queryString = queryString.substring(1);
    var queries = queryString.split("$");
    var Qstring = [];
    for(i=0;i<queries.length;i++)
    {
        var temp = queries[i].split('=');
        //stack.push(temp[0]);
        Qstring.push(temp[0]);
    }
    lat = Qstring[0];
    lon = Qstring[1];
    document.getElementById('mapLat').innerHTML = 'Latitude:' + lat;
    document.getElementById('mapLon').innerHTML = 'Longtiude:' + lon;

  var coordinate = [lon, lat];
  var vectorSource = new ol.source.Vector({});
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });
  var view = new ol.View({
    center: ol.proj.fromLonLat(coordinate),
    zoom: 10,
    maxZoom: 19,
    minZoom: 5
  });
  var map = new ol.Map({
    layers: [new ol.layer.Tile({
      source: new ol.source.OSM({
        key: 'myKey',
        crossOrigin: ''
      })
    }), vectorLayer, ],
    target: document.getElementById(mapId),
    controls: ol.control.defaults(),
    view: view
  });
  // create custom marker image with custom text in bottom
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [12, 37],
      anchorXUnits: 'pixels', //'fraction'
      anchorYUnits: 'pixels',
      opacity: 0.8,
      //src: 'https://maps.google.com/mapfiles/ms/micons/blue.png'
      src: 'img/pin/location_pin.gif'
    })
  });

  var marker;
  this.setMarker = function(coordinate) {
    marker = new ol.Feature(
      new ol.geom.Point(ol.proj.fromLonLat(coordinate))
    );
    marker.setStyle(iconStyle);
    vectorSource.addFeature(marker);
  }
  return this;
}

var map = createMap();
map.setMarker([lon, lat])
    </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.