I new in mapping, and I just set up a tile server using the OSM data. the server is using mapnik to render the tiles.
Is it possible to use OSMdroid with my tile server?
Thanks
Yes - you can define your own ITileSource that points to your server. Take a look at HowToIncludeInYourProject and scroll down to "Creating a tile provider chain" for an example.
Sample code:
final ITileSource tileSource = new XYTileSource("Mapnik", ResourceProxy.string.mapnik, 1, 18, 256, ".png", "http://<your tile server here>/");
mMapView.setTileSource(tileSource);
Related
I have several hours trying to find information about support of multipolylines (or multiple segment lines) on Bing Maps API v8, to no avail. I need to have lines made of several segments, in the same way sql server supports it, i.e.
geography::STMLineFromText ('MULTILINESTRING((-84.6725847 31.7707373, -84.6556331 31.7698178)(-93.3023304 33.9048702, -93.3022956 33.9048486))', 4326)
Here, SQL constructs a line made of 2 separate segments.
Leaflet support multipolylines via several arrays of lat/lngs inside an array. i.e. (illustrative purposes)
var polyline = L.polyline([[31.7707373 -84.6725847,31.7698178 -84.6556331] [33.9048702 -93.3023304, 33.9048486 -93.3022956]], { color: 'red', interactive: true, bubblingMouseEvents: false })
How can achieve this under Bing Maps API v8? ideas/suggestions are welcomed!
Thanks!
Yes, you can use MultiLineString's in Bing Maps. If your data is in Well Known Text format, there is a module for that in Bing Maps. Here is a sample: https://bingmapsv8samples.azurewebsites.net/#WKT_Read_Write_Paste (looks like you have to pan/zoom the map to the area of the shape in this sample, but trying your MultiLineString in this sample, it did render).
Here is a code block:
//Load the Well Known Text module.
Microsoft.Maps.loadModule('Microsoft.Maps.WellKnownText', function () {
//Parse well known text string.
var line = Microsoft.Maps.WellKnownText.read('MULTILINESTRING((-84.6725847 31.7707373, -84.6556331 31.7698178)(-93.3023304 33.9048702, -93.3022956 33.9048486))');
//Add parsed shape to the map.
map.entities.push(line);
});
I have created a Mapbox style using Mapbox Studio and set it to be used over WMTS. The URL of the style is:
https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token
where styleId, username and token are variable fields.
When I try to create a WMTS layer in OpenLayers using the url above, the tileGrid is created successfully using createFromCapabilitiesMatrixSet but I get a response error Invalid query param layer from Mapbox.
After some investigation, I noticed that:
The response error persists for all query parameters that are appended from OpenLayers when creating the tile load function. It looks like that Mapbox does not recognise them properly.
OpenLayers website and Mapbox also give examples on using XYZ layers for integration between them.
So, is this some kind of unsupported feature of OpenLayers or do I need to configure anything additional when creating the WMTS OpenLayers?
It's much simpler to set up as a standard OpenLayers XYZ layer using
url: 'https://api.mapbox.com/styles/v1/username/styleId/tiles/{z}/{x}/{y}?access_token=token'
as in the examples.
Mapbox provides WMTS support for compatibility with some other systems. It can also be used in OpenLayers, the setup would be
var parser = new ol.format.WMTSCapabilities();
fetch('https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token').then(function(response) {
return response.text();
}).then(function(text) {
var layer = new ol.layer.Tile({
source: new ol.source.WMTS(
ol.source.WMTS.optionsFromCapabilities(parser.read(text), {
layer: 'styleId',
matrixSet: 'EPSG:3857'
})
)
});
....
....
....
....
});
Both methods will ultimately load the same tile urls, so there's no advantage in using WMTS where XYZ is supported.
I have a Mapbox GL JS implementation that gets its data from a vector mbtiles file that I downloaded from www.openmaptiles.com. I use tileserver.php with the mbtiles file to serve the PBF data, which Mapbox GL can use to display the map.
Is there any way to extract data from this in a specific area or lng/lat-pair using Javascript ?
Once you have added your sources to a Mapbox-GL-JS map and created a layer ("roads", say) that references it, you can use map.querySourceFeatures() to get features at a given screen location. To turn a lat/long into a screen location, you need to use map.project().
So all up:
var features = map.queryRenderedFeatures(map.project([mylng, mylat]), { layers: ['roads'] });
var p = features && features[0] && features[0].properties;
p now contains the properties of the object at that location.
We developed a web page where we are showing health facility locations of a country on a map. We used Leaflet for the map display. We actually do not need to display the online map tiles in the background. If we can only show a vector country map that would also be OK. I came to know that tiles can be downloaded and saved offline in Leaflet etc, but not interested in that direction.
What I want is available in this page
Where Leaflet is used but the world map online tiles are not displayed. But the code is quite complex to understand. Is there any easy example or guidance to do what I need?
This is actually quite easy when using a L.GeoJSON layer. First off you would need to find the correct GeoJSON for the region you want to display. For instance, here are some for the US: http://eric.clst.org/Stuff/USGeoJSON. Next create a map like you would normally do:
var map = new L.Map('map', {
'center': [0, 0],
'zoom': 0
});
Then you would need to fetch/load your GeoJSON data into your script using ajax via jQuery or something else and use that to initialize a GeoJSON layer and add that to your map:
// jQuery ajax request
$.ajax({
// url with your geojson data file
'url': 'my.geo.json',
// return json object, not as string
'dataType': 'json',
// on success handle result
'success': function (result) {
// Initialize GeoJSON layer and add to map
var layer = new L.GeoJSON(result).addTo(map);
// Fit map to bounds of your GeoJSON
map.fitBounds(layer.getBounds());
}
});
That's it. You can find lots of GeoJSON datasets online and if you want to know more about the L.GeoJSON i would recommend reading the reference i linked earlier and this tutorial: http://leafletjs.com/examples/geojson.html
I'm learning how to use Leaflet to make online interactive maps for public health purposes (experienced ArcGIS user, Mapbox TileMill). I'm taking it slow so I understand each piece of code, and I'm working from the Leaflet choropleth example as I want to make choropleth maps. The current task I'm stuck on is how to correctly add topoJSON data to a Leaflet map. I've tried the following code to convert the us states geoJSON to topoJSON, but it hasn't worked. Any suggestions?
var geojson;
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
geojson = L.geoJson(test, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
I've reviewed the topoJSON API reference, but I'm sure I must be making a simple error as I am a beginner to JavaScript in general. Thank you all for your help!
Best
Eli
I'd recommend using your browser debug tools to start through debugging this.
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
This is not valid JavaScript: us-states-topo is not a valid variable name, since -s are not permitted.