[GIS] Adjust center of the map based on marker position Openlayers

javascriptopenlayers

I have a map in which a moving marker is placed to represent a vehicle. I am using setCoordinate() method to move the marker.

I need to set the center of the map to the position of the vehicle marker whenever the marker reaches any one of the four boundaries of map. How do I know that the marker is at the boundary in order to set the center of the map and set the center whenever it is at the boundary.

Best Answer

Somehow, I found the answer

//calculate the extent of the map

var extent = map.getView().calculateExtent(map.getSize());
extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

//compare the values with the marker position 

 if((extent[0]>lon || lon>extent[2])||(extent[1]>lat || lat>extent[3])) {
        //set the center to the marker position 
  map.getView().setCenter(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'));
}

Related Solutions

[GIS] Leaflet JS calling animatedMarker.stop() from event listener

I've made some changes to your code, to make it work as you wish. Here's only the code between the body tags:

<body>
    <div id="map"></div>
    <script type="text/javascript">
        // init the map with Stamen Terrain tiles
        var map = L.map('map').setView([40.3025, -121.2347], 15);
        var layer = new L.StamenTileLayer("terrain");
        var animatedMarker;
        map.addLayer(layer);

        // create geojson layer
        var geojson = new L.geoJson(pct);
        geojson.addTo(map);

        // temporary array to store geojson lat, lon
        var temp = [];

        var eachLayer = geojson.eachLayer(function(layer){

            var coordinates = layer.feature.geometry.coordinates,
                len = coordinates.length,
                i = 0;
            for (i; i<len; i++){
                var lat = coordinates[i][1],
                    lon = coordinates[i][0];
                // reverse order of lon, lat for L.polyline
                temp.push([lat, lon]);
            }
        });

        var line = new L.polyline(temp),
            animatedMarker = L.animatedMarker(line.getLatLngs(), {
                autoStart: false,
                distance: 500,
                interval: 1000
            });

        map.addLayer(animatedMarker);

        var flag = 0; // the variable used to signalise the animation stop

        function pan_map(){
            map.panTo({lon: animatedMarker['_latlng'].lng, lat: animatedMarker['_latlng'].lat});;
        }
        pan_map(); // pan the map to the marker start position

        // set the interval timer
        var vInterval = setInterval(function(){
            if (flag == 1){
                animatedMarker.stop();
                clearInterval(vInterval); // stops the interval timing, also
            }
            pan_map(); // pan the map to follow the marker
        }, 100);

        // delay start so that data has time to load
        Timeout = setTimeout(function(){
            animatedMarker.start();
        }, 3000);

        // function to track animatedMarker's position
        // and stop it at given lat lon values
        var checkLatLon = function(e) {
            var lat = 32.608639206779,
                lon = -116.49114320162762;
            if (e.latlng.lng === lon && e.latlng.lat === lat){
                flag = 1; // signals the animation can be stopped
            }
        }

        // event listener to check animatedMarker's position
        animatedMarker.on('move', checkLatLon);
    </script>   
</body>

[GIS] How to center the map to a KML placemark with OpenLayers 3

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates and use them to center the view (borrowed from Layer loadstart & loadend events in OpenLayers 3):

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

Best Answer

Related Solutions

[GIS] Leaflet JS calling animatedMarker.stop() from event listener

[GIS] How to center the map to a KML placemark with OpenLayers 3

Related Question