[khtml.maplib] Re: New Overlay Syntax
- From: Frank Heinen <f.heinen.nl@xxxxxxxxx>
- To: khtml.maplib@xxxxxxxxxxxxx
- Date: Thu, 7 Jul 2011 09:50:34 +0200
Hey,
Very nice work. I will play with this soon.
Regards,
Frank
2011/7/7 bernhard zwischenbrugger <bz@xxxxxxxxxxxxxxx>
> **
> 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:
