OL3: Setting map view center to geolocation.getCurrentPosition doesn't work - leaflet

When the application starts, I want to center the map view on the users current position. I have tried two different approaches and can't get them work. The first one worked properly in leaflet, but in the development process I have decided to use OL3 instead.
First approach (worked in leaflet):
var myProjectionName = "EPSG:25832";
proj4.defs(myProjectionName,
"+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");
var centerPosition;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (pos) {
centerPosition =
ol.proj.transform(
[position.coords.longitude,
position.coords.latitude],
'EPSG:4326',
myProjectionName);
},
function (err) {centerPosition = [724844,6178000];},
{
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 1000
});
}
My second approach was using the ol.Geolocation class:
var proj1 = ol.proj.get(myProjectionName);
var geolocation = new ol.Geolocation({
projection: proj1
});
var centerPosition= geolocation.getPosition();
The center position is used in creating the view/map object:
var map = new ol.Map({
target: 'map',
logo : false,
layers: [ GSTGroup, OVLGroup, SheatLayer],
view: new ol.View({
projection: myProjectionName,
center: centerPosition,
resolutions : AVLresolutions,
resolution : 2
})
});
I have some suspecions that the cause of the problem is the projection, but on the other hand the projection works properly in transforming layers (WMTS, Vector), source from Geojson in different coordinatesystem and in ol.control.MousePosition.
I am using Firefox 32.0.3 and the geolocator plugin to development/test
Working example in http://jsfiddle.net/AndersFinn/ak4zotn8/

Add after the map declaration the following (tested):
var proj1 = ol.proj.get(myProjectionName);
var geolocation = new ol.Geolocation({
projection: myProjectionName,
tracking: true
});
geolocation.on('change', function(evt) {
console.log(geolocation.getPosition());
map.getView().setCenter(geolocation.getPosition());
});
The most important part is tracking: true in the code: it means you check regularly the position to center.
The second important part is to bind event on geolocation object (an instance of ol.Geolocation)
See in the official examples the geolocation samples and the API docs to make some changes depending of your requirements

Related

Open Layers: how to do coordinate system transformation on vector-source

I am trying to include a map in my application. I load data from a postgis database, where it is stored as wgs84. The data is loaded as geojson and displayed by open layers.
The problem is that the data is currently being projected somewhere in the ocean, I therefore suspect the data needs to be translated into a different coordinate system.
This is the code to create the map object:
var map = new ol.Map({
projection: 'EPSG:4326',
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
})
],
view: new ol.View({
center: ol.proj.fromLonLat([5, 52]),
zoom: 4
})
});
And this is the code I use to load the data:
function addObjectsToMap()
{
var vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures( <?php print_r($object->getLocationsAsGeoJson()); ?> )
});
var vectorLayer = new ol.layer.Vector(
{
source: vectorSource
});
map.addLayer(vectorLayer);
}
I have already tried setting the coordinate system of the map to epsg:900913,
I tried adding this in the vectorLayer:
preFeatureInsert: function(feature)
{
feature.geometry.transform(new ol.proj.Projection("EPSG:4326"),new ol.proj.Projection("EPSG:900913"));
},
I tried adding: .transform('EPSG:4326','EPSG:900913') to the dataimport (where the vector source is created)
And I tried looping over the the data in my vectorsource like this:
vectorSource.getFeatures()[i].setGeometry(vectorSource.getFeatures()[i].getGeometry().transform(new ol.proj.Projection("EPSG:4326"),new ol.proj.Projection("EPSG:900913")));
I would really appreciate it if someone could point me in the right direction. Surely this is something common and should be very easy to deal with. But I cannot find anything about it in the documentation or examples of open layers.
The features can be transformed to the view projection using dataProjection and featureProjectiion options when reading the features
features: new ol.format.GeoJSON().readFeatures( <?php print_r($object->getLocationsAsGeoJson()); ?> , {
dataProjection: 'EPSG:4326',
featureProjection: map.getView().getProjection()
})

Here Maps not showing in Ionic tabs

I have a quite basic Here Map in an Ionic tap that is loaded in a Ionic tab with this JavaScript.
var platform = new H.service.Platform({
useCIT: true,
'app_id': $(component).data('appid'),
'app_code': $(component).data('appcode'),
useHTTPS: true
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: $(component).data('long'),
lat: $(component).data('lat')
}
});
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Add event listeners:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
console.log(evt.type, evt.currentPointer.type);
When adding this not in tab 1 the map is not showing. I tried and searched for several things but they only are for Google Maps. How can i get this working in the Ionic tabs?
Please try with following code snippet :
function moveMapToBerlin(map){
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:50, lng:5},
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function () {
moveMapToBerlin(map);
}

Repeated tiles when switching from OpenLayers to Leaflet

