[OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
Noli Sicad
nsicad at gmail.com
Mon Oct 31 07:20:17 EDT 2011
Hi Javi,
Thanks a lots for this example.
This is very good example.
I think you should submit it to dev team and be added to openlayers
example for Popup and GeoJSON.
Good job.
Thanks again.
Noli
On 10/31/11, Javier Carrasco <jcarrasco at prodevelop.es> wrote:
> I think the list removes the scripts from the attachements.
>
> You can see it at this url
> https://correo.prodevelop.es/descarga/jacarma/popup.html
>
> Javi
>
>
> -----Mensaje original-----
> De: Noli Sicad [mailto:nsicad at gmail.com]
> Enviado el: lunes, 31 de octubre de 2011 11:16
> Para: Javier Carrasco
> CC: OpenLayers-Dev Dev; openlayers-users
> Asunto: Re: [OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
>
> Hi Javier,
>
> Could please complete the whole thing (popup.html) (below) that you send me?
>
> where is the "sprintersTemplate" container?
>
> I know this mobile example for JQM and Sencha Touch. I have been
> working on the mobile-base.js to months now. I got a jQTouch mobile
> app but without the popup and layer swicther.
>
> I don't understand what are you tell me here.
>
> Noli
>
> ###################
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
> <meta name="viewport" content="width=device-width,
> initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
> <meta name="apple-mobile-web-app-capable" content="yes">
> <link rel="stylesheet"
> href="http://openlayers.org/dev/theme/default/style.css"
> type="text/css">
> <link rel="stylesheet"
> href="http://openlayers.org/dev/examples/style.css" type="text/css">
>
>
>
> </head>
>
>
> <body>
>
> <div id="map" class="smallmap"></div>
> <div id="sprintersTemplate" style="visibility:hidden; display:none">
> Name: %Name%<br>
> Country: %Country%<br>
> City: %City%<br>
> </div>
> </body>
> </html>
>
>
> On 10/31/11, Javier Carrasco <jcarrasco at prodevelop.es> wrote:
>> 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
>>>>
>>>
>>
>
More information about the Dev
mailing list