An interesting article on Flex map interfaces written by a collegue of mine:
http://www.webmapsolutions.com/building-perfect-flex-map-interface
Thursday, August 19, 2010
Monday, August 2, 2010
Flex - Styling Interactive Maps 2
Just returning to my earlier post; using the Openscales API and combining WFS and WMS in one place. The goal was to use a styled map image (returned by a WMS call) and use Flex to draw the features on this image (via a WFS call), to give interactivity. One problem I found was that we needed to give the WFS drawn features a transparency of 0. This way we could get the interactivity (eg click on feature and get attributes pop up) but not see the drawn feature. But, suppose we want this selected feature highlighted in a different colour? Since the transparency is set to 0, the highlight will not be visible. How to get around this ....
Remember the Openscales map is constructed with multiple layers (imagine looking down at multiple sheets of tracing paper, on one there is a road drawn, on another a river etc all lined up correctly geographically). Our WFS (selected) layer is on one of these sheets. So all points marking well, for example, are on this one sheet. But all the points on this sheet have a transparency of 0, so they are there, but invisible. Now it is the sheet or layer which is set to 0 transparency not individual points (polygons or lines) The solution to being able to highlight a selected point (WFS feature)
......
Set a blank map feature layer. Set the transparency to 1. When a point is selected copy this to the blank layer. Hey presto it appears, Make sure when you unselect the point you both copy the point back to its original layer and then clear the blank layer.
Remember the Openscales map is constructed with multiple layers (imagine looking down at multiple sheets of tracing paper, on one there is a road drawn, on another a river etc all lined up correctly geographically). Our WFS (selected) layer is on one of these sheets. So all points marking well, for example, are on this one sheet. But all the points on this sheet have a transparency of 0, so they are there, but invisible. Now it is the sheet or layer which is set to 0 transparency not individual points (polygons or lines) The solution to being able to highlight a selected point (WFS feature)
......
Set a blank map feature layer. Set the transparency to 1. When a point is selected copy this to the blank layer. Hey presto it appears, Make sure when you unselect the point you both copy the point back to its original layer and then clear the blank layer.
Tuesday, July 27, 2010
Advantages and Disadvantages of the Flex ArcGIS Template
Available for download from the ESRI Flex web site is the Flex template. The template and widgets are free. This provides out of the box basic and advanced Web ArcGIS functionality using Flex. From zoom, and pan to address locator and query builder; there are a range of different widgets provided by ESRI and their user community. Build a Flex based ArcGIS web site in minutes. Well maybe.
The biggest two main advantages of the template are fast development and the built in animation. The basic template comes with a core set of widgets or modules which are easily loaded into the template framework. Additional widgets are available for download. The framework has some nice built in animation when widgets are loaded and unloaded.
From a development perspective, modules are easy to build and integrate into the framework. So what then are the disadvantages? These are worth considering not only in deciding whether to use the template but also in planning and estimating. Often the time to develop a site using the template is longer than expected. So let us list out these disadvantages:
- Inflexible UI - you will quickly recognise sites built from the template. Both the look and feel and animation are a give away. It is not easy to customise the UI to make it unique.
- The need to customise widgets - widgets have usually been built for a specific purpose, particularly the more advanced widgets such as query builder. Often clients have their own specific needs, You may thus find yourself pulling the widget apart. This may prove more challenging than it appears. What seem simple modifications may actually take considerably longer. In some case it may be quicker to simply rebuild the widget from scratch.
- Locked into ArcGIS - Not really a disadvantage, but worth noting; the template is only for use with ArcGIS. It is not a template which can be used to hook into other spatial servers. It would be nice if you could easily use this for interacting with other spatial servers, notably Geoserver or Mapserver. But it is an ESRI solution, so why allow access to the ‘competition’.
Overall, the template is a nice solution for clients who have limited budgets and want standard functionality. But, more complexity and a custom look and feel will both be challenging and time consuming. Step back and look closely at client needs. If the requirement is very specific, think about building the application using the ArcGIS Flex API.
The biggest two main advantages of the template are fast development and the built in animation. The basic template comes with a core set of widgets or modules which are easily loaded into the template framework. Additional widgets are available for download. The framework has some nice built in animation when widgets are loaded and unloaded.
From a development perspective, modules are easy to build and integrate into the framework. So what then are the disadvantages? These are worth considering not only in deciding whether to use the template but also in planning and estimating. Often the time to develop a site using the template is longer than expected. So let us list out these disadvantages:
- Inflexible UI - you will quickly recognise sites built from the template. Both the look and feel and animation are a give away. It is not easy to customise the UI to make it unique.
- The need to customise widgets - widgets have usually been built for a specific purpose, particularly the more advanced widgets such as query builder. Often clients have their own specific needs, You may thus find yourself pulling the widget apart. This may prove more challenging than it appears. What seem simple modifications may actually take considerably longer. In some case it may be quicker to simply rebuild the widget from scratch.
- Locked into ArcGIS - Not really a disadvantage, but worth noting; the template is only for use with ArcGIS. It is not a template which can be used to hook into other spatial servers. It would be nice if you could easily use this for interacting with other spatial servers, notably Geoserver or Mapserver. But it is an ESRI solution, so why allow access to the ‘competition’.
Overall, the template is a nice solution for clients who have limited budgets and want standard functionality. But, more complexity and a custom look and feel will both be challenging and time consuming. Step back and look closely at client needs. If the requirement is very specific, think about building the application using the ArcGIS Flex API.
Flex - Styling Interactive Maps
I had an interesting question recently. This was with regards building a mapping application using the open source mapping Flex library Openscales. He wanted to improve the styling of the map layers, but still be able to click on a feature and return attributes. Now Openscales is nice since both WMS and WFS calls are easy.
Let me step back quickly and explain the difference between WFS and WMS. Both involve calls to a spatial server, in this case to Geoserver. WFS returns the raw data. So Flex is able to draw the boundaries of features, making the feature interactive. The features attributes are also returned. Thus a click on a feature can return the features attributes without a additional server call. WMS simply returns an image. Getting the attributes for the latter would require both an additional server call and constructing a new query.
It struck me after thinking about this for a while. Why not combine WFS with WMS. Thus request both a styled WMS image and draw on this the WFS features. Make the WFS feature fully transparent, thus only the WMS styling shows.
After playing with this, the results were pleasingly good. The one thing I'm finding is challenging is the ability for a selected WFS feature to be highlighted when selected. Since it is fully transparent.
I have a potential solution. And will share once I have tested
Let me step back quickly and explain the difference between WFS and WMS. Both involve calls to a spatial server, in this case to Geoserver. WFS returns the raw data. So Flex is able to draw the boundaries of features, making the feature interactive. The features attributes are also returned. Thus a click on a feature can return the features attributes without a additional server call. WMS simply returns an image. Getting the attributes for the latter would require both an additional server call and constructing a new query.
It struck me after thinking about this for a while. Why not combine WFS with WMS. Thus request both a styled WMS image and draw on this the WFS features. Make the WFS feature fully transparent, thus only the WMS styling shows.
After playing with this, the results were pleasingly good. The one thing I'm finding is challenging is the ability for a selected WFS feature to be highlighted when selected. Since it is fully transparent.
I have a potential solution. And will share once I have tested
Tuesday, December 15, 2009
OpenScales
I've been working for some time now with the Openscales AS3 library. Finally we have a Flex GIS client. The library is work in progress, but already offers really nice features and functions. At some point soon I will share some of my work and code. I've been busy customising core functional elements including adding Yahoo and Bing baselayers, restricting WFS rendering to scale, allowing WFS layers to be turned on and off, custom styling the interface and components. More to come.
Flex Web Services
I don't often use web services in Flex. But recetly found need to dip my toe in. The following I thought was an exellent simple example. taken from http://www.cflex.net/showFileDetails.cfm?ObjectID=582. Thanks Tracy.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="*"
creationComplete="getWeather()" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.ResultEvent;
import mx.managers.CursorManager;
import mx.controls.Alert;
default xml namespace = "http://www.webservicex.net"; //necessary to access the xml elements easily
[Bindable]private var _xmlResult:XML; //holds the result xml
[Bindable]private var _xlDayData:XMLList; //dataProvider for the day weather dataGrid
[Bindable]private var _sPlace:String;
/** invokes the web service operation to get the weather */
private function getWeather():void
{
CursorManager.setBusyCursor();
WS.GetWeatherByZipCode.send();
}
/** called by the WebService result event. Sets the dataProviders as necessary */
private function onResult(oEvent:ResultEvent):void
{
_xmlResult = XML(oEvent.result);
var xmlResultNode:XML = _xmlResult.GetWeatherByZipCodeResult[0];
var xmlDetailsNode:XML = xmlResultNode.Details[0];
outputInfo.text = _xmlResult.toXMLString();
_sPlace = xmlResultNode.PlaceName.text() + ", " + xmlResultNode.StateCode.text();
_xlDayData = xmlDetailsNode.WeatherData;
CursorManager.removeBusyCursor();
}//onResult
/** labelFunction for DataGrid. It seems that the namespace on the xml makes
* using the DataGridColumn dataField not work. At least I couldn't get it to work. */
private function lfDayData(oItem:Object, dgc:DataGridColumn):String
{
var sReturn:String = "";
var xmlItem:XML = XML(oItem); //get the item object cast as an xml object
var sHeaderText:String = dgc.headerText; //get the header text for this column
switch (sHeaderText) //logic to determine which node to get the data from
{
case "Day":
sReturn = xmlItem.Day.text();
break;
case "High":
sReturn = xmlItem.MaxTemperatureF.text();
break;
case "Low":
sReturn = xmlItem.MinTemperatureF.text();
break;
}
return sReturn;
}
]]>
</mx:Script>
<mx:WebService id="WS" wsdl="http://www.webservicex.net/WeatherForecast.asmx?WSDL"
useProxy="false"
fault="Alert.show(event.fault.faultString), 'Error'"
result="onResult(event)" >
<mx:operation name="GetWeatherByZipCode" resultFormat="e4x" >
<mx:request>
<ZipCode>{zipcode.text}</ZipCode>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Panel title="WebService Example" height="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" id="myPanel">
<mx:TextArea x="200" width="400" height="250" id="outputInfo" />
<mx:HBox>
<mx:Label width="100%" color="blue"
text="Enter a zip code."/>
<mx:TextInput id="zipcode" text="30117"/>
<mx:Button label="Get weather" click="getWeather()"/>
</mx:HBox>
<mx:Text id="txtPlace" htmlText="{_sPlace}"/>
<mx:DataGrid dataProvider="{_xlDayData}" height="180">
<mx:columns>
<mx:DataGridColumn labelFunction="lfDayData" headerText="Day" width="200" />
<mx:DataGridColumn labelFunction="lfDayData" headerText="High" width="100" />
<mx:DataGridColumn labelFunction="lfDayData" headerText="Low" width="100" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="*"
creationComplete="getWeather()" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.ResultEvent;
import mx.managers.CursorManager;
import mx.controls.Alert;
default xml namespace = "http://www.webservicex.net"; //necessary to access the xml elements easily
[Bindable]private var _xmlResult:XML; //holds the result xml
[Bindable]private var _xlDayData:XMLList; //dataProvider for the day weather dataGrid
[Bindable]private var _sPlace:String;
/** invokes the web service operation to get the weather */
private function getWeather():void
{
CursorManager.setBusyCursor();
WS.GetWeatherByZipCode.send();
}
/** called by the WebService result event. Sets the dataProviders as necessary */
private function onResult(oEvent:ResultEvent):void
{
_xmlResult = XML(oEvent.result);
var xmlResultNode:XML = _xmlResult.GetWeatherByZipCodeResult[0];
var xmlDetailsNode:XML = xmlResultNode.Details[0];
outputInfo.text = _xmlResult.toXMLString();
_sPlace = xmlResultNode.PlaceName.text() + ", " + xmlResultNode.StateCode.text();
_xlDayData = xmlDetailsNode.WeatherData;
CursorManager.removeBusyCursor();
}//onResult
/** labelFunction for DataGrid. It seems that the namespace on the xml makes
* using the DataGridColumn dataField not work. At least I couldn't get it to work. */
private function lfDayData(oItem:Object, dgc:DataGridColumn):String
{
var sReturn:String = "";
var xmlItem:XML = XML(oItem); //get the item object cast as an xml object
var sHeaderText:String = dgc.headerText; //get the header text for this column
switch (sHeaderText) //logic to determine which node to get the data from
{
case "Day":
sReturn = xmlItem.Day.text();
break;
case "High":
sReturn = xmlItem.MaxTemperatureF.text();
break;
case "Low":
sReturn = xmlItem.MinTemperatureF.text();
break;
}
return sReturn;
}
]]>
</mx:Script>
<mx:WebService id="WS" wsdl="http://www.webservicex.net/WeatherForecast.asmx?WSDL"
useProxy="false"
fault="Alert.show(event.fault.faultString), 'Error'"
result="onResult(event)" >
<mx:operation name="GetWeatherByZipCode" resultFormat="e4x" >
<mx:request>
<ZipCode>{zipcode.text}</ZipCode>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Panel title="WebService Example" height="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" id="myPanel">
<mx:TextArea x="200" width="400" height="250" id="outputInfo" />
<mx:HBox>
<mx:Label width="100%" color="blue"
text="Enter a zip code."/>
<mx:TextInput id="zipcode" text="30117"/>
<mx:Button label="Get weather" click="getWeather()"/>
</mx:HBox>
<mx:Text id="txtPlace" htmlText="{_sPlace}"/>
<mx:DataGrid dataProvider="{_xlDayData}" height="180">
<mx:columns>
<mx:DataGridColumn labelFunction="lfDayData" headerText="Day" width="200" />
<mx:DataGridColumn labelFunction="lfDayData" headerText="High" width="100" />
<mx:DataGridColumn labelFunction="lfDayData" headerText="Low" width="100" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Sunday, November 22, 2009
Flex and SOAP
Its always fun to work with Web service in Flex. Those pesky headers! Found a couple of terrific links on the subject. Now its easy :-)
http://www.actionscript.org/forums/showthread.php3?t=195916&highlight=e4x+faq
http://craigkaminsky.blogspot.com/2009/05/flex-3-make-net-namespaces-in-soap-xml.html
Just to put some code behind this....
Here is part of the feed:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<feed xml:base="http://www.placespr.com/WebDataService1.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<title type="text">ptg_categories</title>
<id>http://www.placespr.com/webdataservice1.svc/ptg_categories</id>
<updated>2009-11-22T15:26:36Z</updated>
<link rel="self" title="ptg_categories" href="ptg_categories" />
<entry>
<id>http://www.placespr.com/WebDataService1.svc/ptg_categories(1)</id>
<title type="text" />
<updated>2009-11-22T15:26:36Z</updated>
<author>
<name />
</author>
<link rel="edit" title="ptg_categories" href="ptg_categories(1)" />
<category term="ponce_1000Model.ptg_categories" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
<content type="application/xml">
<m:properties>
<d:cat_id m:type="Edm.Int32">1</d:cat_id>
<d:name m:null="true" />
<d:service>hotels.asmx</d:service>
<d:icon>/images/icons/hotels.gif</d:icon>
<d:ordering m:type="Edm.Int32">1</d:ordering>
<d:counting m:type="Edm.Int32">75</d:counting>
</m:properties>
</content>
</entry>
......
and here is the modified code from these excellent links:
private function getCategoriesResult(evt:ResultEvent):void {
var respXML:XML = evt.result as XML;
var xmlSource:String = respXML.toXMLString();
//Strip off the headers
xmlSource = xmlSource.replace(/<[^!?]?[^>]+?>/g, removeNamspaces); // will invoke the function detailed below
var cleanXML:XML = XML(xmlSource);
for each( var item:XML in cleanXML.entry ) // looping over the reportHistory elements to act on them
{
trace( "name: " + item.content.properties.service);
}
}
// Web service response cleaner function
private function removeNamspaces(...rest):String
{
rest[0] = rest[0].replace(/xmlns[^"]+\"[^"]+\"/g, "");
var attrs:Array = rest[0].match(/\"[^"]*\"/g);
rest[0] = rest[0].replace(/\"[^"]*\"/g, "%attribute value%");
rest[0] = rest[0].replace(/(<\/?|\s)\w+\:/g, "$1");
while (rest[0].indexOf("%attribute value%") > 0)
{
rest[0] = rest[0].replace("%attribute value%", attrs.shift());
}
return rest[0];
}
http://www.actionscript.org/forums/showthread.php3?t=195916&highlight=e4x+faq
http://craigkaminsky.blogspot.com/2009/05/flex-3-make-net-namespaces-in-soap-xml.html
Just to put some code behind this....
Here is part of the feed:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<feed xml:base="http://www.placespr.com/WebDataService1.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<title type="text">ptg_categories</title>
<id>http://www.placespr.com/webdataservice1.svc/ptg_categories</id>
<updated>2009-11-22T15:26:36Z</updated>
<link rel="self" title="ptg_categories" href="ptg_categories" />
<entry>
<id>http://www.placespr.com/WebDataService1.svc/ptg_categories(1)</id>
<title type="text" />
<updated>2009-11-22T15:26:36Z</updated>
<author>
<name />
</author>
<link rel="edit" title="ptg_categories" href="ptg_categories(1)" />
<category term="ponce_1000Model.ptg_categories" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
<content type="application/xml">
<m:properties>
<d:cat_id m:type="Edm.Int32">1</d:cat_id>
<d:name m:null="true" />
<d:service>hotels.asmx</d:service>
<d:icon>/images/icons/hotels.gif</d:icon>
<d:ordering m:type="Edm.Int32">1</d:ordering>
<d:counting m:type="Edm.Int32">75</d:counting>
</m:properties>
</content>
</entry>
......
and here is the modified code from these excellent links:
private function getCategoriesResult(evt:ResultEvent):void {
var respXML:XML = evt.result as XML;
var xmlSource:String = respXML.toXMLString();
//Strip off the headers
xmlSource = xmlSource.replace(/<[^!?]?[^>]+?>/g, removeNamspaces); // will invoke the function detailed below
var cleanXML:XML = XML(xmlSource);
for each( var item:XML in cleanXML.entry ) // looping over the reportHistory elements to act on them
{
trace( "name: " + item.content.properties.service);
}
}
// Web service response cleaner function
private function removeNamspaces(...rest):String
{
rest[0] = rest[0].replace(/xmlns[^"]+\"[^"]+\"/g, "");
var attrs:Array = rest[0].match(/\"[^"]*\"/g);
rest[0] = rest[0].replace(/\"[^"]*\"/g, "%attribute value%");
rest[0] = rest[0].replace(/(<\/?|\s)\w+\:/g, "$1");
while (rest[0].indexOf("%attribute value%") > 0)
{
rest[0] = rest[0].replace("%attribute value%", attrs.shift());
}
return rest[0];
}
Tuesday, November 17, 2009
IE8 Vista Problem
I'll not br rotten about Microsoft, since I develop on Windows .. but sometimes!!
I found I could not open IE, out of the blue. Spent a frustrating couple of hours troubleshooting. All to do with security updates and IE settins. The solution which worked of me is as follows:
Open internet explorer and go to menu TOOLS, than to INTERNET OPTIONS. Open the CONNECTION tab,and click on SETTINGS. You then uncheck the 'use of proxy server for this connection' and click ok .
I found I could not open IE, out of the blue. Spent a frustrating couple of hours troubleshooting. All to do with security updates and IE settins. The solution which worked of me is as follows:
Open internet explorer and go to menu TOOLS, than to INTERNET OPTIONS. Open the CONNECTION tab,and click on SETTINGS. You then uncheck the 'use of proxy server for this connection' and click ok .
Sunday, November 15, 2009
AlivePDF
Its been a hectic time with project work. Much to share particularly with regards the ArcGIS Flex API and the open source OpenScales Flex library.
Just a quick mention today on AlivePDF. Historically, I've had to generate PDF's in PHP. AlivePDF is based on the PHP library FPDF. It makes generating PDF's from Flex very straighforward. Alex Britez has written a simple example here.
Just a quick mention today on AlivePDF. Historically, I've had to generate PDF's in PHP. AlivePDF is based on the PHP library FPDF. It makes generating PDF's from Flex very straighforward. Alex Britez has written a simple example here.
Saturday, October 17, 2009
Open Source GIS Clients
I have had a number of companies recently approach me about open source GIS options. This has something to do with my recently published articles. One interesting area has been an investigation into Flex GIS clients. Openlayers is the premier Web 2.0 GIS client; well supported, a rich library filled with an array of functionality .. but written in Javascript. Now I have nothing against Javascript, its free, has a big community behind it and runs in the browser. But I'm a Flex developer. I prefer it because .. it has an excellent IDE which makes for easy debugging, developing sophisticated interactive application is both quick and easy, applications run the same in all browsers, actionscript is object oriented. Actionscript is just nicer and easier to work with .. in my view.
So enough. Anybody who argues against these opinions I would not oppose. Its just how I feel about it. Anyway, the whole Flex GIS open source client issue. I have worked with Modest Maps for sometime now to develop mostly consumer maps. Stop right there! Consumer maps? The world of online maps remains somewhat split. GIS maps and consumer maps. Consumer maps I define as the use of basemaps - tiles which are derived from satellite images or vector road maps for example - to build mash ups; video, imagery, text using, often, the addition of map markers for access (or clickable icons geospatially placed on the map). Here is a simple example. Google, Yahoo, Bing, mapquest offer largely API's for developing consumer maps.
So what are online GIS maps. A simple question? Well maybe. GIS has moved from the desktop to the Web. It was very much a niche market. Geography type nerds generating applications and analyses in large part for government (a generalisation but close to reality). The frustration for GIS vendors was how do they broaden the market. ESRI and the other key private vendors struggled to sell into the enterprise. They still do in fact.
Suddenly google maps arrived on the scene. It shook the mapping industry to its core. Internet maps were everywhere. Its worth noting that Mapquest preceded Google, but the fanfare (and $) waited for Googles arrival. Suddenly the other GIS vendors needed to react. ESRI produced rival online products. But with a GIS twist.
So here we are today. A plethora of consumer map APIs. And ESRI sitting in a somewhat awkward position offering free API's hooking easily into their own server product(s) ArcGIS (not so easily into other providers). Offering consumer and GIS API functionality. With a focus to sell their complete stack to those interested. Their purpose is to make money.
So how about those of us wanting to build online GIS maps, but avoid the high cost of the private vendor solutions? The open source GIS stack is very mature. But how about Flex clients?
I've spent some time looking at the options. Base requirements include:
- Rendering both WFS and WMS in combination
- Overlays of these services on various basemaps
- Drawing tools for line point and polygons
- Identify functionality
I looked at both Modest Maps and OpenScales. Though not its focus there has been some work done on Modest Maps toward some level of interaction with spatial servers. I added a WMS layer at:
http://www.flexmappers.com/mapserving/mapservingWMS/
Note, I had to make some tweeks to the WMS provider, provided with the library.
Openscales is less mature. But very impressive for how long development has been underway. I built the following map application:
http://www.flexmappers.com/mapserving/openscales.html
It supplies much of the base functionality I was looking to include. WMS is proving a little challenging (but i suspect a style tag is mssing from the tile request) and the map interaction is not a smooth as Modest maps. Only openstreetmap is provided, but I am looking to port code from Modest maps to add this functionality.
Ultimately Flex should simply be rendering the points, lines, and polygons supplied by the server.
I am interested to see how easy it might be to port from one library to the other. Either way, Openscales is a very interesting project. One well worth supporting.
So enough. Anybody who argues against these opinions I would not oppose. Its just how I feel about it. Anyway, the whole Flex GIS open source client issue. I have worked with Modest Maps for sometime now to develop mostly consumer maps. Stop right there! Consumer maps? The world of online maps remains somewhat split. GIS maps and consumer maps. Consumer maps I define as the use of basemaps - tiles which are derived from satellite images or vector road maps for example - to build mash ups; video, imagery, text using, often, the addition of map markers for access (or clickable icons geospatially placed on the map). Here is a simple example. Google, Yahoo, Bing, mapquest offer largely API's for developing consumer maps.
So what are online GIS maps. A simple question? Well maybe. GIS has moved from the desktop to the Web. It was very much a niche market. Geography type nerds generating applications and analyses in large part for government (a generalisation but close to reality). The frustration for GIS vendors was how do they broaden the market. ESRI and the other key private vendors struggled to sell into the enterprise. They still do in fact.
Suddenly google maps arrived on the scene. It shook the mapping industry to its core. Internet maps were everywhere. Its worth noting that Mapquest preceded Google, but the fanfare (and $) waited for Googles arrival. Suddenly the other GIS vendors needed to react. ESRI produced rival online products. But with a GIS twist.
So here we are today. A plethora of consumer map APIs. And ESRI sitting in a somewhat awkward position offering free API's hooking easily into their own server product(s) ArcGIS (not so easily into other providers). Offering consumer and GIS API functionality. With a focus to sell their complete stack to those interested. Their purpose is to make money.
So how about those of us wanting to build online GIS maps, but avoid the high cost of the private vendor solutions? The open source GIS stack is very mature. But how about Flex clients?
I've spent some time looking at the options. Base requirements include:
- Rendering both WFS and WMS in combination
- Overlays of these services on various basemaps
- Drawing tools for line point and polygons
- Identify functionality
I looked at both Modest Maps and OpenScales. Though not its focus there has been some work done on Modest Maps toward some level of interaction with spatial servers. I added a WMS layer at:
http://www.flexmappers.com/mapserving/mapservingWMS/
Note, I had to make some tweeks to the WMS provider, provided with the library.
Openscales is less mature. But very impressive for how long development has been underway. I built the following map application:
http://www.flexmappers.com/mapserving/openscales.html
It supplies much of the base functionality I was looking to include. WMS is proving a little challenging (but i suspect a style tag is mssing from the tile request) and the map interaction is not a smooth as Modest maps. Only openstreetmap is provided, but I am looking to port code from Modest maps to add this functionality.
Ultimately Flex should simply be rendering the points, lines, and polygons supplied by the server.
I am interested to see how easy it might be to port from one library to the other. Either way, Openscales is a very interesting project. One well worth supporting.
Sunday, October 11, 2009
Flex and PHP POST
I always forget the syntax when trying to get around the Flex sandbox and use PHP. On the Flex side we need the following:
[Bindable]private var pr_url:String;
..
private function init():void
{
..
pr_url = "url to SOAP service for example";
pr.send();
}
..
<mx:HTTPService id="pr" resultFormat="e4x" result="getMonths_result(event);" fault="getMonths_fault(event);" method="POST" url="http://www.flexmappers.com/puertorico/test.php">
<mx:request xmlns="">
<url>
{pr_url}
</url>
</mx:request>
</mx:HTTPService>
On the PHP side:
<?php
header('Content-Type: text/xml');
$url = $_POST["url"];
$data = file_get_contents($url);
echo $data;
?>
[Bindable]private var pr_url:String;
..
private function init():void
{
..
pr_url = "url to SOAP service for example";
pr.send();
}
..
<mx:HTTPService id="pr" resultFormat="e4x" result="getMonths_result(event);" fault="getMonths_fault(event);" method="POST" url="http://www.flexmappers.com/puertorico/test.php">
<mx:request xmlns="">
<url>
{pr_url}
</url>
</mx:request>
</mx:HTTPService>
On the PHP side:
<?php
header('Content-Type: text/xml');
$url = $_POST["url"];
$data = file_get_contents($url);
echo $data;
?>
Tuesday, September 22, 2009
OpenScales
While becoming increasingly more impressed with Openlayers I came across OpenScales. A porting of sorts of Openlayers to Actionscript 3.0. Some key links below:
My OpenStreetmap, WMS, WFS Test
http://www.flexmappers.com/openscales
Code Examples
http://openscales.org/svn/openscales/trunk/openscales-fx-examples/src/main/flex/
Demo
http://openscales.org/openscales.swf
api
http://openscales.org/mvn-site/
http://openscales.org/mvn-site/openscales-core/asdoc/index.html
GetCapabilities Test
http://openscales.org/proxy.php?url=http://sigma.openplans.org/geoserver/ows?service=WFS%26request%3DGetCapabilities
My OpenStreetmap, WMS, WFS Test
http://www.flexmappers.com/openscales
Code Examples
http://openscales.org/svn/openscales/trunk/openscales-fx-examples/src/main/flex/
Demo
http://openscales.org/openscales.swf
api
http://openscales.org/mvn-site/
http://openscales.org/mvn-site/openscales-core/asdoc/index.html
GetCapabilities Test
http://openscales.org/proxy.php?url=http://sigma.openplans.org/geoserver/ows?service=WFS%26request%3DGetCapabilities
Sunday, September 20, 2009
PostGIS
Here is an excellent guide to working with PostGIS. Some of my additional notes:
Load Shapefile to PostGIS
a) DB Connect:
psql -d gisdb -h localhost -U matt
b) Generate sql file from shapefile:
C:\Program files\PostgreSQL\8.2\bin>shp2pgsql.exe data\states > states.sql
c) Use pgAdmin to ru sql (tools -> query tool. In query tool open->go to the states.sql
Paul Ramsey wrote PostGIS. I recently shared some emails with him. Thought part of the discussion worth reprinting:
Q. What is the difference between PostGIS and ArcSDE?
A. At a very high level (or perhaps this is a very low level), PostGIS /
PostgreSQL is a database, and ArcSDE is not. ArcSDE is a "spatial
middleware", it runs as a separate process and talks to the real
database below it. PostGIS is a "dynamically loadable runtime" inside
the PostgreSQL process -- it runs inside the same address space as
PostgreSQL, from the point of view of the computer, it's the all the
same program.
PostGIS should be viewed in exactly the same way relative to
PostgreSQL as Oracle Spatial should vis-a-vis Oracle, SQL Server
Spatial vis-a-vis SQL Server, Informix Spatial Extender vis-a-vis
Informix, etc, etc, etc. It works exactly the same way as all those
other in-process spatial type extensions to relational databases. So,
call it an "extension", a "spatial type", a "data blade", etc.
Unfortunately, years of marketing by various vendors have muddied the
terminological water surrounding type extension mechanisms.
The most important functional differences with SDE have nothing to do
with spatial database functionality and everything to do with ESRI
product placement and marketing. You'll find that ESRI products talk
more directly to ArcSDE than they do to PostGIS (or Oracle Spatial or
SQL Server Spatial, for that matter) because ESRI is interested in
selling their whole stack (desktop + server + web apps) to their
clients, not just the ArcGIS component. It's a non-trivial benefit for a customer that (a) already has a lot of ESRI software and (b) can afford the maintenance overhead in dollars, time and expertise that ArcSDE extracts.
Load Shapefile to PostGIS
a) DB Connect:
psql -d gisdb -h localhost -U matt
b) Generate sql file from shapefile:
C:\Program files\PostgreSQL\8.2\bin>shp2pgsql.exe data\states > states.sql
c) Use pgAdmin to ru sql (tools -> query tool. In query tool open->go to the states.sql
Paul Ramsey wrote PostGIS. I recently shared some emails with him. Thought part of the discussion worth reprinting:
Q. What is the difference between PostGIS and ArcSDE?
A. At a very high level (or perhaps this is a very low level), PostGIS /
PostgreSQL is a database, and ArcSDE is not. ArcSDE is a "spatial
middleware", it runs as a separate process and talks to the real
database below it. PostGIS is a "dynamically loadable runtime" inside
the PostgreSQL process -- it runs inside the same address space as
PostgreSQL, from the point of view of the computer, it's the all the
same program.
PostGIS should be viewed in exactly the same way relative to
PostgreSQL as Oracle Spatial should vis-a-vis Oracle, SQL Server
Spatial vis-a-vis SQL Server, Informix Spatial Extender vis-a-vis
Informix, etc, etc, etc. It works exactly the same way as all those
other in-process spatial type extensions to relational databases. So,
call it an "extension", a "spatial type", a "data blade", etc.
Unfortunately, years of marketing by various vendors have muddied the
terminological water surrounding type extension mechanisms.
The most important functional differences with SDE have nothing to do
with spatial database functionality and everything to do with ESRI
product placement and marketing. You'll find that ESRI products talk
more directly to ArcSDE than they do to PostGIS (or Oracle Spatial or
SQL Server Spatial, for that matter) because ESRI is interested in
selling their whole stack (desktop + server + web apps) to their
clients, not just the ArcGIS component. It's a non-trivial benefit for a customer that (a) already has a lot of ESRI software and (b) can afford the maintenance overhead in dollars, time and expertise that ArcSDE extracts.
GeoDjango
Wikipedia defines Django as follows:
"Django's primary goal is to ease the creation of complex, database-driven websites. Django emphasizes reusability and "pluggability" of components, rapid development, and the principle of DRY (Don't Repeat Yourself). Python is used throughout, even for settings, files, and data models."
The two key links for GeoDjango:
GeoDjango Online Docs
Django Docs
"Django's primary goal is to ease the creation of complex, database-driven websites. Django emphasizes reusability and "pluggability" of components, rapid development, and the principle of DRY (Don't Repeat Yourself). Python is used throughout, even for settings, files, and data models."
The two key links for GeoDjango:
GeoDjango Online Docs
Django Docs
WMS and Bing/Yahoo Basemap Overlays
Here is an interesting issue I found today with WMS overlay. When WMS layers are created in either Mapserver or Geoserver then added as overlays to Yahoo or Bing their alignment is wrong.
Let me step back. As mentioned in earlier posts. One can create a WMS layer in geoserver and through the excellent config interface add this as a layer to Google earth.
All align perfectly. Now adding the same WMS to Modest Maps and overlaying it on Yahoo shows the WMS misaligned:
Turning to Openlayers, I find the same problem:
In each of the latter cases the WMS layer also looks stretched. I'll find the fix and post it.
Let me step back. As mentioned in earlier posts. One can create a WMS layer in geoserver and through the excellent config interface add this as a layer to Google earth.
All align perfectly. Now adding the same WMS to Modest Maps and overlaying it on Yahoo shows the WMS misaligned:
Turning to Openlayers, I find the same problem:
In each of the latter cases the WMS layer also looks stretched. I'll find the fix and post it.
Saturday, September 19, 2009
Map Technology Overview
I've been on a technology review of late. Mostly driven by client requests. I never cease to be amazed by what is now available. So far my thoughts in brief:
Mapserver is a pain to configure. Manually writing mapfiles, takes me back to the days of ArcIMS and axl files. Geoserver is far easier in every respect. It has a terrific admin interface. Setting up basic map services, WMS, WFS is easy. Exporting in formats read by google maps etc is also a piece of cake. If it were not for the need of a full application server, the choice of geospatial server would be easy. Geoserver also allows for easy generation of Georss, KML and viewing of map layers in openlayers.
Caching and tiling is another area which favours Geoserver. Geowebcache is integrated into geoserver. No need for additional work. The config screen allows for easy seeding. Mapserver works with tilecache. From the work I have done so far you tile mapserver by calling tilecache and passing the mapserver url.
I'm still working with openlayers but am so far very impressed. One thing I already notice is how much is there. I really like the Modest Maps Flex library. But with a smaller community, it does not have the same depth of code. I'm still playing here, so more feedback later.
I'd like to know one of the big fours - mapquest, MSN, Yahoo and Google - API's. I lean towards mapquest, largely due to the feedback I have read and my impressions from conferences. I recently signed up for their developer account. A couple of people were soon emailing me with contact info. On one side I thought this great, since support might be more forthcoming. On the other side, money reared its ugly head. Use of this service beyond local testing has a price tag! Reminds me why I so favour open source.
Other areas on my radar at the moment beyond testing the mapquest API include:
- Geodjango testing
- PostGIS and shapefile write up
- Javascript to Flex/Flash communication
I'll write more on this in due course. I asked Paul Ramsey (OpenGeo and PostGIS author) his thoughts on Geoserver versus Mapserver. Here is his repy:
If you are deep into OGC standards, Geoserver has a big advantage in
completeness of implementations of things like SLD and WFS. (Less on
WMS).
I did a talk last year which, though tongue-in-cheek addresses the
more important differences. Which are philosophical more than anything
else. Scriptable web rendering engine vs complete spatial web
environment.
http://s3.cleverelephant.ca/geoweb-mapserver.pdf
Most of the speed differences are gone at this point, they perform
very comparably for common use cases.
Mapserver is a pain to configure. Manually writing mapfiles, takes me back to the days of ArcIMS and axl files. Geoserver is far easier in every respect. It has a terrific admin interface. Setting up basic map services, WMS, WFS is easy. Exporting in formats read by google maps etc is also a piece of cake. If it were not for the need of a full application server, the choice of geospatial server would be easy. Geoserver also allows for easy generation of Georss, KML and viewing of map layers in openlayers.
Caching and tiling is another area which favours Geoserver. Geowebcache is integrated into geoserver. No need for additional work. The config screen allows for easy seeding. Mapserver works with tilecache. From the work I have done so far you tile mapserver by calling tilecache and passing the mapserver url.
I'm still working with openlayers but am so far very impressed. One thing I already notice is how much is there. I really like the Modest Maps Flex library. But with a smaller community, it does not have the same depth of code. I'm still playing here, so more feedback later.
I'd like to know one of the big fours - mapquest, MSN, Yahoo and Google - API's. I lean towards mapquest, largely due to the feedback I have read and my impressions from conferences. I recently signed up for their developer account. A couple of people were soon emailing me with contact info. On one side I thought this great, since support might be more forthcoming. On the other side, money reared its ugly head. Use of this service beyond local testing has a price tag! Reminds me why I so favour open source.
Other areas on my radar at the moment beyond testing the mapquest API include:
- Geodjango testing
- PostGIS and shapefile write up
- Javascript to Flex/Flash communication
I'll write more on this in due course. I asked Paul Ramsey (OpenGeo and PostGIS author) his thoughts on Geoserver versus Mapserver. Here is his repy:
If you are deep into OGC standards, Geoserver has a big advantage in
completeness of implementations of things like SLD and WFS. (Less on
WMS).
I did a talk last year which, though tongue-in-cheek addresses the
more important differences. Which are philosophical more than anything
else. Scriptable web rendering engine vs complete spatial web
environment.
http://s3.cleverelephant.ca/geoweb-mapserver.pdf
Most of the speed differences are gone at this point, they perform
very comparably for common use cases.
Openlayers
The openlayers community seems to be becoming ever larger. Though I'm predominantly a Flex developer, its time I checked out Openlayers. On my recent WMS kick, I know combining WMS with other basemaps is well supported. Looking at the online docs I found this terrific examples page.
As a newbie I took out a few code examples:
1) Basic map
<html>
<head>
<title>OpenLayers Example</title>
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
2) WMS map
<html>
<head>
<title>OpenLayers Example</title>
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
3) Locally running WMS
<html xmlns="http://www.w3.org/1999/xhtml">
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost:8080/geoserver/wms", {layers: 'topp:states_ugl'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</html>
4) Local WMS with Bing (note you will need to copy the OpenLayers.js file from
http://openlayers.org/dev/OpenLayers.js)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Bing Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="OpenLayers.js"></script>
<script>
var map;
function init(){
map = new OpenLayers.Map("map");
map.addControl(new OpenLayers.Control.LayerSwitcher());
var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
type: VEMapStyle.Shaded
});
var hybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
type: VEMapStyle.Hybrid
});
var aerial = new OpenLayers.Layer.VirtualEarth("Aerial", {
type: VEMapStyle.Aerial
});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost:8080/geoserver/wms", {layers: 'topp:states_ugl'},
{
'opacity': 0.4, visibility: true,
'isBaseLayer': false,'wrapDateLine': true
}
);
map.addLayers([wms,shaded, hybrid, aerial]);
map.setCenter(new OpenLayers.LonLat(-110, 45), 3);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Bing Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates the use of Bing layers.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">This example demonstrates the ability to create layers using tiles from Bing maps.</div>
</body>
</html>
4) Openlayers controls
For this example you'll need three files openlayers.js, style.css and theme/style.css. You'll need to create a theme directory for the latter. Note in theme/style.css the icons will need adding to a img directory. I have not done this here, so map icon will not appear.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Map Controls Example</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults()
],
numZoomLevels: 6
});
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"});
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
jpl_wms.setVisibility(false);
dm_wms.setVisibility(false);
map.addLayers([ol_wms, jpl_wms, dm_wms]);
if (!map.getCenter()) map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Map Controls Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
</p>
<a style="float:right" href="" id="permalink">Permalink</a>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
5) Georss
For this example you'll need to download this georss.xml feed (just copy source in your browser)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers GeoRSS Example</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
OpenLayers.ProxyHost = "/proxy/?url=";
function init(){
map = new OpenLayers.Map('map', {maxResolution:'auto'});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
function addUrl() {
var urlObj = OpenLayers.Util.getElement('url');
var value = urlObj.value;
var parts = value.split("/");
var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value);
map.addLayer(newl);
urlObj.value = "";
}
</script>
</head>
<body onload="init()">
<h1 id="title">GeoRSS Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Display a couple of locally cached georss feeds on an a basemap.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are
currently supported. The OpenLayers GeoRSS parser will automatically connect an information bubble to the map
markers, similar to Google maps. In addition, the parser can use custom PNG icons for markers. A sample GeoRSS
file (georss.xml) is included.
<form onsubmit="return false;">
GeoRSS URL: <input type="text" id="url" size="50" value="georss.xml" />
<input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
</form>
<p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page --
for example, entering 'georss.xml' will work by default, because there is a local file in the directory called
georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any
HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>
</div>
</body>
</html>
There are so many examples online. I walked through some, here is a list of just some of the functionality:
Openlayers
Overview map
Random pan
Layers on off tab
Arcgis restful call
Arcims combine
Bing layers
Add box to map
Buffer how many tiles are included outside the view area
Map click events
Draggable rectangle
Fractional zoom (rectangle zoom)
Adding points, lines and polygons
Toolbar - points, lines and polygons
Digitising
Eventing
GeoRSS – Flickr, marker
As a newbie I took out a few code examples:
1) Basic map
<html>
<head>
<title>OpenLayers Example</title>
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
2) WMS map
<html>
<head>
<title>OpenLayers Example</title>
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
3) Locally running WMS
<html xmlns="http://www.w3.org/1999/xhtml">
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost:8080/geoserver/wms", {layers: 'topp:states_ugl'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</html>
4) Local WMS with Bing (note you will need to copy the OpenLayers.js file from
http://openlayers.org/dev/OpenLayers.js)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Bing Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="OpenLayers.js"></script>
<script>
var map;
function init(){
map = new OpenLayers.Map("map");
map.addControl(new OpenLayers.Control.LayerSwitcher());
var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
type: VEMapStyle.Shaded
});
var hybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
type: VEMapStyle.Hybrid
});
var aerial = new OpenLayers.Layer.VirtualEarth("Aerial", {
type: VEMapStyle.Aerial
});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost:8080/geoserver/wms", {layers: 'topp:states_ugl'},
{
'opacity': 0.4, visibility: true,
'isBaseLayer': false,'wrapDateLine': true
}
);
map.addLayers([wms,shaded, hybrid, aerial]);
map.setCenter(new OpenLayers.LonLat(-110, 45), 3);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Bing Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates the use of Bing layers.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">This example demonstrates the ability to create layers using tiles from Bing maps.</div>
</body>
</html>
4) Openlayers controls
For this example you'll need three files openlayers.js, style.css and theme/style.css. You'll need to create a theme directory for the latter. Note in theme/style.css the icons will need adding to a img directory. I have not done this here, so map icon will not appear.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Map Controls Example</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults()
],
numZoomLevels: 6
});
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"});
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
jpl_wms.setVisibility(false);
dm_wms.setVisibility(false);
map.addLayers([ol_wms, jpl_wms, dm_wms]);
if (!map.getCenter()) map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Map Controls Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
</p>
<a style="float:right" href="" id="permalink">Permalink</a>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
5) Georss
For this example you'll need to download this georss.xml feed (just copy source in your browser)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers GeoRSS Example</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
OpenLayers.ProxyHost = "/proxy/?url=";
function init(){
map = new OpenLayers.Map('map', {maxResolution:'auto'});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
function addUrl() {
var urlObj = OpenLayers.Util.getElement('url');
var value = urlObj.value;
var parts = value.split("/");
var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value);
map.addLayer(newl);
urlObj.value = "";
}
</script>
</head>
<body onload="init()">
<h1 id="title">GeoRSS Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Display a couple of locally cached georss feeds on an a basemap.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are
currently supported. The OpenLayers GeoRSS parser will automatically connect an information bubble to the map
markers, similar to Google maps. In addition, the parser can use custom PNG icons for markers. A sample GeoRSS
file (georss.xml) is included.
<form onsubmit="return false;">
GeoRSS URL: <input type="text" id="url" size="50" value="georss.xml" />
<input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
</form>
<p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page --
for example, entering 'georss.xml' will work by default, because there is a local file in the directory called
georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any
HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>
</div>
</body>
</html>
There are so many examples online. I walked through some, here is a list of just some of the functionality:
Openlayers
Overview map
Random pan
Layers on off tab
Arcgis restful call
Arcims combine
Bing layers
Add box to map
Buffer how many tiles are included outside the view area
Map click events
Draggable rectangle
Fractional zoom (rectangle zoom)
Adding points, lines and polygons
Toolbar - points, lines and polygons
Digitising
Eventing
GeoRSS – Flickr, marker
Wednesday, September 16, 2009
TileCache and Google Maps
Found the following excellent entry from Christopher Schmidt blog. I'll give it a whirl and post my results.
MapServer and TileCache
Spent some time today looking at using TileCache with MapServer. I used in part these docs. Other useful docs are here from Metacarta. I walked through the following (note I am using my work with Mapserver described in an earlier post):
1) Installed Python
2) Downloaded TileCache
3) Unzipped the TileCache directory, ran the setup executable and copied the contents under the directory into C:\ms4w\Apache\cgi-bin
4) Opened C:\ms4w\Apache\cgi-bin\tilecache.cgi and changed the top line to:
#!C:/Python25/python.exe -u
5) I added the following to the C:\ms4w\Apache\cgi-bin\tilecache.cfg file
[mapserver]
type=WMS
url=http://localhost:81/cgi-bin/mapserv.exe?map=/ms4w/Apache/htdocs/wms_mapserver/data/ms_wms.map
extension=png
layers=states_ugl
SRS=EPSG:4326
bbox=-97.6169,39.9179,-81.745,51.0875
6) Running the following:
http://localhost:81/cgi-bin/tilecache.cgi?layers=mapserver&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:4326&bbox=-97.6169,39.9179,-81.745,51.0875&format=image/png&width=400&height=300
gives the map image served by MapServer.
1) Installed Python
2) Downloaded TileCache
3) Unzipped the TileCache directory, ran the setup executable and copied the contents under the directory into C:\ms4w\Apache\cgi-bin
4) Opened C:\ms4w\Apache\cgi-bin\tilecache.cgi and changed the top line to:
#!C:/Python25/python.exe -u
5) I added the following to the C:\ms4w\Apache\cgi-bin\tilecache.cfg file
[mapserver]
type=WMS
url=http://localhost:81/cgi-bin/mapserv.exe?map=/ms4w/Apache/htdocs/wms_mapserver/data/ms_wms.map
extension=png
layers=states_ugl
SRS=EPSG:4326
bbox=-97.6169,39.9179,-81.745,51.0875
6) Running the following:
http://localhost:81/cgi-bin/tilecache.cgi?layers=mapserver&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:4326&bbox=-97.6169,39.9179,-81.745,51.0875&format=image/png&width=400&height=300
gives the map image served by MapServer.
MapQuest Flex API Samples
Now leaning towards the Mapquest Flex api. I spied the following demo applications. This demonstrates with source code, some of the core functionality.
On a side note. The AIR application Tour de Flex is well worth installing if you build Flex apps. From a mapping perspective they demo a number of the main mapping API's.
On a side note. The AIR application Tour de Flex is well worth installing if you build Flex apps. From a mapping perspective they demo a number of the main mapping API's.
Subscribe to:
Posts (Atom)