geovistory/design-system

Map of all Geographical Places

Closed this issue · 6 comments

joschne commented

Context
Many Geovistory projects have added a set of Geographical Places. Most of these Places have point coordinates and labels. A map, showing the points may give an impression of the geographical region of a project.

The following SPARQL query returns all places with label and coordinates (EPSG:4326).

PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ontome: <https://ontome.net/ontology/>

SELECT ?subject ?geoPlaceLabel ?long ?lat 
    WHERE {?subject ^ontome:p147 ?presence.
  	?subject rdfs:label    ?geoPlaceLabel.
  	?presence ontome:p148 ?place.
   bind(replace(str(?place), '<http://www.opengis.net/def/crs/EPSG/0/4326>', "", "i") as ?rep)
   bind( replace( str(?rep), "^[^0-9\\.-]*([-]?[0-9\\.]+) .*$", "$1" ) as ?long )
   bind( replace( str(?rep), "^.* ([-]?[0-9\\.]+)[^0-9\\.]*$", "$1" ) as ?lat )
}

(To test, you can copy&paste the query here)

Requirement Spec

A web component displaying points on a map.

Interactivity:

  • click on point opens the URI of the place (above ?subject) in a new browser tab

Open Question

  • (how to) display the labels of geographical places?
  • how to limit data size? Show all? Add a bounding box to the query? Do a limit? (See geospatial query examples)

Technical Spec

Props:

  • sparql-endoint [string]: the URL of the sparql endpoint to query
joschne commented

@flicksolutions please review spec

flicksolutions commented

@joschne to the questions:

  • I'd display POI-Icons and on click open a Title in a little bubble that is linked.
  • I'd use a bounding-box, yes. Also: The reply shouldn't be too heavy even when very many items are returned. For displaying the items, I would try clustering.

That's it for my review. spec seems solid.

flicksolutions commented

@joschne sorry, something isn't quite clear:
What is the input of this component? Will it be a array of arrays? e.g. [["Label", lat, long], ...]? (OK, no I got it, the input is just the endpoint and I will do the same query on different endpoints, right?)
And where will it be displayed - e.g. what's the environment it's in?

flicksolutions commented

About limiting the queries:
The problem is, that we don't really have a starting point, like a center of the map, per project. Therefore we cannot fetch the closest points to that starting point.
This is why I think we should add an optional prop: center: [lat,long]|string - if it is not given, we take the center of Switzerland as the startingpoint.

joschne commented

@joschne sorry, something isn't quite clear: What is the input of this component? Will it be a array of arrays? e.g. [["Label", lat, long], ...]? (OK, no I got it, the input is just the endpoint and I will do the same query on different endpoints, right?) And where will it be displayed - e.g. what's the environment it's in?

Correct, the idea is that this query / component can be used with different endpoints having the same data structure, like e.g.:

So the input is just the endpoint.

The component will be placed on pages like these...

... but the general idea is to create standalone (embeddable) components that may be used on websites we don't (yet) know.

joschne commented

About limiting the queries: The problem is, that we don't really have a starting point, like a center of the map, per project. Therefore we cannot fetch the closest points to that starting point. This is why I think we should add an optional prop: center: [lat,long]|string - if it is not given, we take the center of Switzerland as the startingpoint.

The best strategy of limiting the number of places may depend on the use case. E.g. a project could have only a few places, spread across the whole globe. In this case any kind of limit is disturbing. Another project could have millions of places across the world and a bounding box would be helpful.

The one who uses the component should therefore be able configure the limit strategy.

Proposal:

  • There is an optional property limit (using SPARQL LIMIT clause). The default value of the limit is so that the map is still performant on a mobile device. This value has to be retrieved through empirical tests. The limit can't be undefined.
  • There is the optional prop for a center point (lat, long) and the zoomlevel that are used to render the initial map.
  • There is a boolean prop queryBoundingBox. If true, the query is constrained to the visible bounding box. If a user zooms and pans the map, the query is re-exectued.
  • If the limit is reached, the component displays a message 'maximum number of places reached'. If queryBoundingBox us true, the message also says 'please zoom in'.
  • 👍1