[OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes

Javier Carrasco jcarrasco at prodevelop.es
Mon Oct 31 07:02:43 EDT 2011


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