Sgvizler has moved to github. This site and its repository will no longer be maintained.
wiki:Sgvizler/Chart/SgvizlerVisualizationMap

This chart and its examples are implemented using Sgvizler 0.6, for version 0.5 see Sgvizler/0.5/DesigningQueries.

source:misc/image/screenshot/sMap.png

Sgvizler Map

Draws a map with a set of locations pinned on it. This map extends Google's version making it easier to add information bubbles to locations.

Chart ID
sgvizler.visualization.Map
Source
 src/visualization/Map.js
Other similiar charts
Sgvizler/Chart/GoogleVisualizationMap
Sgvizler/Chart/sgvizler.visualization.MapWKT?

Query result set format

5 columns:

  1. Lat
    Datatype: Number
  2. Long
    Datatype: Number
  3. Label for the location. Becomes the header in the information bubble.
    Datatype: String
  4. Description of the location. Becomes a paragraph in the bubble.
    Datatype: String
  5. URL to the thing at the location. Becomes a link in the bottom of the bubble.
    Datatype: String

See  Google's page on this chart for related information to this chart-

Chart options

This chart extends Sgvizler/Chart/GoogleVisualizationMap and accepts all options as this chart (at least those which are relevant for the version that uses lats and longs). See  Google's page on this chart for all available options.

See Sgvizler/Using, or the example(s) below, for how to set options.

Live Example

Query: Plot things that are north of 72.5 degrees north.

We don't want to add a description (4. column), but an URL (5. column), so we set all descriptions to the empty string by using "" as the 4. column output in the query.

HTML

<div id="ex"
   data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/npd"
   data-sgvizler-query="
        SELECT ?lat ?long ?name &quot;&quot; ?url
        { ?url npdv:nsDecDeg ?lat ; 
               npdv:ewDecDeg ?long ; 
               npdv:name ?name ; 
        FILTER (?lat > 72.5) }"
   data-sgvizler-chart="sgvizler.visualization.Map"
   style="width:400px; height:265px; border:1px solid black; display: inline-block;"></div>

Result

The result of the HTML above (left), and a google.visualization.Table rendering of the same query (right).


Notes

See Sgvizler/Setup for how Sgvizler is setup on this site.

Note that the query and visualization is ment to show the use of Sgvizler, and may not be the most appropriate way of illustrating this result set.

Feedback

Tickets

No results

User Examples and Comments

Users, please insert (links to) other examples of usage of this Sgvizler chart, or relevant comments here.