[khtml.maplib] New Overlay Syntax
- From: bernhard zwischenbrugger <bz@xxxxxxxxxxxxxxx>
- To: khtml.maplib@xxxxxxxxxxxxx
- Date: Thu, 07 Jul 2011 09:31:06 +0200
Hi all
There was lots of work done on khtml.maplib.
Stefan Keller and Florian Hengartner did lots of great work on vector
graphics.
Ewald Wieser is working on Markers.
I put things together and try to keep everything fast and simple.
New overlay Syntax:
----------------------------
The new Syntax is based on geojson, CSS and DOM Core.
Geojson:
http://geojson.org/
Has a Syntax for static overlays. It provides
Point, LineString, Polygon,...
Geojson describes the geometry but does not describe how things are
displayed on a map.
Geojson Example:
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
All thing that can be put on a map are called "Feature".
There is also a container for features called "FeatureCollection".
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {
"prop0": "value0",
"prop1": 0.0
}
},
{ "type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
[100.0, 1.0], [100.0, 0.0] ]
]
},
"properties": {
"prop0": "value0",
"prop1": {"this": "that"}
}
}
]
}
khtml.maplib syntax:
=============
To create a new feature in the maplib you have to use this code:
var feature=new
khtml.maplib.overlay.Feature({type:"LineString",coordinates:[[10,10],[20,20],[10,20]....]});
Styling:
----------
Geojson does not have a syntax for styling. Here we use the W3C css Syntax:
feature.style.fill="red";
feature.className.baseVal="myCSSRule";
Grouping:
-------------
features can be grouped in FeatureCollections.
featureCollection.appendChild(feature); // add a new feature
...
featureCollection.removeChild(feature); //remove a feature
It is possible to put FeatureCollections to FeatureCollections and build
hierarchical structures.
The map provides at the beginning a default FeatureCollection. You can
use this syntax:
<style type="text/css">
.mystyle{
fill:none;
stroke:blue;
stroke-width:5;
stroke-dasharray:5,5;
}
</style>
....
new feature=
khtml.maplib.overlay.Feature({type:"Linestring",coordinates:[...]});
map.featureCollection.appendChild(feature);
map.className.baseVal="mystyle";
Programming:
-------------------
The internal structure is also geojson.
To change the stroke color of all features you could do this:
var features=map.featureCollection.features;
for(var i=0;i<features.length;i++){
features[i].style.stroke="lime";
}
Moving a LatLng of the LineString:
map.featureCollection.features[1].geometry.coordinates[0].lat(48.0);
of
feature.geometry.coordinates[0].lat(48.0)
map.featureCollection.render();
to make changes visible.
Every feature has a render() method and it can be much fast to only
update a
single feature:
feature.render();
Changes:
------------
Geojson has the type "Point" which similar to a marker.
In khtml.maplib there was also a class called Point.
These two data types are not the same and to prevent confusion
I renamed the Point to "LatLng" as in Google maps.
The new syntax:
var p=khtml.maplib.LatLng(48.2,16.4)
Changes done on Hengartner/Kellers work:
---------------------------------------------------------
(only interesting for them)
Layer -> FeatureCollection
Geometry: There is no need for geometry Classes. A geometry is only visible
if it is inside a Feature. My advice was not to use JSON-Parameter - now
I do it ;-)
addContent -> appendChild
Groundoverlay is working now without jquery.
At the moment I'm fixing Kml and add styling.
More Informations:
-------------------------
I try to keep updated this page for overlay syntax
http://wiki.openstreetmap.org/wiki/Simple_overlay_API
At SOTM-EU I will present all these things
Bernhard
Other related posts:
