Is there a lib outside of mapbox gl for loading the tiles of a giving bbox and zoom level?
i've created some tilesets and styles in Mapbox and want to load it in other viewers (cesium, google maps,...)
I only have min, max lonlat and a z-level and need
to load the specific tiles at the abstraction for the z-level
iterate over the features
get the geometry of the features in wgs84
#csdev. Thanks.
Yes i know there are other implementations in other viewers (ol3, leflet). But i'm not searching for a viewer, only for a framework which service the logic for loading and unloading vector tiles by given bboxes. Because i need it especially for cesium.
I see that there is a possibility to combine ol3 and cesium (ol3-cesium). But i think i will lose at this point functionality of cesium.
mapbox-gl-js is the native library for interacting with mapbox vector tiles - the linked docs show it is build on web-gl, like cesium.
Regarding other libraries:
Leaflet has plugins for showing your mapbox vector tiles - some listed on the site only work on older versions of Leaflet, some only newer.
Similarly, OpenLayers added support for vector tiles, and different examples out there work only with different versions of OpenLayers - their official site has two examples that work with the current version 3.20.
Esri is rolling out their vector tile implementation right now, and there are posts in esri forums from last year explaining specifically about how to utilize mapbox vector tiles using their javascript api.
All of those libraries let you do what you are asking - load the mapbox vector tiles, process features and attributes, and work in different projections.
Edit: (can't post comments yet) - OK, your question says (cesium, google maps,...) so I wasn't sure what was implied by the ellipses. I will add that at least one of the leaflet plugins, and some of the solutions I have seen out there in adapting vector tiles for openlayers or leaflet utilize the mapbox-gl-js library to load and parse vector tiles, then adapt the data for the viewer in question. Obviously if you write a custom solution for cesium an approach like that is possible, and that both libraries are web-gl based is a positive thing. However, I have not done it myself so no more to add. I'm sure you googled 'mapbox cesium' so found things like the recent google post about incorporating MB tiles to cesium, and some built-in cesium classes related to mapbox. All good places to start.
Edit Lastly, I'll say that you might want to be looking at the various libraries that are part of the mapbox vector tile ecosystem - so this library, for example, might be as close as you will get to what you want at present without requiring you to go down to the web-gl level for a custom solution: mapbox vector-tile-js
Related
I'm currently working on a Qt Quick application that will provide a map viewer for a smallish area (1 square KM or so), the map details for which will be provided in a single geo-referenced image file (GeoTIFF, geo-referenced PDF, ESRI Shape file etc.), along with display of current location, operator identified points of interest etc. It's primarily responsibility is the display of custom maps (as opposed to generic maps retrieved from public map image service providers (OSM, MabBox, ESRI etc)), and it will often be used in areas with limited connectivity
An extensive web search has identified others who have made similar enquiries in the past (here, Qt forums etc), and the general suggestions for solutions are as follows:
ArcGIS Runtime with Qt SDK Doesn't work for me as down the track I'm intending to target an embedded linux device using an ARM processor, and ArcGIS doesn't make source available for cross-compilation for arbitrary targets. They've recently produced an Android release, but nothing for ARM linux in general)
QGIS developer libraries GPL licence not compatible with my commercial development
Use the Qt Location Map component with a local tile server or offline tile collection (some plugins have recently introduced support for this) Seems a bit of a hack, as noted I'm primarily using custom maps, as opposed to offline copies of public map server images, and my images won't be big enough to really warrant tiling otherwise
It would be feasible to develop a Qt Quick component from scratch to do this, but given that the existing Qt Location Map component provides a well defined pre-existing front end interface for everything my map would need to do and has an extendable plugin based architecture, writing a custom Qt Location GeoServices plugin seems the most sensible and elegant way forward.
I've started examining the source code of the existing plugins, but can't shake the feeling that in a world containing 8 billion people, with "nothing new under the sun", this would have been done already if it was a good idea....
Would anyone with more familiarity with the Qt Location module care to comment?
Since geo-referenced images can be arbitrarily large, it is the standard to convert them into a tile pyramid, to be able to efficiently display them on any hardware (at the cost of doubling the size, at worst, depending on how many layers you want).
Even if you would write your own geoservice plugin, you most likely will end up (directly or by using 3rd party code) tiling your geotiff.
This said, QtLocation does allow you to use custom tilesets ( http://doc.qt.io/qt-5/location-plugin-osm.html, look for osm.mapping.custom.host) served in most ways (http, https, file, qrc, etc.).
So go ahead, fire up QGis, install the QTiler plugin, and convert your images.
If you need to serve these pictures over the net directly to the clients (thus needing to do the conversion on the client), you can either see what QTiler does, or build up your gdal pipeline (gdal_translate, gdalwarp and gdal2tiles), and ship the relevant gdal bits with your application.
If you need multiple images at the same time, you can either use multiple Plugin elements with different plugin parameters, or you can fork the osm plugin and support multiple custom hosts.
Based upon Paul's response, and a couple of similar responses to the same enquiry on Qt forums and mailing lists, plus my own investigation, I'd conclude the following:
Generating a custom Qt Location GeoServices plugin to directly provide map imagery from a geo-referenced image file would not be a great idea as the implementation would be less than straightforward, and in practice any non-trivial map image would likely be large enough that an initial tiling step, followed by use of one of the standard tiled mapping plugins referencing a local tile set would be more appropriate anyway.
Wanted to see if anybody had experience controlling the color scheme/appearance of map tiles loaded into the Leaflet package for R.
I know it's possible in the bare javascript implementation of Leaflet, but I haven't found anything within the rstudio.github documentation for the Leaflet R package or elsewhere.
For my specific purpose I'd like to match the color scheme of the map tiles to the color scheme of the website I plan to host the Leaflet app on. Particularly, specifying colors for roads, water, and land.
Thanks for any insight!
The map is not rendered by Leaflet itself. Instead Leaflet downloads pre-rendered raster tiles. They are just images, usually png, sometimes jpeg.
As already explained by user SymbolixAU you can only choose a different tile provider. Leaflet provider demo shows various different providers you can use. This is not an exhaustive list, there are various more providers available on the Internet. However keep in mind that each provider has a different tile usage policy and most won't allow you to use their tiles on a heavy-traffic website or to do bulk downloads. And of course there are also paid-for tile providers available.
Alternatively you can choose to render your own tiles.
I've got a Google Maps widget in my googleway package that accepts a styles argument.
You need a valid API key to use Google
library(googleway)
map_key <- "your_api_key"
## style taken from https://snazzymaps.com/
## - paper style
style <- '[{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"hue":"#0066ff"},{"saturation":74},{"lightness":100}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"off"},{"weight":0.6},{"saturation":-85},{"lightness":61}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#5f94ff"},{"lightness":26},{"gamma":5.86}]}]'
google_map(key = map_key, styles = style)
I'm trying to set up a choropleth map for US counties, either as a layer on a map service (for example, using leaflet) or as a plain SVG/VML figure.
The thing is: whereas Chrome or Firefox render either option perfectly, IE8 does not handle so many polygons, and its loading times are unacceptable.
Before falling back to generating static PNGs server side, do you know any lightweight component (not Flash-based) that can generate such a visualization in IE8? Thank you!
In increasing order of complexity :
Creating a choropleth map can be done very easily with Tableau. The visualization can be exported and made interactive. Tableau is not a free software, but you will have a trial period to try it.
We also had students implementing their choropleth map using D3 with the map imported using JSON. As far as I know, this didn't pose problems with IE, although I didn't specifically test them on IE.
Finally, the winning team in one of our course contest created a map (although not a choropleth, they still visualized data on it) using Processing. This usually involves more coding (Java-like), but doable and you can test their visualization on an IE8 browser (at this link - the visualization is very slow to load but this is more due to their extraction of tweeter feeds rather than the map itself).
In general, you can see our students' visualization at this URL, several of them having map visualizations - and you can browse technologies used for choropleth maps at the visualizing.org website.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
i'm trying to desing a new application which allow user see he/her current location on a custom map (office, university compus, etc). but actually i have a couple of question in my mind (i haven't designed this kind of application before). i'm wondering:
How can i draw my own maps, what is the best option for it? there any format that i have to care of, there are any specification about it ?
Once i have my custom map. how can i do to mapping a global position system with the local positions ?
What are the tricks behing zoom on maps ? just differents layers with more or less informations and those layers changes on users demand ?
If a whant to mark some specific points over the map, like a cafeteria, boss's office etc, how can i do that ?
Sorry if my questions are too much generics and dumb, but i really need some clues about this topic because i don't have any idea how to design this kind of application as best as possible. and we don't whant to reinvent the wheel.
I will appreciate any help that you can provide me in order to desing this application
There are a number of approaches you can take to creating a maps application. Which one you use depends on the set of features you want to support, and the degree of control you want to maintain over the product.
If you want something like an embedded google map, then clearly the JavaScript Google Maps API may be best solution. If you need to support further features from the server side, like directions, you can make use of the web services api:
http://code.google.com/apis/maps/documentation/webservices/index.html
If, on the other hand, you essentially need a zoomable map of an area that you can define with markers and borders drawn from your database, and you want complete custom control over this image without having to rely on Google Maps' data or branding, then you can fairly easily build a scalable image either on the client or server, or both.
To start, you will need a set of point coordinates from which to draw your map. These can be derived from the SVG generated by a program like Adobe Illustrator when you draw vector graphics. Thus you could draw your own map in Illustrator and use the generated svg to create your map. In this case you will have to read about SVG and understand how to use it. Raphael.js is an excellent library that offers cross-browser compatible handling of SVG. If your map is of a familiar region, such as a country, you may be able to find SVG coordinates for it already on the web. You could start by grabbing a subset of the data in this file on wikipedia for the country or region you want to map.
Once you have a set of coordinates that define your map areas, you can keep them in a config file that can be read into memory from disk by your application as needed. It's convenient to save this data in the form of a hash, where each set of key-value pairs stores a separate svg 'path', or set of point coordinates that forms a closed shape. These could represent, for instance, the counties in a state.
Once you have the appropriate 'paths' stored in this manner, it is relatively easy to write a wide variety of software implementations.
Check out the imagemagick convert
documentation for the -draw
option for an example of how to
draw a png, jpeg, or gif on your
server from your stored svg paths.
Adam Hooper has some brilliant ideas of what to do with a custom map using SVG on the client side:
http://adamhooper.com/eng/articles/9
Note that you do not necessarily
need to use SVG. Here's an
example of a map drawn on the
server using ImageMagick, with a
highlightable clickmap drawn over it
by the browser, where the
highlighting is handled by the
jquery maphighlight plugin, which
uses the canvas element where it is
supported and VML in its place on
Internet Explorer browsers. All of
these layers (ImageMagick,
client-side click-map, and
client-side javascript highlighting)
are built with straight lines drawn
between point coordinates, so none
of this is actually SVG, and may be
easier to understand. Have a look
at the page source to see how the
click map is drawn, then look at the
maphighlight plugin to understand
what's going on:
http://davidlynch.org/js/maphilight/docs/
A third option, if you need to support more google-maps-like features, but want to add your own map data without using an overlay, is to implement some application of Open Street Maps. If you go to openstreetmap.org, find the area you want to customize, and click the edit tab at the top, you can edit the map as needed for your area. This edits the map data for all users of the Open Street Map service. Then you can get the openlayers javascript from http://openlayers.org/ to render a map on your website from Open Street Maps data that you can freely edit yourself. Also see the OpenStreetMap Wiki that tells you more about the OpenStreetMap movement.
If you don't want to reinvent the wheel, then don't try do do it: take the Google Maps API, add some markers and you're done. Zooming included. They have examples to guide you and there's loads of knowledge about the usage.
All you need is a free API key.
Edit: Your comment in the original question indicates that you want to use a custom overlay over existing maps. That's also possible as this example shows (see docs for custom overlays).
In the effort to not reinvent the wheel (which is definitely a good idea), much of the work of the maps themselves has already been done. The simplest approach will be to integrate Google Maps into your application. To address your individual points:
You don't have to draw your own maps. Tons of them already exist. Unless you're asking about drawing maps of indoor facilities yourself and plotting on those? In which case, how do you plan to approach this from a hardware perspective? GPS won't work well.
You need a piece of hardware that supplies the GPS coordinates. From there, you can just call the API to plot it.
Already done.
Calls to the API. Just provide the location (address, GPS, whatever you have) to the API. GPS will be more accurate, of course. But I'm pretty sure there's a geolocation service as part of the API and you can store the coordinates locally and adjust them manually if they're inaccurate.
If I'm off-base from your actual idea here, let me know. "Maps" is, of course, vague.
The Google Visualization Geomap component is a choropleth map of continents, countries and regions, with colors and values assigned to specific regions. Although it is rendered with Flash, it can only be accessed and customized via JavaScript or GWT API.
Does anyone know an alternative Flash/Flex component that I could easily embed into Flex 3 applications (using AS3) ?
I've had previous success in a non-Flex project using amMap's non Flex maps, but they do offer a Flex mapping product. I was able to create and define custom map regions and you can essentially treat "anything" as a map, so I was able to create custom regions that weren't otherwise considered a region by anyone else.
I am not sure why this post suddenly showed up as "interesting" as of 1 minute ago given its age, but hopefully this can help someone else :)
checkout Esris Map solution. I worked with it on a big project and it proved to be a very flexible and functional mapping api
http://resources.esri.com/arcgisserver/apis/flex/
Quite a few Flex map components you can check out:
Commercial product: http://www.ilog.com/products/ilogelixir/
Open source project: http://code.google.com/p/birdeye/
My experimental component: http://srirangan.net/?p=209 :-)