I am trying to change an OpenLayers 2 call to Leaflet, but when I do the map is displayed fine at zoom level 0, but every time I zoom in, the map doubles from the previous number. Any suggestions as to why? Here is a picture to what its doing.
OpenLayers 2 map options
var options = {
projection: new OpenLayers.Projection("EPSG:3857"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
controls: [
new OpenLayers.Control.Navigation(
{dragPanOptions: {enableKinetic: true}}
)
]
};
OpenLayers 2 code
var bathyEsri = new OpenLayers.Layer.XYZ(
' ESRI Ocean'
,'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg'
,{
sphericalMercator : true
,isBaseLayer : true
,wrapDateLine : true
,opacity : 1
,visibility : true
}
);
Leaflet Options
var options = {
worldCopyJump: true,
maxBounds: L.LatLngBounds([20037508.34,20037508.34],[-20037508.34,-20037508.34]),
crs: L.CRS.EPSG4326,
center: [39.73, -104.99],
zoom: 0
};
Leaflet Code
var bathyEsri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg');
Your problem is basically a typo.
Your analysis is also misleading: it's not that the map is being "duplicated", but rather every tile being requested is the 0/0/0 tile. If you use the network inspection tools of your browser, you'll see that the tile URL is something like https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/$3/$4/$5.jpg , but the tile image corresponds to the /0/0/0.jpg tile.
If you look at those URLs a bit more closely, you'll notice some "extra" $ signs. Why are those there? Well, consider that you wrote your tilelayer URL scheme as
var bathyEsri = L.tileLayer('http://...../tile/${z}/${y}/${x}.jpg');
But keep in mind that the Leaflet documentation clearly states:
var bathyEsri = L.tileLayer('http://...../tile/{z}/{y}/{x}.jpg');
Change this, and everything will magically start working.

MapboxGL: querying rendered features after multiple geocodes

Situation: I have a working site where upon entering an address, MapboxGL marks a point on the map and queries a polygon layer (queryRenderedFeatures) and displays the polygon feature containing the point.
This works; however, if I then want to geocode a second address that changes the map view, it fails the second time because map.queryRenderedFeatures returns an empty array.
var userDistrictsGeoJson;
map.on('load', function() {
//add layers from Mapbox account
addLayers(); //details left out of example, but this works.
// Listen for geocoding result
// This works the first time through, but fails if the user searchs for a second address because queryRenderedFeatures is working with a smaller set of features
geocoder.on('result', function(e) {
//need to clear geojson layer and
userDistrictsGeoJson = {
"type": "FeatureCollection",
"features": []
};
map.getSource('single-point').setData(e.result.geometry);
//project to use (pixel xy coordinates instead of lat/lon for WebGL)
var point = map.project([e.result.center[0], e.result.center[1]]);
var features = map.queryRenderedFeatures(point, { layers: ['congress-old'] });
var filter = featuresOld.reduce(function(memo, feature){
// console.log(feature.properties);
memo.push(feature.properties.GEOID);
return memo;
}, ['in', 'GEOID']);
map.setFilter('user-congress-old', filter);
var userCongressOldGeoJson = map.querySourceFeatures('congressional-districts', {
sourceLayer: 'congress_old',
filter: map.getFilter('user-congress-old')
});
userDistrictsGeoJson.features.push(userCongressOldGeoJson[0]);
var bbox = turf.bbox(userDistrictsGeoJson);
var bounds = [[bbox[0], bbox[1]], [bbox[2], bbox[3]]];
map.fitBounds(bounds, {
padding: 40
});
}); //geocoder result
}); //map load
So like I said, everything that runs on the geocodes 'result' event works the first time through, but it seems that on the second time through (user searches new address, but doesn't reload map) queryRenderedFeatures returns a smaller subset of features that doesn't include the tiles where the geocoder lands.
Any suggestions are much appreciated.
I ended up solving this by triggering the querying code once on 'moveend' event.
So now the syntax is:
geocoder.on('result', function(e){
map.once('moveend', function(){
.... rest of code
}
}
I thought I had tried this before posting the question, but seems to be working for me now.

OpenLayers 3 - change base map from ol.layer.Tile (Bing) to ol.layer.Image (static image)

I need high-res map images for my application (solar power system design). Bing Maps in OL is good for finding the right building, but too low-res for laying out solar panels. So, I want to use a small high-res static map for doing the layout. Here's what I have currently. First load the Bing Maps layer:
var layers = [];
var baseBingMapLayer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'XXXXX',
imagerySet: 'AerialWithLabels',
})
});
layers.push(baseBingMapLayer);
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-13569845.9277,4485666.89612],
zoom: 5,
})
});
Then when I want to load the static map, the strategy is to remove the Bing Maps layer and then add the static image layer. I'm doing the following:
var extent = [0, 0, 1024, 768];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var staticURL =
"https://maps.googleapis.com/maps/api/staticmap"
+ "?center=37.7431569802915,-121.4451930197085&"
+ "zoom=20&size=1024x768&scale=2&zoom=3&"
+ "format=jpg&maptype=satellite"
+ "&key=XXX";
map.removeLayer(baseBingMapLayer);
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: staticURL,
imageSize: [1024,768],
projection: projection,
imageExtent: extent
})
});
var imageLayerView = new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2
});
map.addLayer(imageLayer);
map.addView(imageLayerView);
Needless to say, this isn't working. I just get a blank screen with no exceptions thrown.
I actually had some success using jQuery to just empty the entire map div and start over with a new map object. However this seems to cause other problems and didn't seem like the right approach to me.
I'm going to continue working on this problem, but thought I would post since I'm sure I won't be the last person to try this little stunt :-)
Gary