I'm trying to find 3d map js library with support for custom elevation data. I have DTED2 which I would like to load by library.
Second format I have is xyz.
I tried https://openglobus.org/ without success.
Libraries I found so far but had no time to try: cesiumJs and Tangram.
Thanks
Sorry, for late response, I think it's better ask in openglobus forum, or github issues. Opanglobus supports three terrain providers openglobus, mapbox, and bil16(worldwind). Aslo you can always create your own terrain provider, everything you need to is somehow get terrain tile. Terrain data for openglobus provider is regular grid, and then you just override on of the terrain provider method. For instance take a look inside MapboxTerrain source code and check the example http://openglobus.org/examples/mapboxTerrain/mapboxTerrain.html
Mapbox GL JS renders 3D terrain using x/y/z DEM tiles. Maplibre GL JS does not render 3D terrain but can be tilted and rotated in 3D.
Edit: Maplibre supports 3D terrain now
Related
I'm currently trying to create an app to help route users while they're inside an enclosed location like a mall or a school. I've built up a framework to generate maps of these locations and exported them as images. I was planning on using these images as the map to display on the frontend to somehow draw routes on the images to guide the user. I just can't think of a simple way to do this.
I've seen react-native-maps but that just seems to use the standard Google maps view and doesn't let me use a custom map to draw routes on. Is there any way to accomplish this?
Depending on what level of detail you want, you might be able to do this with an overlay or custom map tiles.
You can overlay your map over google maps using the overlay layer on react-native-maps. If this amount of detail is not enough, you could try creating a tile server to get images or use vector tiles with MapBox maps(which also has some nice react-native bindings).
As for drawing routes, it should be straightforward by using a poly line layer. You'll have to calculate the paths beforehand and draw them using a poly line.
i need to rendere a 3d map like https://www.airbnb.it/map and put on it some "point" at runtime, loading them dinamically via rest. have someone information about building a 3d map (eventually getting data from openstreetmap) via js or others techniques?
thanks
There are already various 3D maps based on OSM data. Take a look at 3D and 3D Development in the OSM wiki.
I think you'll have to use a WebGL library like Cesium (http://cesiumjs.org/).
We've been working with several libraries like GoogleMaps, OpenLayers, ModestMaps... Even we've written a cartographic visor (Java Applet) that dealed with WMS servers several years ago. Of course this visor is currently useless.
Now we want to develop one FULL HTML5 visor because we're having lots of trouble dealing with the most common frameworks (performance, licensing,design ...). We build advanced and technical maps applications for GIS expert.
We want to draw vectors inside a canvas element. We don't want to draw a canvas object over the base map (like we can do with GoogleMaps ...) , we've been dealing with that and it's not the best way, we need a base object as a canvas HTML5 object in which draw directly.
The question is: Is there a free library that renders on a canvas object which we can extend?
If I understand your question correctly, you want a maps API that will draw the map using html5 canvas. It looks like https://github.com/dfacts/Slippy-Map-On-Canvas/ uses the Open Street Maps API to get map tiles and then draws them on the canvas. Is this what you're looking for?
I think this could be the answer: http://leafletjs.com/. This library does everything that we want, it draws vectors on canvas or SVG, draws tiles maps, good integration with geojson and more...It is far and away the best choice.
Certanly this library doesn't use a unique canvas object, but it's even better.
Seatgeek has a zoomable draggable tiled interface.
An example is here:
http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
I want to implement a scrollable draggable interface like this but I cannot use Google's code for google maps.
Also I need the tile system like google maps where it pulls tiles from the server for rendering the map.
Need to implement in javascript. What library can I use? How can I do it?
How does seatgeek do it?
I de-compiled their javascript http://pastebin.com/PVjahhnH
Map Client
OpenLayers
OpenLayers Examples
Map Data
OpenStreetMap
This kind of interface seems complex to implement, but it is just some math tricks. If you decide to implement your own algorithm, try this out:
Take the full image and create tiles in different scales and consequently with different depth.
The user start looking at the scene in real scale, composed by 16 tiles created from the original scene.
If the user drags, all tiles moves equaly. If the user zoom in, all tiles are scaled up.
If the user zoom more than X, you change the 16 tiles by their 16 child tiles! Got it? Higher the zoom, higher the detail. To avoid having 36000 tiles at the same time, generate with different depth and switch them on the fly.
You just need to load and move the tiles. Multiply tile x, y, width, height by the zoom. Keep the focus of the scene in the mouse position. Take a look at this example. It does exactly the steps above, but with a lot of microscope images. It is the same idea of google maps.
CloudMade map tile is one of the server based map tile service. Please read this page server http://cloudmade.com/documentation/map-tiles or contact with alex#cloudmade.com for more information.
I'm looking for a JavaScript library that allows me to build SVG maps from locally hosted shape data (to allow users to use the application without internet connection).
1) Where should I be looking?
2) Is GeoJson a good candidate for shape data?
3) Where do I find shape data for country borders and (1-level deep) subnational entities?
If the library also supported drawing circles with the center point at specific lat/long coordinates, that would be a bonus :)
You could try to use jVectorMap for that. It has a converter to generate custom maps.
Raphaeljs should meet all your requirements. There is an actual example of a map right here http://raphaeljs.com/australia.html. Of course you'll need to provide the appropriate data.