[OpenLayers-Dev] Openlayers, GeoJSON and PopUp attributes
Noli Sicad
nsicad at gmail.com
Mon Oct 31 06:15:49 EDT 2011
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