exhibit: polygons and polylines on maps
118 views
Skip to first unread message
David Huynh
Jun 20, 2009, 9:49:44 PM6/20/09
to simile-...@googlegroups.com
Hi all,
Another new feature to check out / test is the support for polygons and
polylines together with point markers on a single map view:
http://trunk.simile-widgets.org/exhibit/examples/polymap/medieval-mediterranean.html
(data from John Saul)
http://trunk.simile-widgets.org/exhibit/examples/polymap/election08.html
The 3 walls on the first map are click-able.
In addition to
ex:latlng=" expression "
you can also specify
ex:polygon=" expression "
ex:polyline=" expression "
Polygons and polylines must be in different properties than lat/lng
points, and each polygon or polyline is specified as a semicolon
separated string of lat/lng pairs, e.g.,
"43.773263,11.255505;43.773325,11.256141;43.773067,11.256157;43.773005,11.255497"
If your data happens to use something other than semicolons, say |, then
you can set the separator like so
ex:latlngPairSeparator="|"
If your lat/lng pairs happen to be lng/lat instead, you can also specify
that
ex:latlngOrder="lnglat"
There are 4 more new settings
borderOpacity: default to 0.5
borderWidth: default to 1
borderColor: default to the color setting, or whatever that a color
coder specifies
opacity: for polygons' fills, default to 0.7
If you want to try it on your own exhibit, link to this API
http://trunk.simile-widgets.org/exhibit/api/exhibit-api.js
Thanks,
David
mleden
Jun 23, 2009, 1:49:10 PM6/23/09
to SIMILE Widgets
Really nice implementation, David! I can see that being very useful.
You probably already know, but I'm seeing the Google API key mismatch
error on the example URL you included.
Thanks again,
-Mark
On Jun 20, 6:49 pm, David Huynh <dfhu...@alum.mit.edu> wrote:
> Hi all,
>
> Another new feature to check out / test is the support for polygons and
> polylines together with point markers on a single map view:
>
> http://trunk.simile-widgets.org/exhibit/examples/polymap/medieval-med...
You probably already know, but I'm seeing the Google API key mismatch
error on the example URL you included.
Thanks again,
-Mark
On Jun 20, 6:49 pm, David Huynh <dfhu...@alum.mit.edu> wrote:
> Hi all,
>
> Another new feature to check out / test is the support for polygons and
> polylines together with point markers on a single map view:
>
Risa
Jun 29, 2009, 12:28:18 AM6/29/09
to SIMILE Widgets
Hi! This sounds like a great feature, but I am having trouble getting
it to work. I am new to Exhibit programming, so maybe I am doing
something obviously wrong when I tried to implement it.
This is for a school project - at UT-HSC Houston (University of Texas
- Health Science Center). I don't have a public web site for it, so
I've included my code below. (Sorry, can't seem to figure out how to
add attachments.)
Thanks in advance,
Risa Myers
risab...@gmail.com
html
----------------------------------------------------------------------
<html>
<head>
<title>Polygon Test</title>
<link href="polygonTest.js" type="application/json" rel="exhibit/
data" />
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-
api.js"
type="text/javascript"></script>
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/
map/map-extension.js?gmapkey="
type="text/javascript"></script>
<!-- map polygons and polylines -->
<script src="http://trunk.simile-widgets.org/exhibit/api/exhibit-
api.js"></script>
</head>
<body>
<h1>Polygon Test</h1>
<!-- define the data sets / collections -->
<div ex:role="exhibit-collection" id="Polygon"
ex:itemTypes="Polygon"></div>
<!-- set the display info for each item type -->
<table ex:role="exhibit-lens" ex:itemTypes="Polygon">
<tr>
<td class="PolygonInfo">
<div><b>Polygon: </b><span ex:content=".Polygon"
class="Polygon"></span> <br>
</td>
</tr>
<table width="100%">
<tr valign="top">
<td ex:role="viewPanel">
<div ex:role="view"
ex:viewClass="Map"
ex:collectionID="Polygon"
ex:label="Polygon Map"
ex:latLng=".latLng"
ex:center="31.187228,-98.763376"
ex:mapHeight="600"
ex:colorKey=".type"
ex:polygon=".Polygon"
ex:borderWidth="7"
ex:borderOpacity="1"
ex:zoom=5>
</div>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------
js data file
--------------------------------------------------------
{
types: {
"Polygon" : {
pluralLabel: "Polygons"
}
},
properties : {
},
"items" : [
{
"type" : "Polygon",
"label" : "TestPolygon",
"Polygon" :
"33.169904,-98.629174;29.792254,-95.403362;33.559733,-101.88205"
}
]
}
it to work. I am new to Exhibit programming, so maybe I am doing
something obviously wrong when I tried to implement it.
This is for a school project - at UT-HSC Houston (University of Texas
- Health Science Center). I don't have a public web site for it, so
I've included my code below. (Sorry, can't seem to figure out how to
add attachments.)
Thanks in advance,
Risa Myers
risab...@gmail.com
html
----------------------------------------------------------------------
<html>
<head>
<title>Polygon Test</title>
<link href="polygonTest.js" type="application/json" rel="exhibit/
data" />
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-
api.js"
type="text/javascript"></script>
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/
map/map-extension.js?gmapkey="
type="text/javascript"></script>
<!-- map polygons and polylines -->
<script src="http://trunk.simile-widgets.org/exhibit/api/exhibit-
api.js"></script>
</head>
<body>
<h1>Polygon Test</h1>
<!-- define the data sets / collections -->
<div ex:role="exhibit-collection" id="Polygon"
ex:itemTypes="Polygon"></div>
<!-- set the display info for each item type -->
<table ex:role="exhibit-lens" ex:itemTypes="Polygon">
<tr>
<td class="PolygonInfo">
<div><b>Polygon: </b><span ex:content=".Polygon"
class="Polygon"></span> <br>
</td>
</tr>
<table width="100%">
<tr valign="top">
<td ex:role="viewPanel">
<div ex:role="view"
ex:viewClass="Map"
ex:collectionID="Polygon"
ex:label="Polygon Map"
ex:latLng=".latLng"
ex:center="31.187228,-98.763376"
ex:mapHeight="600"
ex:colorKey=".type"
ex:polygon=".Polygon"
ex:borderWidth="7"
ex:borderOpacity="1"
ex:zoom=5>
</div>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------
js data file
--------------------------------------------------------
{
types: {
"Polygon" : {
pluralLabel: "Polygons"
}
},
properties : {
},
"items" : [
{
"type" : "Polygon",
"label" : "TestPolygon",
"Polygon" :
"33.169904,-98.629174;29.792254,-95.403362;33.559733,-101.88205"
}
]
}
David Huynh
Jun 29, 2009, 11:28:02 PM6/29/09
to simile-...@googlegroups.com
Hi Risa,
I'd suggest first to try using only one version of the API. Note that
your current HTML file is referring to both version 2.0 and the trunk
version, which likely conflict with each other. As you can see in
http://trunk.simile-widgets.org/exhibit/examples/polymap/medieval-mediterranean.html
it's using
<script src="../../api/exhibit-api.js"></script>
<script src="../../api/extensions/map/map-extension.js"></script>
which have relative URLs, which when you use on your own site you should
change to absolute URLs like so
<script
src="http://trunk.simile-widgets.org/exhibit/api/exhibit-api.js"></script>
<script
src="http://trunk.simile-widgets.org/exhibit/api/extensions/map/map-extension.js"></script>
Remove all references to static.simile.mit.edu. Those are outdated. The
"trunk" version is the version in development and not yet released.
David
I'd suggest first to try using only one version of the API. Note that
your current HTML file is referring to both version 2.0 and the trunk
version, which likely conflict with each other. As you can see in
http://trunk.simile-widgets.org/exhibit/examples/polymap/medieval-mediterranean.html
it's using
<script src="../../api/exhibit-api.js"></script>
<script src="../../api/extensions/map/map-extension.js"></script>
which have relative URLs, which when you use on your own site you should
change to absolute URLs like so
<script
src="http://trunk.simile-widgets.org/exhibit/api/exhibit-api.js"></script>
<script
src="http://trunk.simile-widgets.org/exhibit/api/extensions/map/map-extension.js"></script>
Remove all references to static.simile.mit.edu. Those are outdated. The
"trunk" version is the version in development and not yet released.
David
Risa
Jun 29, 2009, 11:49:22 PM6/29/09
to SIMILE Widgets
Worked like a charm. Thanks for clarifying.
Risa
Risa
John Callahan
Jul 15, 2009, 2:29:03 PM7/15/09
to simile-...@googlegroups.com
I am FINALLY getting a chance to test this with real data and using a
color coder. I used latest versions of FF, IE, Chrome. All of my
polygons are simple four sided rectangles. All of my points are
centroids of the polygons. I do not have any relevant polylines to test
with. The four new settings work fine. A few other observations...
Test exhibit: http://dev.dgs.udel.edu/sites/maps/pubex.html
1) The bottom border is not displaying. The left, top, and right border
are.
2) The legend (usually at the bottom of the map with point markers) is
not appearing. Can we display some type of legend, either identical to
the markers (balloons) or small squares?
3) On the map view showing both points and polys, the onclick event is
not working for the polys. When that view is displayed, it prevents the
onclick events from the other map views. It works fine when clicking
the markers. Not sure why. Could be because the same item has both a
point and polygon associated with it. Nothing good from Firebug.
4) The color coder is not working in Chrome.
5) The ordering of the polygons is important. The larger polygons
should be displayed first (in the back) and smaller ones on top. In my
example, it's displayed that way as my data feed is sorted by size. You
could probably compute the cartesian area in pixels by using
polygon.GBounds (or spherical area using GLatLngBounds but cartesian
will do and perform better.)
- John
color coder. I used latest versions of FF, IE, Chrome. All of my
polygons are simple four sided rectangles. All of my points are
centroids of the polygons. I do not have any relevant polylines to test
with. The four new settings work fine. A few other observations...
Test exhibit: http://dev.dgs.udel.edu/sites/maps/pubex.html
1) The bottom border is not displaying. The left, top, and right border
are.
2) The legend (usually at the bottom of the map with point markers) is
not appearing. Can we display some type of legend, either identical to
the markers (balloons) or small squares?
3) On the map view showing both points and polys, the onclick event is
not working for the polys. When that view is displayed, it prevents the
onclick events from the other map views. It works fine when clicking
the markers. Not sure why. Could be because the same item has both a
point and polygon associated with it. Nothing good from Firebug.
4) The color coder is not working in Chrome.
5) The ordering of the polygons is important. The larger polygons
should be displayed first (in the back) and smaller ones on top. In my
example, it's displayed that way as my data feed is sorted by size. You
could probably compute the cartesian area in pixels by using
polygon.GBounds (or spherical area using GLatLngBounds but cartesian
will do and perform better.)
- John
lostexpectation
Jun 24, 2012, 9:33:51 AM6/24/12
to simile-...@googlegroups.com
how do you if possible set different polygon border colours
you say
borderColor: default to the color setting, or whatever that a color
coder specifies
that requires ex:colorKey=".x" but is used for the markers colours
how do you set a colour key for the border colours
using google spreadsheets and 2 linked collections
David Karger
Jun 24, 2012, 9:58:54 AM6/24/12
to simile-...@googlegroups.com, lostexpectation
Actually, a peek at the code (map-view.js) suggests that you can
only set borderColor to a fixed color value---not something that
varies according to an expression. It's the fill color that can
vary.
Obviously varying border color would be a desirable feature to add to the map view, once it is released for exhibit 3.
Obviously varying border color would be a desirable feature to add to the map view, once it is released for exhibit 3.
--
You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
To view this discussion on the web visit https://groups.google.com/d/msg/simile-widgets/-/R9CryUN43tEJ.
To post to this group, send email to simile-...@googlegroups.com.
To unsubscribe from this group, send email to simile-widget...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Reply all
Reply to author
Forward
0 new messages