[mapserver-dev] Canvas support for MapServer

Tue Jan 27 10:43:09 EST 2009

Yes, something like that. I would let MapServer generate only the 
function, with the Id of the canvas element as parameter:

// Code generated by MapServer with Outputformat Canvas:
function msCanvasDraw(canvasId) {
  var canvas is document.getElementById(canvasId)
 ...
}

Then the client page, based on the MapFile msCanvas.map, which has an 
Canvas Outputformat defined, would look like:

That way page layout is separated from server processing: the Canvas 
element is defined in the page layout, and filled with MapServer code 
when the page has been loaded. Another nice thing is that you can define 
multiple Canvas element and fill them with successive calls to 
MapServer, provided you make it possible to set the function name  in 
the OutputFormat section.

This is a bit different from the way Mapserver normally returns its map: 
no images or HTML templates, but a function that has to be executed by 
the onload statement of the calling page. It looks viable to me, but 
whether it fits into the MapServer architecture is up to you to decide. 
When so however, it would offer a very flexible way of integrating a map 
in a web-page.

Jan

Brent Fraser wrote:
> Jan,
>
>  So your thought is to have MapServer generate something like (hacked 
> from the example on 
> https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage):
>
> <!-- --- Mapserver Header Template Generated: --- -->
> <html>
> <head>
>  <script type="application/x-javascript">
>    function draw() {
>      var canvas = document.getElementById("canvas");
>      if (canvas.getContext) {
>        var ctx = canvas.getContext("2d");
>
>        // ------ Mapserver Generated on map request: ------
>        ctx.fillStyle = "rgb(200,0,0)";
>        ctx.fillRect (10, 10, 55, 50);
>        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
>        ctx.fillRect (30, 30, 55, 50);
>
>        // ------ Mapserver Footer Template Generated: --- -->
>      }
>    }
>  </script>
> </head>
> <body onload="draw();">
>   <canvas id="canvas" width="150" height="150"></canvas>
> </body>
> </html>
>
> Sure, it could be done.  One way is to write another output driver for 
> Mapserver.  Another is to use some server-side scripting to ingest 
> Mapserver's SVG and change into JavaScript-canvas code like that 
> above. A performance hit, but at least it would be on the server side, 
> and it might be a good way to prototype the Mapserver driver.
>
> Brent
>
> Jan Hartmann wrote:
>> Hi Brent,
>>
>> First let me say that Canvas support is just an idea; I think it can 
>> be done but whether it is advisable to do so is up to you to decide. 
>> I liked the idea because the Canvas element is supported nowadays by 
>> most browsers, unlike SVG which needs a plugin. It is also much 
>> simpler, so it's easier to use for simple maps, and especially for 
>> simple interactive operations like digitizing, or combining 
>> server-side with client-side graphics. That's why I would prefer 
>> Canvas above SVG, let alone the fact that I much prefer to program in 
>> native Javascript above parsing XML. Most of my maps are simple (I 
>> would guess that goes for many people here), so SVG is decidedly 
>> overkill. The Canvas HTML element also fits nicely in the page layout 
>> and can be processed easily by web-editors.
>>
>> Your suggestion that Canvas could be implemented at the client side 
>> by catching SVG output and transforming it into Canvas directives is 
>> certainly viable. That is also Paul Spencer's view in his reply to my 
>> email.  Yet I would prefer a server-side approach: it's more 
>> efficient (no second parsing of SVG code that had to be generated in 
>> the first place), and I think the server-side code can be easily 
>> adapted from the SVG driver. Canvas is a very simple format, just a 
>> few graphic primitives, more like GD than SVG actually.
>>
>> Again, I don't know how difficult it would be to add a Canvas 
>> outputformat, and whether it fits at all into the MapServer design 
>> philosophy. However, when it could be done, it would give me an a far 
>> more easier tool than SVG  to combine server-side and client-side 
>> mapping.
>>
>> Jan
>>
>> Brent Fraser wrote:
>>> Jan,
>>>
>>>  My interest is in building a (or re-purposing an existing) tool for 
>>> Cartographic Layout, for printing or rendering a graphics format for 
>>> easy viewing (e.g. PDF).  Steve's comments were about using existing 
>>> Web formats and syntax to describe the layout, and existing(?) web 
>>> editors to do the placement/moving of the layout components.
>>>
>>>  My (very limited) understanding of the <canvas> HTML tag is that 
>>> it's a "container" recognized by the browser, and vector (and 
>>> raster) graphics are rendered into it using client-side JavaScript.  
>>> Sort of the JavaScript equivalent of the SVG format.
>>>
>>>  It would be possible to add another output format to Mapserver to 
>>> generate JavaScript code of canvas rendering methods, but a more 
>>> elegant approach might be to write a small(?) JavaScript module to 
>>> ingest Mapserver's SVG and render the objects to the canvas.
>>>
>>>  Are there some specific features of the direct-canvas-output 
>>> approach not available in SVG that you need?
>>>
>>> Brent Fraser
>>>
>>>
>>> Jan Hartmann wrote:
>>>> Hi folks,
>>>>
>>>> A few weeks ago I suggested in a thread about PDF support that 
>>>> Mapserver could perhaps be made to support the new "Canvas" tag. 
>>>> There were no reactions to this, so I don't know if this suggestion 
>>>> is viable/advisable/practicable, or just downright stupid. Can 
>>>> anyone comment? (from 
>>>> http://lists.osgeo.org/pipermail/mapserver-dev/2009-January/008055.html) 
>>>>
>>>>
>>>>> I am wondering if MapServer support for the "Canvas" tag could do 
>>>>> what Steve suggests in a more simple way. Originally, only Safari, 
>>>>> Opera and Firefox supported this tag to allow (simple) 2D drawing, 
>>>>> but recently a surprisingly simple Javascript interface for IE has 
>>>>> become available, translating Canvas command to native IE VRML 
>>>>> commands. It requires just one single script tag in the web page.
>>>>>
>>>>> See the tutorial at the Mozilla site at: 
>>>>> https://developer.mozilla.org/en/Canvas_tutorial
>>>>> and the IE interface (from the Google stables) at: 
>>>>> http://excanvas.sourceforge.net/
>>>>>
>>>>> This is something I have long been looking for. The graphics are 
>>>>> very simple, so the functionality is nothing like PDF or SVG, but 
>>>>> I could imagine that a driver for MapServer could fulfill many 
>>>>> needs. I can use it already by letting Mapserver generate raw 
>>>>> coordinates and catching them with some sort of Ajax, but a 
>>>>> separate driver would be very neat of course.
>>>>>
>>>>> How about it?
>>>>>
>>>>> Jan
>>>>>
>>>>>
>>>>
>>>> ------------------------------------------------------------------------ 
>>>>
>>>>
>>>> _______________________________________________
>>>> mapserver-dev mailing list
>>>> mapserver-dev at lists.osgeo.org
>>>> http://lists.osgeo.org/mailman/listinfo/mapserver-dev
>>>
>>
>