Tell me more ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.
up vote 27 down vote favorite
18

I am very interested in the html5 canvas element for maps; work like Cartagen from an MIT Media Lab researcher looks very promising, for example. There is some interesting SVG based work at carto.net. WebSocket seems like a fantastic API for live geospatial data. I have done a few html5 experiments, for example here, with Flickr and Picasa data. What are people getting up to with these new technologies, or what have you tried?

share|improve this question
Adding to the list of examples: rlat.kew.org (via fosslc.org/drupal/content/…) – radek Oct 22 '11 at 17:08
There is an open access article in IJHG's Web GIS in practice series covering HTML5 & Cartagen – radek Dec 5 '11 at 22:05

10 Answers

up vote 11 down vote

OpenLayers can use the HTML5 canvas element for rendering.

share|improve this answer
That looks extremely handy. – bvmou Aug 17 '10 at 6:14
2  
Additionally, OpenLayers has built in support for non Canvas technologies already available in browsers -- VML, SVG -- and has for years. In general, sticking to the HTML5 'buzzword' is skipping the "what problem am I solving?" step of looking for a solution... – Christopher Schmidt Aug 20 '10 at 11:18
3  
The example I gave would require 70,000 dom nodes in svg - it's a good use case for canvas. BTW the exact same browsers that support svg also support canvas. And if you actually think html5 is nothing more than an empty buzzword, there are plenty of other questions for you to contribute to. – bvmou Aug 20 '10 at 21:40
up vote 6 down vote

HTML5 Rocks has some good interactive examples with SVG,Mapping,API and Database requests.

http://slides.html5rocks.com/#slide10 http://slides.html5rocks.com/#slide14

Not a Map but SVG - but would be good for Mapping! http://slides.html5rocks.com/#slide27

share|improve this answer
up vote 5 down vote

I quite like this example that does live raster reprojection/warping in an html5 canvas.

share|improve this answer
seems like the link is broken – underdark♦ Dec 6 '11 at 11:11
The link works for me, today. It is slow though, and the script a the other end doesn't seem to do anything. So -1 until someone puts up or locates a new version somewhere. – matt wilkie♦ Mar 28 '12 at 17:45
up vote 4 down vote

Check also D3. Not really a geospatial-focused library but there is some example with thematic maps. Built on SVG. The same author developed Polymaps.

share|improve this answer
up vote 4 down vote

Take a look at the Georelated blog, which has a series of articles on the state of the art of web mapping. It contains nice reviews of whats possible and the technology available for truely forward thinking web mapping.

  1. Info on Silverlight v flash v html5
  2. Browser based 3d web mapping
  3. Globes in HTML5
  4. Alternatives to tiled image maps and the power of vectors
share|improve this answer
up vote 3 down vote

3D web Mapping using Web GL -

http://www.georelated.com/2011/10/rise-of-globe-in-web-mapping.html

Good Examples and links to WebGL open source toolkits

share|improve this answer
up vote 3 down vote

Try out Kartograph. It's a two shot program:

  1. Take some Geospatial data like a shapefile and run it through Kartograph.py. That will turn it into an SVG file.
  2. Use Kartograph.js to make it pretty in a browser. Add thematic elements, animation, fancy fonts, etc...
share|improve this answer
up vote 2 down vote

Esri have some HTML5 samples on the Javascript API samples page (select from bottom of the tree). Making use of local storage for bookmarks is impressive (at the time of writing this).

share|improve this answer
up vote 1 down vote

Late 2011: http://bl.ocks.org/1392560 (d3 rendering geojson as an interactive, draggable world map svg).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.