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.
Related
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
I work on a database collecting archaeological sites. A goal of our project is to make the data accessible on the web. I would like to plot them on a GeoTIFF to show their distribution and change over time. I further want to calculate Delaunay triangulations and a heatmap which you could display as an overlay. Its important to me to visualize the change over time as an animation. I choose p5.js/processing because I'm not a very skilled programmer (some R, NetLogo and Processsing). i think it will fit the task especially regarding the animation. Before I get into more detail my first question is:
Is this a wise choice of tools? Would you recommend other tools?
If you think my choice is vital here is my second question:
I came across Daniel Shiffmans tutorial on visualizing earthquake data in p5.js and this comes close to what I would do:
https://www.youtube.com/watch?v=ZiYdOwOrGyc
The code is here:
https://github.com/CodingTrain/Rainbow-Code/blob/master/CodingChallenges/CC_57_Earthquake_Viz/sketch.js
In the above example he relies on mapbox.js. I would prefer to use a custom build GeoTiff from our project and avoid mapbox since its not 100% free. But how do I get his code to work with a custom GeoTiff as basemap? I can set his variables "clon" and "clat" to my custom Tiff center point but the coordinates did not get transformed right. I think the Problem is the in the zoom level aka "zoom". But how to determine the Zoom for my custom map? I did not find any other implementation of web mercator projection in p5.js nor processing. Or do i get the math beyond projection wrong?
I'm not very proficient with p5.js, but I have a good experience using d3.js for various dataviz tasks, including crunching geodata. So my suggestion would be to use best of both worlds — use p5.js for rendering and d3.js for data manipulation. In your case, it seems like you will need a simple reprojection (LonLat to Mercator).
To reiterate:
Use d3.js to project data from whatever projection it is (LonLat) into projection that p5.js is using (Mercator)
Render projected data in p5.js
Quick googling landed me this guide on d3 + p5 integration
On the d3 side, there is an API documentation
And here is a good example of GeoTIFF reading/rendering in d3.js. Ok, here is one more.
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/).
Is there a way to incrementally draw a line in the Google Earth Plug-in using the JavaScript API?
If that's not possible, is there a round about method to achieve the same effect?
What I want to achieve is similar to this: http://www.wolfpil.de/v3/animated-poly_v3.html
Yes this is entirely possible, and to be fair it would be trivial to convert the code in the example to use the earth, rather than maps, api. All you would need to do is to find any references to maps objects and simply use the equivalent earth api objects. The math and timing is all done for you...
If you wanted to convert it take a look at the following links, they should give you everything you need to know.
Information on Geometries and Overlays
https://developers.google.com/earth/documentation/geometries
Example of Drawing line strings
http://earth-api-samples.googlecode.com/svn/trunk/examples/linestring.html
Example of Smooth Animation with frameend
http://earth-api-samples.googlecode.com/svn/trunk/examples/event-frameend.html
Finally, you could also just add the earth plugin to the maps implementation, take a look at the following example of Maps/Earth Integration. This would just mean adding the a few lines of code to the example you posted allowing the 'earth' mode to be activated from the maps api. If set up correctly things like polylines are available across the map/earth displays.
Earth Maps integration
http://earth-api-samples.googlecode.com/svn/trunk/examples/maps-integration.html
Beefy integration example
http://earth-api-samples.googlecode.com/svn/trunk/demos/mapsapi/beefy.html
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.