37

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?

12 Answers 12

13

OpenLayers can use the HTML5 canvas element for rendering.

  • 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
7

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

5

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

  • 1
    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
4

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.

4

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
3

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

3

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...
2

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).

1

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

1

http://osmbuildings.org displays 2.5D with HTML5 and Leaflet which looks impressive by results and speed

0

I am pretty impressed by the work of MapBox and Leaflet that Showcase some really nice web mapping applications based on HTML5 and JavaScript Technology. Leaflet is an Open-Source JavaScript Library for Mobile-Friendly Interactive Maps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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