[OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
Javier Carrasco
jcarrasco at prodevelop.es
Mon Oct 31 06:12:48 EDT 2011
There is attached the HTML
Most of the code is copied from http://openlayers.org/dev/examples/mobile-base.js
There is a comment where the template code starts
-----Mensaje original-----
De: Noli Sicad [mailto:nsicad at gmail.com]
Enviado el: lunes, 31 de octubre de 2011 10:42
Para: Javier Carrasco
CC: OpenLayers-Dev Dev; openlayers-users
Asunto: Re: [OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
This is Geojson (below) from the mobile example in JQM and Sencha,
Probably, you can demonstrate how you parse this GeoJSON and display
it in PopUp. The GeoJSON is coordinate point with the attributes i.e.
Name, Country and City.
#############
var features = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [1332700, 7906300]},
"properties": {"Name": "Igor Tihonov",
"Country":"Sweden", "City":"Gothenburg"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [790300, 6573900]},
"properties": {"Name": "Marc Jansen",
"Country":"Germany", "City":"Bonn"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [568600, 6817300]},
"properties": {"Name": "Bart van den Eijnden",
"Country":"Netherlands", "City":"Utrecht"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [-7909900, 5215100]},
"properties": {"Name": "Christopher Schmidt",
"Country":"United States of America", "City":"Boston"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [-937400, 5093200]},
"properties": {"Name": "Jorge Gustavo Rocha",
"Country":"Portugal", "City":"Braga"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [-355300, 7547800]},
"properties": {"Name": "Jennie Fletcher ",
"Country":"Scotland", "City":"Edinburgh"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [657068.53608487, 5712321.2472725]},
"properties": {"Name": "Bruno Binet ",
"Country":"France", "City":"Chambéry"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [667250.8958124, 5668048.6072737]},
"properties": {"Name": "Eric Lemoine",
"Country":"France", "City":"Theys"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [653518.03606319, 5721118.5122914]},
"properties": {"Name": "Antoine Abt",
"Country":"France", "City":"La Motte Servolex"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [657985.78042416, 5711862.6251028]},
"properties": {"Name": "Pierre Giraud",
"Country":"France", "City":"Chambéry"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [742941.93818208, 5861818.9477535]},
"properties": {"Name": "Stéphane Brunner",
"Country":"Switzerland", "City":"Paudex"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [736082.61064069, 5908165.4649505]},
"properties": {"Name": "Frédéric Junod",
"Country":"Switzerland", "City":"Montagny-près-Yverdon"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [771595.97057525, 5912284.7041793]},
"properties": {"Name": "Cédric Moullet",
"Country":"Switzerland", "City":"Payerne"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [744205.23922364, 5861277.319748]},
"properties": {"Name": "Benoit Quartier",
"Country":"Switzerland", "City":"Lutry"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [1717430.147101, 5954568.7127565]},
"properties": {"Name": "Andreas Hocevar",
"Country":"Austria", "City":"Graz"}},
{ "type": "Feature", "geometry": {"type": "Point",
"coordinates": [-12362007.067301,5729082.2365672]},
"properties": {"Name": "Tim Schaub",
"Country":"United States of America", "City":"Bozeman"}}
]
};
On 10/31/11, Javier Carrasco <jcarrasco at prodevelop.es> wrote:
> The code works with any vector layer, including GeoJSON.
>
> I'm not sure if I did understand.
>
>
> -----Mensaje original-----
> De: Noli Sicad [mailto:nsicad at gmail.com]
> Enviado el: lunes, 31 de octubre de 2011 10:09
> Para: Javier Carrasco
> CC: OpenLayers-Dev Dev; openlayers-users
> Asunto: Re: [OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
>
> Yes, It works in iPad simulator.
>
> However, the Popup that I am looking is the one that is using GeoJSON.
>
> Thanks for showing.
>
> Noli
>
>
>
> On 10/31/11, Javier Carrasco <jcarrasco at prodevelop.es> wrote:
>> I did an uncomplete/demo code to show OpenLayers popups based on an
> html
>> template. I have not tested it on mobile.
>>
>> The code is like that:
>>
>> var p1 = new SmartPopup(map); // SmartPopup should be renamed to
>> TemplatePopupManager or similar
>> p1.addLayer('twitterPopup',layer1); // addLayer(templateId,
>> OpenLayers.Layer)
>>
>> and inside the body
>>
>> <div id="twitterPopup" style="visibility:hidden; display:none">
>> <img src="%profile_image_url%" class="twimg"/>
>> <a class="twuser"
>> href="http://twitter.com/%from_user%">%from_user%:</a>
>> <a class="twtext"
>> href="http://twitter.com/%from_user%/status/%id_str%">%text%</a>
>> </div>
>>
>> The words between %...% are attribute names of the feature.
>>
>> You can see a demo here
>> http://gis.prodevelop.es/olsocial/
>>
>> Do you think this is a good approach?
>>
>> Regards
>> Javi
>>
>>
>>
>>
>> -----Mensaje original-----
>> De: openlayers-dev-bounces at lists.osgeo.org
>> [mailto:openlayers-dev-bounces at lists.osgeo.org] En nombre de Noli
> Sicad
>> Enviado el: lunes, 31 de octubre de 2011 4:54
>> Para: OpenLayers-Dev Dev; openlayers-users
>> Asunto: [OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
>>
>> Hi,
>>
>> Leaflet has nice way of incorporating generic PopUp and GeoJSON in
>> displaying feature attributes as illustrated below. It works in mobile
>> as well as in desktop browser.
>>
>> http://leaflet.cloudmade.com/examples/geojson-example.html
>>
>> Openlayers got one, but not on desktop and other framework aside from
>> Jquery mobile and Secha Touch.
>>
>> Openlayers + GeoJSON has PopUp attributes for GeoJSON as seen in
>> mobile-jq example.
>>
>> http://openlayers.org/dev/examples/mobile-jq.html#mappage
>>
>> So as Sencha Touch.
>>
>> http://openlayers.org/dev/examples/mobile-sencha.html
>>
>> However, if you click on Sprinters icon in non mobile devices, the
>> popup would not work since it only caters to the specific windowing
>> framework (jQuery-mobile and Sencha Touch). In other words, it is
>> dependent to windowing toolkit.
>>
>> Although, I am interested in mobile device framework i.e. jQTouch, it
>> does not have a popup control/ (window) to micmic JQM and Sencha
>> Touch.
>>
>> Is there any way to do the GeoJSON attributes PopUp in generic OL
> PopUp?
>>
>> GeoJSON is easier to handle than any other vector data as demonstrate
>> here below.
>>
>> http://leaflet.cloudmade.com/examples/layers-control.html
>>
>> Hope OpenLayers would have friendliers way of handling GeoJSON
>> especially in viewing the it attributes using a generic Popup window.
>>
>> Or anybody has implemented this already? Any link?
>>
>> (Post this URL below, before I get this as a reply :-)
>>
>>
> http://dev.openlayers.org/releases/OpenLayers-2.11/examples/geojson.html
>> )
>>
>> Thanks.
>>
>> Noli
>> _______________________________________________
>> Dev mailing list
>> Dev at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/openlayers-dev
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20111031/7ea26286/popup-0001.html
More information about the Dev
mailing list