Currently I am exporting a DEM using Agisoft as a TIF. From here is it possible to display a elevation model in leaflet or are there other steps required?
If your TIF files are already split into tiles, then you next step is a tile server. Often these are created as web services, and you can use a web server such as Apache, IIS, or you can easily roll your own in .NET or Ruby, etc.
Your tile server will provide tiles (images chopped up into an evenly-spaced grid, often 256px x 256px, but it could be whatever) based on a tile request which often looks something like this: http://tileserver/tiles/elevation/z/x/y
You can create a Leaflet base layer of your elevation tiles using JavaScript (which could be hosted on the same web server, or another). Here is a simple example that does so for a USGS elevation data source. It also demonstrates how you can customize tile layer options such as the tile size and the min & max zooms.
var mapElemId = 'map';
var mapOptions = {
center: [48.699864, -113.802159],
zoom: 9
};
var map = L.map(mapElemId, mapOptions);
var tileUrl = 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}';
var tileOptions = {
tileSize: 256, // 256 is default
minZoom: 1,
maxZoom: 19,
attribution: 'Tiles Courtesy USGS'
};
L.tileLayer(tileUrl, tileOptions).addTo(map);
#map {
height: 180px;
}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id='map'></div>
If you do not already have tiles, you can create them using a variety of methods and programs. Here is one example that is a good description of the process: http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs-part-1.html
And another good reference for creating your own tiles from OpenStreetMaps: http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles
If you need help with the specifics just let me know!
Related
In depth issue -
When a user loads Map Page it initially loads a map of the whole world before quickly loading just the map portion required.
Goal - What i want is to direct moves to my desired location instead of flashing the whole world first.
Cause - As per my knowledge, this is caused due to following code -
this.maper.events.add('ready', () => { })
But the above code is required too as all the other necessary actions are to be done inside this function only once map gets ready.
Please guide me how to achieve this ?
Set the map camera options when loading the map rather than after the map is loaded. For example:
map = new atlas.Map('myMap', {
center: [-110, 50],
zoom: 2,
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
I'm not very experienced on these platforms so I need your help.
I have edited and add various information in a specific place on OSM (Open Street Maps) and I would like to create a progressive web app which will withdraw these specific info and use the map to my app.
Any suggestions for searching material? I have in mind something like MAPS.ME app but in but in a much smaller range.
Thank you!
Just use the Google Maps API with the tiles from OSM. The PWA stuff is the same regardless of the MAps requirement.
More info: -
var mapTypeArray = [google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, "OSM"];
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "//b.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OSM",
maxZoom: 19
}));
I am passing proper latitude and longitude to the map but it shows old map, having old lat lng. I know I am doing something wrong in this, but I can't figure out it. My project in ionic framework and for map I am using this plugin map plugin
This my html code
<div style="width:100%;height:200px" id="mapDisplay"></div>
This my angularJS code
var getLat = $scope.dealer.lat;
var getLng = $scope.dealer.lng;
var address = $scope.dealer.address;
var mapDiv = document.getElementById("mapDisplay");
const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);
var map = plugin.google.maps.Map.getMap(mapDiv, {
'camera': {
'latLng': myGeoLocation,
'zoom': 15
}
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
map.addMarker({
'position': myGeoLocation,
'title': address
}, function(marker) {
marker.showInfoWindow();
});
});
From the docs of the map plugin you are using
This plugin generates only one map instance using the Map.getMap()
method. In general, you may want to create multiple maps, but this
plugin doesn't allow it.
So your plugin.google.maps.Map.getMap is only grabbing the existing instance, not creating a new one and the plugin.google.maps.event.MAP_READY is only fired once, the first time. However looking at the source code it looks like the instance exposes a remove method which you can use to destroy the existing instance and create a new one with the new sets of coordinates when the callback is called, e.g: map.remove(function() { /** reset map coordinates **/ }
** Extra **
If you just need to display a map with a set of coordinates you can do it using the native app by passing lat/lon to the $cordovaInAppBrowser plugin. As an example for iOS and Android you'd have the following:
iOS
$cordovaInAppBrowser.open('maps://?q=<latitude>,<longitude>', '_system');
Android
$cordovaInAppBrowser.open('geo:0,0?q=<latitude>,<longitude>', '_system');
And finally you need to enable the geo uri in your config.xml like so:
<allow-intent href="geo:*" />
The plugin doesn't allow to create multiple maps instance More detail.
But you can achieve this by using this code
var map = plugin.google.maps.Map.getMap(div);
map.clear();
map.off();
map.trigger("test");
map.addEventListener(plugin.google.maps.event.MAP_READY);
I'm using fabric.js to draw annotations on page. Now I want to save anootated page as is, rather than to redraw all elements on server side using JSON.
I have main image loaded as:
function redrawPage(src) {
var deferred = $q.defer();
fabric.Image.fromURL(src, function (img) {
zoom.reset();
transformation.reset();
mainImage = img;
mainImage.set({
left: 0,
top: 0
});
mainImage.hasRotatingPoint = true;
mainImage.selectable = false;
canvas.clear();
canvas.setWidth(mainImage.getWidth());
canvas.setHeight(mainImage.getHeight());
canvas.add(mainImage);
canvas.renderAll();
deferred.resolve();
});
return deferred.promise;
}
and when I want to send canvas image data to be stored as annotated version of original image, I get "Operation is insecure" error.
function getImageData() {
var context = canvas.getContext('2d'),
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
return imageData.data;
}
web server from which I load images is not allowing crossOrigin set to "Anonymus"
If the image host does not allow anonymous access then your .getImageData & .toDataURL will always fail because the canvas is tainted. No enduring workaround for that.
You can copy (or re-route) the image to your own server and deliver it from the same domain as your web page. This satisfies cross-origin restrictions so your canvas will not be tainted and your .getImageData will succeed. Of course, copyright laws apply.
There are several other workarounds that involve the user confirming that they want the image to be loaded in a cross-origin compliant way. Here's a relevant Stackoverflow post.
I'm trying to use the approach described in this question, but instead of using jQuery to perform the ajax request, I'm using angularJS $http method. I've already verified and the features are being loaded into the source of the layer, but nothing is shown.
Here is the definition of the source:
var vectorSource = new ol.source.Vector({
loader: function(extent, resolution){
$http.get(url).success(function(data){
var formatGeo = new ol.format.GeoJSON();
var features = formatGeo.readFeatures(data,
{featureProjection: 'EPSG:4326'});
vectorSource.addFeatures(features);
console.log(vectorSource.getFeatures().length);
})},
strategy: ol.loadingstrategy.bbox
});
Is there any incompatibility problems with using angularJS and openlayers?
The problem was the mismatch of the projection of the data in my GeoJSON (EPSG:4326) and of the map (OpenLayers3 default, EPSG:3857).
To solve the problem, I changed the projection of the data that I was using to build the GeoJSON to EPSG:3857. Since the data was stored in a postGis database, I used the function ST_Transform to change the projection of the geom column contaning the objects.